CSS Basics
To be able to create great layouts we need to have an understanding of some basic CSS. These free lessons cover some things you will use in the rest of the course.
-
CSS Selectors
The selectors in the CSS Level 3 Selectors specification are powerful and well supported by browsers. In order to truly master CSS layout we need to have a good understanding of how to select parts of our document.
-
Basic Selectors
In this lesson we take a look at some of the simple, basic selectors in CSS - element, ID and Class selectors.
-
Combinators
Combinators combine selectors in different ways to select elements based on their position in the document.
-
Attribute Selectors
Attribute selectors select elements in the document based on their attributes. Learn how to precisely match attributes and values in CSS.
-
Pseudo-class Selectors
A pseudo-class selector acts as if you have added a class to an element in your markup.
-
Pseudo-element Selectors
A pseudo-element acts as if a whole new element was inserted into our document, then CSS applied.
-
Selectors Usage Tips
Thoughts on browser support, and the future of CSS Selectors. Also, when should you choose a more complex selector over adding a class to your document?
-
-
Length Units
Understand length units in CSS. Relative units such as
emandrem, the viewport unitsvh,vw,vminandvmax, and absolute units such aspxandpt. Which should you use, and why?-
Absolute Units
A representation of actual measurement in the physical world. The units
px,mm,cm,in,ptandpc. -
Relative Units
These units don’t have fixed values but instead are relative to something else. The units described as relative units are
em,ex,chandrem. I’m also including%here. -
Viewport Percentage Units
These are also relative units, but these newer additions to the specification define length relative to the size of the viewport making them very useful for responsive design. These units are
vh,vw,vminandvmax.
-