Lunch & Learn: CSS

Dan & I did another Lunch & Learn Session a couple of weeks ago to introduce CSS to the rest of the Push team. Here are some excerpts from our outline:

What is CSS?

CSS stands for Cascading Style Sheets. CSS is what styles HTML to change it from it’s outline form to the finished website look and feel. Through HTML the style can be edited separate from the content. For example:

CSS can style HTML in 3 ways:

  1. Inline: in the HTML itself. This is how table based websites were styled and HTML emails are still made. This violates the separation of style and content and ruins clean HTML markup. When working in browser developer tools changing the CSS inserts it inline because it overrides all other styles.
  2. In the Head: You can put CSS in the Head of an HTML document. This is not recommended for a live website, because it means that you have to include CSS in the head of every page. It is sometimes easier to put CSS in the head when you are learning so you don’t have to switch back and forth between files.
  3. Linked Stylesheet: The recommended way to use CSS. The CSS is in an external file (or multiple files) that is linked in the Head of the HTML document. This keeps CSS separate from markup in its own file. This allows the developer to update the whole site’s styles from 1 file. It has the additional advantage of styling dynamic CMS driven websites consistantly because it doesn’t depend on adding inline styles to each new piece of content.

The Cascade

The Cascade is the order in which the browser applies CSS properties.

  1. When 2 or more styles within a stylesheet compete for the same property, the latest style wins, overriding all styles before it.
  2. All styles in a stylesheet are overidden by styles in the head of an HTML document. All styles in either a stylesheet or head are overriden by inline styles. This can quickly become confusing, so it is best just to place styles in a separate stylesheet.

Specificity

CSS is applied from less specific to more specific. Specificity can be found using classes and IDs or place in the document. For example: you could style all paragraphs to have gray text and then override that by making all paragraphs with the class of green colored green. You could also have all of the paragraphs styled to use Georgia, but then tell any paragraphs that lie within an article element to use Verdana. In this way you can override general styles by getting specific about the exceptions.

CSS3

CSS3 is a major step forward in the industry but it is not supported by older browsers and it is continually being tweaked as its implementation matures in modern browsers. The prevailing opinion among web professionals right now about whether or not a website needs to look the same in every browser is this:

Trying to make the website look exactly the same in every browser tends to add lots of additional markup and CSS that needs upkeep over time. It typically involves cutting images for every element with rounded corners, gradients, transparency, etc. that cannot be easily updated. It also makes it difficult to use modern technologies that work better, faster and more reliably than hacky workarounds.

It is easier than ever before to demonstrate that websites don’t need to be the same in every browser. People expect websites to look different on their smartphone than their desktop machine, or different on their home machine than their work machine. As you design a website think about what elements might be acceptable to “downgrade” for outdated browsers (Internet Explorer 6–8), while still maintaining the integrity of the overall brand and design.

Resources

CSS CSS3 Presentation Web Design Workshop