CSS (Cascading Style Sheets)

CSS is the backbone of structuring and styling web pages. CSS relies heavily on knowing the CSS properties and good structure. Proper HTML structure lends itself to well written CSS. Properly structured CSS leads to smaller, cleaner and easier to maintain CSS. Most importantly, CSS is about specificity.

Always check your CSS for errors, and for cross browser compliance.

Understand CSS Syntax:

!important things to know about CSS:

• reads from top to bottom, but right to left
• loads one style sheet at a time (not in parallel)
• a rule that is more specific will be honored over one that loaded later
• Selectors are case sensitive, and must start with a letter, dash or underscore
• # = ID . = Class
• the last declaration in a CSS rule does not need a semicolon after it
• Failure to close a “}” will break the rest of the style sheet
• an ID is more specific than a Class
• separate structure from styles, and load structure first
• Use CSS2 for structure and CSS3 for style
• do not use structure selectors as style selectors (h1, h2, h3, strong)
• using id’s is not efficient by it’s nature, but it happens
• .One.Two (no space) = an element with class of One and Two
• .One .Two (with a space) = an element of class Two that is a descendant of element class One
• .One > .Two = an element of class Two that is a child of element class One
• “my daughter is both my child and my descendant. my granddaughter is not my child but is my descendant”
• !important will add a level of specificity, but is generally not good to use
• Nesting an element is as specific as multiple classes on a single element, but is easier with proper HTML
• pseudo elements and hover states can be combined
• first-child, last-child and nth-child rules are more elegant than adding a second class to the HTML, and are dynamic
• various web browsers honor different properties, and require different prefixes
• various browsers support different color values (Hex, lrGB, lrGBA etc)
• various browsers / devices support different fonts. load several and expect font to change structure
• % , px and em are the most common units of CSS measurement (others: in – cm – mm – ex – pt – pc – vw – vh)