More web design fundamental goodness from the Treehouse videos.

CSS stands for Cascading Style Sheets. CSS is a separate language from HTML that allows you to override boring default web browser styles and make web pages look any way you want them to.

CSS describes the presentation of a web page, not the structure/content (HTML does that).

Separating structure and presentation makes changes to an entire site easy. It also increases accessibility, flexibility and reduces complexity, of websites.

CSS is typically placed in a separate file with a .css extension.

CSS uses a priority scheme to determine which style rules apply to an element. Style rules can override one another. Style rules that come later (in page loading) can override styles that come earlier.

W3C maintains the CSS standard. Current recommended version is 2.1, but CSS 3 is in draft form and is being adopted by web browsers quickly.

Including CSS: it’s best not to mix presentation and structure. Even though you can include CSS in HTML (inline), it’s better to do it through an included stylesheet file. This provides maximum accessibility, flexibility and simplicity.

An example style rule:

p {
color: red;
}

p = selector
color = property
red = value

Basic Selectors

type selector matches every instance of the element type specified

descendent selector matches elements nested inside other elements. HTML is structured like a tree, start at a large branch, work your way down.

ID selector matches a single element by it’s ID attribute

class selector matches a subset of elements based on their class attributes

IDs should be used for major site components that will only appear once on a page. Classes can be used many times, is good for multiple elements you want to apply the same styling to.

Other Selectors

pseudo class matches an element only when it’s in a specific state

• :first-child selects the first child in an element
• :link matches an anchor tag if it’s not yet been visited
• :hover selects elements being hovered by the user
• :active selects link being clicked by the user
• :focus good for improving accessibility for people who use keyboards to navigate webpages

child selector matches child elements of the specified parent element. example: ul > li
adjacent selector matches elements immediately preceded by a specified sibling element. example: h2 + p
attribute selectormatches element attributes based on attribute name and value. example: h2[class="foo"] (h2[class~="foo"] will match all h2s with class “foo”, even if more classes are listed. In other words: class="foo bar" and class="foo" will both be styled.