background preloader

CSS tutorials

Facebook Twitter

Learn CSS Layout - floats, positioning, flexbox, grids. A very good time to understand CSS layout. I’ve been building a set of common UI patterns for my CSS Grid resource site, Grid by Example.

A very good time to understand CSS layout

These use CSS Grid Layout but include legacy layout in order that older browsers get some layout - even if not the full design that is implemented with Grid. Something that is apparent when doing this is how little we actually need to override. When items become grid items, much of their previous behaviour is removed. A floated, display: inline-block, display: table, or flex item all become grid items and lose the behaviour that comes with these layout types. This is as defined in the specification, and you can see some examples in this cheatsheet. We also have Feature Queries. To be able to take advantage of the things grid enables, that simply are not possible with older layout methods, you need to be able to bridge the gap between supporting and non-supporting browsers.

However you learn, do learn. CSS Guidelines (2.2.2) – High-level advice and guidelines for writing sane, manageable, scalable CSS. Writing the best CSS when building with HTML5. Becoming HTML agnostic HTML agnostic means to use as little HTML in your CSS (or none).

Writing the best CSS when building with HTML5

The key factor here is to avoid becoming markup reliant and avoid declaring qualified names (the element name). Let's take a basic structure for an unordered list navigation: <ul><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul> Here's what you might be used to seeing this to target the above HTML: ul {}ul li {}ul li a {} These selectors aren't specific enough, they are potentially too complicated and not very efficient, especially when we expand our code.

On becoming HTML agnostic, we can begin to create more classes to represent each element when we need them. <ul class="nav"><li class="nav-item"><a href="#">Link</a></li><li class="nav-item"><a href="#">Link</a></li><li class="nav-item"><a href="#">Link</a></li></ul> And the CSS that we can link with our navigation will look like this: .nav {}.nav-item {}.nav-item a {} Perfect. HTML5 agnostic Multiple line CSS. Why use CSS? - Web developer guides. Go to Previous Section:What is CSS?

Why use CSS? - Web developer guides

This second section of the CSS Getting Started tutorial explains the relationship between CSS and documents. In the exercise you'll learn how to add a CSS stylesheet to the sample document you created in the first section. Information: Why use CSS? Edit Use CSS to define styles for your documents, including the design, layout and variations in display for different devices and screen sizes. An external style sheet has many advantages. Helps avoid duplication Makes maintenance easier Allows you to make a site-wide change in one place Example Using CSS, you store the style information in common files that all the pages share.

CSS Guidelines (2.2.4) – High-level advice and guidelines for writing sane, manageable, scalable CSS. CSS. Learning CSS. CSS3 Please! The Cross-Browser CSS3 Rule Generator.