CSS3 Tutorial

Cascading Style Sheets 3 (CSS3) improves upon earlier versions. The definitive guide to CSS3 is at the www.w3.org. So, what's new?

CSS3

What's new in CSS3?

Styling with New Pseudoclasses

Here are a few of the new selectors in CSS3:

A useful selector is "nth-child()" which can take arguments of "even" or "odd".

table.zebraBlueAndGreen tr:nth-child(even) {background-color: #ccf;}
table.zebraBlueAndGreen tr:nth-child(odd)  {background-color: #cfc;}
Pattern Meaning
E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes
E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes
E:last-child an E element, last child of its parent Structural pseudo-classes
E:first-of-type an E element, first sibling of its type Structural pseudo-classes
E:last-of-type an E element, last sibling of its type Structural pseudo-classes
E:only-child an E element, only child of its parent Structural pseudo-classes
E:only-of-type an E element, only sibling of its type Structural pseudo-classes
E:empty an E element that has no children (including text nodes) Structural pseudo-classes
E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes

"nth-child()" with a formula

"nth-child()" can also take arguments of the form "an+b" where "a" is a mulitplier, "n" is the counter, and "b" is an offset. So, "nth-child(2n+2)" would effect every other row starting with the second row.

To understand which rows are effected, put integers in for "n" and start with 0. So a "3n+1" formula would start with row 1, since "3*0+1" is 1. It would then effect row 4, since "3*4+1" is 4.

table.tricolor tr:nth-child(3n+1)  {background-color: red;}
table.tricolor tr:nth-child(3n+2)  {background-color: white;}
table.tricolor tr:nth-child(3n)    {background-color: LightSkyBlue;}
Program Percentage of US Spending (2011)
Defense 20
Social Security 20
Medicare, Medicaid, and CHIP 21
Safety Net Programs 13
Interest on Debt 6
Benerfits for Federal Retirees and Veterans 7
Transportation Infrastructure 3
Education 2
Science and Medical Research 2
Other 6
Total 100

Data Source

Selecting the rows has this formula. "n" starts at zero and then increments. The first row of the table is row 1 (it is not zero based).

But the above example only works because we did not use <thead> or <tbody> in the table (like we should) and did not use "th". A better solution is to use "nth-type-of". This allows global styling of header rows

table.tricolorPlus tr:nth-of-type(3n+1)  {background-color: red;}
table.tricolorPlus tr:nth-of-type(3n+2)  {background-color: white;}
table.tricolorPlus tr:nth-of-type(3n)    {background-color: LightSkyBlue;}
table.tricolorPlus tr:nth-last-child(1)  {background-color: green;}
Program Percentage of US Spending (2011)
Defense 20
Social Security 20
Medicare, Medicaid, and CHIP 21
Safety Net Programs 13
Interest on Debt 6
Benerfits for Federal Retirees and Veterans 7
Transportation Infrastructure 3
Education 2
Science and Medical Research 2
Other 6
Total 100

Rounded Corners

Now any element can have rounded corners by adding:

.round5 {
  -webkit-border-radius: 5px; /* only needed for older webkits */
  -moz-border-radius: 5px; 
  border-radius: 5px; 
}

Media Queries

Media queries are a big deal in the responsive web world. You can adjust your CSS based on the screen width, height, resolution, aspect ratio and many other properties. Here's an example of setting the padding on an 'h1' tag to be tiny for mobile phones.

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    h1 { padding: 2px; }
}

You can also selective import css files based on the type of media

<link rel="stylesheet" href="myPrint.css" media="print">

Or for a screen width:

<link rel="stylesheet" media="(max-width: 800px)" href="800.css" />