A CSS Survey: From Syntax to Rounded Corners

Jason Nakai & Emily Lewis

Wednesday, March 4, 2009

Jason Nakai

Emily Lewis

What We'll Cover

What Is CSS?

The Benefits

The Basics: Syntax

  1. selector {
  2.    property: value;
  3. }
Identifies the HTML elements the style will be applied to
Can be just the HTML element itself (h1) or a class or id
Braces ({})
Contain the property-value pair(s)
Declares what presentational effects you will apply to the selector, such as font-size, color, position
Colon (:)
Separates the property from its value

The Basics: Syntax

Declares the actual value of the property
Values for color can be declared as hexadecimal (#f000), RGB (rgb(255,0,0)) and names (red)
Values for font sizes, margins, padding, width, height can be declared as pixels, percentages, centimeters, ems and other units of measurement
Semicolon (;)
Separates multiple property-value pairs
Good rule of thumb to conclude all CSS rules with a semicolon
  1. h1 {
  2.    color: #f00;
  3.    font-size: 110%;
  4. }

The Basics: Inheritance

  1. body {
  2.    color: #f00;
  3. }

The above example uses inheritance so that all children of body will appear in red, unless overridden with more specific style declarations.

The Basics: Cascade

The Basics: Inline Styles

You can apply styles to an element using the style attribute:

<p style="color:#f00; font-size:110%">The quick brown fox jumped over the lazy dog's back.<p>

The Basics: Embedded Styles

Embedded styles are placed in the head of the document inside a style element:

  1. <style type="text/css" media="screen">
  2.    h1 {
  3.       color: #f00;
  4.       font-size: 110%;
  5.    }
  6. </style>

The Basics: External Style Sheets

External style sheets contain all your CSS rules in their own document (with a .css extension), which is referenced in HTML documents via the link element in the head:

<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />

The Basics: @import Style Sheets

You can also use @import for external style sheets, which is referenced in an embedded style sheet:

  1. <style type="text/css">
  2.    @import url("styles.css") screen;
  3. </style>

The Basics: media Types

The Basics: Referencing media Types

If all rules in an external style sheet can be applied to a given medium, the type is declared in the link:

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

If you wish to declare specific rules within an external or embedded style sheet to apply to different media, the type is declared as part of the selector:

  1. @print body {
  2.    font: 12pt Times, "Times New Roman" serif;
  3.    color: #000;
  4. }

The Basics: class Selectors

<p class="column featured">The quick brown fox jumped over the lazy dog's back.<p>

In the CSS, class selectors are the name preceded by a period (.):

  1. .column {
  2.    width: 50%;
  3.    border: 1px solid #000;
  4. }

The Basics: id Selectors

<p id="sidebar">The quick brown fox jumped over the lazy dog's back.<p>

In the CSS, id selectors are the name preceded by a hash (#):

  1. #sidebar {
  2.    width: 50%;
  3.    border: 1px solid #000;
  4. }

The (Not So) Basics: Advanced Selectors

Universal selectors
Selects every element in the document to which to apply styles
  1. * {
  2.    color: #f00;
  3. }
Attribute selectors
Select elements based on their attributes and values
  1. link[rel="home"] {
  2.    background: url(home.png) no-repeat 0 0;
  3. }

The (Not So) Basics: Advanced Selectors

Child selectors
Select elements that are children (direct descendents) of other elements
  1. div > strong {
  2.    color: #f00;
  3. }
Not supported in IE6 and earlier
Descendent selectors
Select specified elements anywhere in the hierarchy, not just children
  1. div strong {
  2.    color: #f00;
  3. }

The (Not So) Basics: Advanced Selectors

Adjacent sibling selectors
Select the sibling (same level in the hierarchy) immediately following an element
  1. h1 + h2 {
  2.    margin:0;
  3. }
Not supported in IE6 and earlier
Pseudo-element selectors
Select information that is not available in the document tree
  1. p:first-letter {
  2.    font-size:200%;
  3. }
Not supported in IE6 and earlier

The (Not So) Basics: Advanced Selectors

Select specific states of elements
  1. li:first-child {
  2.    font-style:italic;
  3. }
For link pseudo-classes, styles must be declared in the following order due to specificity rules:
  1. a:link
  2. a:visited
  3. a:hover
  4. a:focus
  5. a:active

Best Practices: Grouping Selectors

For CSS efficiency and optimization, you can group selectors. So rather than:

  1. h1 {
  2.    color:#f00;
  3. }
  4. p {
  5.    color:#f00;
  6. }

Combine both selectors with the same property-value pair, separating each selector with a comma (,):

  1. h1, p {
  2.    color:#f00;
  3. }

Best Practices: Joining Selectors

You can also join selectors for greater specificity:

  1. p#intro.alert {
  2.    color:#f00;
  3. }

Not supported in IE6 and earlier

Best Practices: Comments

  1. p {
  2.    color:#f00;
  3.    font-weight:bold;
  4.    /*margin: 1em 0;*/
  5. }

Best Practices: Organization

CSS comments are also useful for organizing your CSS, particularly large CSS files. Using commented text and some visual indicators (e.g. dashes), label each section of your CSS according to what it controls:

  1. /*---STRUCTURE/LAYOUT---*/
  2. body{background: #666 url(/images/lilyBG.png) repeat-y 100% 0;font:small Verdana, Arial, Helvetica, sans-serif;color:#666;}
  3. #content, #masthead{background:#fff url(/images/sidebarShadow.png) repeat-y 100% 0;float:left;width:58%;padding: 0 5% 0 2%;margin-left:24px;border-left:10px solid #fff;}
  4. #sidebar, #primaryNav {color:#fff;float:right;width:27%;padding:0 3% 0 0;}
  5. /*---TYPE ELEMENTS---*/
  6. abbr, acronym{cursor:help; border-bottom:1px dotted #94a8ca;}
  7. code {font-family:"Courier New", Courier, mono;background:#eee;}

Best Practices: Short-hand

CSS shorthand entails combining several related properties into one property to save time and file space:

Hexadecimal colors consisting of three pairs of digits can be reduced by removing one digit from each pair:




Box properties (margins, padding, border) can be combined if the values are the same for each of the four sides:

margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em;


margin: 1em;

Best Practices: Short-hand

Font properties can be combined:

font-style:italic; font-weight:bold; font-size: 90%; font-family: Arial, Helvetica, sans-serif;


font: italic bold 90% Arial, Helvetica sans-serif;

Background properties can be combined:

background-color:#f000;background-image: url(logo.png); background-repeat: no-repeat; background-position: 0 10%;


background: #f00 url(logo.png) no-repeat 0 10%;

The order of the property values in shorthand makes a difference. Follow the W3C specification.

Best Practices: Optimization

For large CSS files, it's a good idea to optimize the CSS so that file size is reduced leading to reduced bandwidth.

Compression tools that will even further compress/optimize your CSS in terms of file size:

Best Practices: Semantics

#secondaryNav rather than #leftColumn

Best Practices: Validation

W3C CSS Validation Service

Best Practices: Cross-Browser Development

Legacy CSS: First Steps

When inheriting existing CSS from another developer (who may or may not have followed best practices):

Legacy CSS: Editing

Legacy CSS: DustMe Selectors

DustMe Selectors is a Firefox plugin from SitePoint that helps weed out unused rules:

Legacy CSS: Firebug

Firebug is a Firefox plugin that inspects and changes CSS directly in the browser:

Legacy CSS: Condense & Organize

Using Dreamweaver With Legacy CSS: Convert Inline to Embedded

  1. Right-click inline styled elements and choose CSS Styles > Convert Inline CSS to Rule
  2. Choose what you want to convert it to & name it if applicable
  3. Recommend creating a new class unless you know that you can reuse an existing style
  4. Finally, choose Create Rule in "The head of this document"
  5. Rinse & repeat

Using Dreamweaver With Legacy CSS: Move Embedded to External

  1. Expand the CSS Panel
  2. Choose the CSS Styles tab
  3. Make sure the Select All tab is active
  4. Expand the "style" node
  5. Highlight all rules
  6. Right-click & choose Move CSS Rules…
  7. Choose a style sheet to add them to or create a new one
  8. Click OK

These steps move embedded to external, but the style element remains in the head. Clean this up.

Legacy CSS Is Tamed

Turning the Tables on tables

table Transition: table-Based & CSS Layout

table Transition: Build a Library of Templates & Containers

Fun With CSS2: Generated Content

CSS2 generated content screen shot
The Markup:

<p>Generated content is supported by <a href="http://www.getfirefox.com">Firefox</a>, <a href="http://www.apple.com/safari/download">Safari 3</a>, <a href="http://www.opera.com/">Opera</a> and <a href="http://www.google.com/chrome">Chrome</a>.</p>

The CSS:
  1. @print a:after {
  2.    content:" ("attr(href)") "}
  3. }

Generated content in action on A Blog Not Limited: see "All Tags" & "All Dates" links in sidebar. The > symbol is generated content via {content: " >";}

Fun With CSS2: Generated Content In Action

See "All Tags" & "All Dates" links in sidebar on A Blog Not Limited:

CSS2 generated content example from A Blog Not Limited

The > symbol is generated content via:

{content: " >";}

Fun With CSS2: Text Shadows

CSS2 text shadow screen shot
The Markup:

<p>Text shadow works in Safari 3 and Opera.</p>

The CSS:
  1. p {
  2.    text-shadow: 1px 1px 1px #000;
  3. }

Fun With CSS2: Text Shadow In Action

See see all headings, as well as sidebar and footer content on A Blog Not Limited:

CSS2 text shadow example from A Blog Not Limited

All have text shadows via:

{text-shadow: #999 1px 1px 2px;}

CSS3 You Can Use Now: Gradient Borders

CSS3 gradient borders screen shot
The Markup:

<div class="featured"><p>Gradient borders only work in Mozilla/Firefox.</p></div>

The CSS:
  1. .featured {
  2.    padding: 10px;
  3.    border: 8px solid #eee;
  4.    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  5.    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  6.    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  7.    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
  8. }

CSS3 You Can Use Now: Rounded Corners

CSS3 rounded corners screen shot
The Markup:

<div class="featured"><p>Rounded corners only work in Firefox, Safari and Chrome.</p></div>

The CSS:
  1. .featured {
  2.    padding: 10px
  3.    border: 1px solid #666
  4.    -moz-border-radius: 5px;
  5.    -webkit-border-radius: 5px;
  6. }

Fun With CSS2: Rounded Corners In Action

See "box" containers on PBBI Insights:

CSS3 rounded corners example from PBBI Insights

All have opposing rounded corners via:

  1. {border: 1px solid #d9e3ed;
  2. border-radius: 1em 0;
  3. -moz-border-radius-topleft: 1em;
  4. -moz-border-radius-bottomright: 1em;
  5. -webkit-border-top-left-radius: 1em;
  6. -webkit-border-bottom-right-radius: 1em;}

CSS3 You Can Use Now: Opacity via RBGa

CSS3 RBGa opacity screen shot
The Markup:

<div class="featured"><p>RGBa is only supported by Firefox, Safari and Chrome.</p></div>

The CSS:
  1. .featured {
  2.    padding: 10px
  3.    border: 2px solid rgb(0,0,255);
  4.    background-color: rgba(0, 0, 255, 0.4);
  5. }

For similar visual results (but more CSS), the opacity property is supported by Firefox, Safari, Chrome and Opera

CSS3 You Can Use Now: Opacity In Action

See 24 Ways:

CSS3 RGBa opacity example from 24 Ways

Tons of opacity via RGBa. Too many to list … just view the CSS source.

CSS3 You Can Use Now: Mimic Double Borders with outline-offset

CSS3 outline-offset screen shot
The Markup:

<div class="featured"><p>Outline offset is supported by Firefox, Safari and Chrome.</p></div>

The CSS:
  1. .featured {
  2.    padding: 10px
  3.    border: 2px solid #333;
  4.    outline: 2px solid #666;
  5.    outline-offset: 3px;
  6. }

Even More CSS3 You Can Use Now

Must-Read Resources

Must-Read Resources

Thank You!

Questions, comments?