Cascading Style Sheets Tips & Tricks
CONTENTS
Specifying Styles
Selectors
Centering Tables
Three-column Layout

Specifying Styles

Three common mechanisms for specifying styles:
1. Via external stylesheet
<html> <head> <title>...</title> <link rel="stylesheet" type="text/css" href="whatever"/> </head> <body> ... </body> </html>
2. Via style element embedded in the HTML file
<html> <head> <title>...</title> <style type="text/css"> p { color: blue; } h1 { color: red; } </style> </head> <body> ... </body> </html>
3. Via style attributes on elements
<html> <head> <title>...</title> </head> <body> <h1 style="color: red;">Examples</h1> <p style="color: blue;">This is a short example.</p> </body> </html>
to top

Selectors

Type Example Notes
Universal
* {
  font-family: serif;
}
Applies to everything.
Element
h1 {
  font-family: serif;
}
Applies to all h1 elements.
Multiple Element
h1, h2, h3 {
  font-family: serif;
}
Applies to all h1, h2 and h3 elements.
Descendant
div h1 {
  font-family: serif;
}
Applies to h1 elements that are descendants of a div element.
Child
div > h1 {
  font-family: serif;
}
Applies only h1 elements that are direct children of div elements. Not supported by IE.
Adjacent sibling
h1 + p {
  font-family: serif;
}
Applies to p elements which have an h1 element as the immediately preceding child of the same parent.
Arbitrary sibling
h1 ~ p {
  font-family: serif;
}
Applies to the p elements which have an h1 element as sibling. Currently, not well supported at all.
Attribute presence
input[type] {
  font-family: serif;
}
Applies to input elements which have a type attribute.
Attribute value
input[type='text'] {
  font-family: serif;
}
Applies to input elements which have an attribute type='text'.
Attribute value prefix
a[href^='ftp'] {
  font-family: serif;
}
Applies to a elements whose href attribute starts with 'ftp'.
Attribute value suffix
a[href$='html'] {
  font-family: serif;
}
Applies to a elements whose href attribute ends with 'html'.
Attribute value match
a[href*='wawa'] {
  font-family: serif;
}
Applies to a elements whose href attribute contains the substring 'wawa'.
Class
.heading {
  font-family: serif;
}
Applies to elements which contain an attribute class='heading'.
Class Union
.heading {
  font-family: serif;
}
.major {
  font-weight: bold;
}
Each style applies inidividually to elements with class='heading' or class='major', but both styles apply to elements with class='heading major'.
Class Intersection
.heading.major {
  font-family: serif;
}
Applies only to elements having class='heading major'.
Element and Class
div.major {
  font-family: serif;
}
Applies to div elements that include class='major'.
Id
#namelabel {
  font-family: serif;
}
Applies to the one and only element which has the attribute id='namelabel'.
Element and Id
p#namelabel {
  font-family: serif;
}
Applies to the one and only p element which has id='namelabel'.
First letter
p::first-letter {
  font-size: 20px;
}
Applies to first letter of text in all p elements.
First line
p::first-line {
  letter-spacing: 2px;
}
Applies to first line of text in all p elements.
Selection
::selection {
  color: red;
}
Applies to the selected text.
Before
h1::before {
  content: '*** ';
}
Adds text before an element.
After
h1::after {
  content: ' ***';
}
Adds text after an element.
Unvisited Link
a:link {
  color: black;
}
Applies to unvisited hyperlinks.
Visited Link
a:visited {
  color: black;
}
Applies to visited hyperlinks.
Hover
:hover {
  color: black;
}
Applies to the element at which the mouse is pointing.
Active
:active {
  color: black;
}
Applies to the element on which the user is clicking.
Focus
:focus {
  color: black;
}
Applies to the element which has the focus.
Root
:root {
  font-size: 10px;
}
Applies to the root element (normally 'html').
First child
div > p:first-child {
  color: black;
}
Applies to each p element which is the first child of a div.
Last child
div > p:last-child {
  color: black;
}
Applies to each p element which is the last child of a div.
Empty
div:empty {
  color: black;
}
Applies to every empty div element (without even whitespace).
Not
h1:not(#top) {
  color: black;
}
Applies to all h1's which don't have id='top'.
Target
:target {
  background-color: green;
}
Something to do with anchors and internal links.
to top

Centering Tables

To center a table, you make the left and right margins equals, like this:
<html> <head> <style type="text/css"> div { width: 800px; background-color: pink; } table { margin-left: auto; margin-right: auto; } </style> </head> <body> <div> <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </div> </body> </html>
Pretty &%$@#%!*% obscure, eh?
to top

Three-column Layout

As described by Matthew Levine:
<html> <head> <style type='text/css'> body { min-width: 550px; /* 2x LC width + RC width */ } #container { padding-left: 200px; /* LC width */ padding-right: 150px; /* RC width */ } #container .column { position: relative; float: left; } #header { background-color: #faa; } #center { width: 100%; background-color: #afa; } #left { width: 200px; /* LC width */ right: 200px; /* LC width */ margin-left: -100%; background-color: #ffa; } #right { width: 150px; /* RC width */ margin-right: -150px; /* RC width */ background-color: #aaf; } #footer { clear: both; background-color: #aff; } /*** IE6 Fix ***/ * html #left { left: 150px; /* RC width */ } /* the following make the columns appear equal height */ #container { overflow: hidden; } #container .column { padding-bottom: 20010px; /* X + padding-bottom */ margin-bottom: -20000px; /* X */ } #footer { position: relative; } </style> </head> <body> <div id="header">HEADER<br/>HEADER</div> <div id="container"> <div id="center" class="column">CENTER<br/>CENTER<br/>CENTER<br/>CENTER<br/>CENTER</div> <div id="left" class="column">LEFT<br/>LEFT</div> <div id="right" class="column">RIGHT</div> </div> <div id="footer">FOOTER<br/>FOOTER<br/>FOOTER</div> </body> </html>
to top