CSS

CSS stands for Cascading Stylesheets. CSS to "styles" HTML. It lets you add color, change fonts, use backgrounds. CSS is separate from HTML but they work together.

Example

Here is some plain HTML.

<h1>My Todo List</h1>
<p>Things I have to do before I launch my website.</p>
<ul>
	<li>Write my content</li>
	<li>Design my web page</li>
	<li>Code my web page</li>
</ul>

This is how it renders without any CSS.

Css Html

This is how it renders with some simple CSS.

Css Simple

div.simple { background: #fff; width: 200px; padding: 10px 10px 15px 15px; font: 12px/17px Helvetica, sans-serif; color: #444; }
div.simple h1 { margin: 0 0 5px 0; font: bold 16px/22px Helvetica, sans-serif; color: #7ca81e; }
div.simple p { margin: 0 0 5px 0; font-weight: bold;}
div.simple ul { padding: 0 0 0 20px; margin: 0;}
div.simple li { list-style-image: url(images/arrow.gif); }

This is how it renders with more complex CSS.

Css Complex

div.complex { background: #ba9062 url(images/pad.png) no-repeat; width: 215px; height: 340px; padding: 60px; font: 18px/24px "Marker Felt", sans-serif; color: #444; }
div.complex h1 { height: 0; background: url(images/ttl_my_todo_list.png) no-repeat; overflow: hidden; padding: 53px 0 0 0; margin: 10px 0 10px 0; line-height: 120px;}
div.complex p { margin: 0; font-size: 20px;}
div.complex ul { padding: 0; margin: 10px 0;}
div.complex li { list-style: none; background: url(images/check.png) no-repeat; padding: 0 0 0 25px;}

Actual HTML & CSS page.

Structure

CSS has rules just like HTML. Often you'll see it formatted different ways, but the rules are consistent.

CSS formatted as a stack:

p {
	font-family: Helvetica;
	font-size: 12px;
	color: blue;
}

CSS formatted in one line:

p { font-family: Helvetica; font-size: 12px; color: blue; }

The only difference is that there are line-breaks and tabs in the first example instead of spaces in the second example. White space is ignored, but puctuation is important!

We'll write it in one line from here on out so that we save room.

This CSS says that the contents of an HTML p (paragraph) tag should be in Helvetica, at 12px, and colored blue.

p { font-family: Helvetica; font-size: 12px; color: blue; }

p is the selector. It defines what is being styled:

p { font-family: Helvetica; font-size: 12px; color: blue; }

These are properties. They're always in curly braces, and precede the colon. No spaces!

p { font-family: Helvetica; font-size: 12px; color: blue; }

These are values. They're always in curly braces, and follow the colon.

p { font-family: Helvetica; font-size: 12px; color: blue; }

There are a lot of properties and selectors. Use the cheatsheet or read about them online.

Where does it go?

CSS can exist in 3 different places. For it to work, you need to tell your HTML page where to find it.

External CSS

This is often the best option. This let's you use the same CSS for an entire site. If you change it in one document, it will make the change for all the pages that link to it. It goes in the head.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title goes here</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>
	<body>
	</body>
</html>

It can also be internal to the HTML page placed in the head portion.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title goes here</title>
		<style type="text/css">
			p { font-family: Helvetica; font-size: 12px; color: blue; }
		</style>
	</head>
	<body>
	</body>
</html>

Lastly it can be written "in-line" within a specific tag in HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title goes here</title>
	</head>
	<body>
		<p style="font-family: Helvetica; font-size: 12px; color: blue;">This text should be blue!</p>
	</body>
</html>

Notice that when it's in-line, you don't use the curly braces.

Precedence

You can have CSS in all three places. If there's a conflict, it will style the element using the properties in this order (first taking precedence over later ones):

in-line styles
internal styles
external styles

Selectors & Cascading

Selectors are what you use to determine which styles apply to which HTML elements. There are a few ways to do this.

html tag
html tag with id name
html tag with class name
cascading

CSS w/ HTML tags

You can specify the style for each tag.

<p>This content will display in Helvetica.</p>

p { font-family: Helvetica; }

CSS w/ IDs

You can specify what one particular tag looks like with the id attribute in HTML. Because there is only one ID per element and you can't duplicate IDs in a page, this only works for one HTML element per page. IDs can't start with a number.

<p id="intro">This content will display in Georgia.</p>

p#intro { font-family: Georgia; }

Notice that the style sheet is saying p tags with the id intro should use the font Georgia. The pound character "#", stand for id. Classes can't start with a number.

CSS w/ Classes

You can apply the same style to multiple items by using the class attribute in HTML. Multiple elements can use the same class.

<p class="fancy">This content will display in Georgia.</p>

p.fancy { font-family: Georgia;}

Notice that the style sheet is saying p tags with the class fancy should use the font Georgia. The dot character ".", stands for class.

Cascading

A powerful feature of CSS is the ability to select elements based on what part of the HTML document it lives in.

In this example, paragraphs within the div "fancy" look different than paragraphs within the div "plain".

<p>This content will display in Times.</p>

<div>
	<p>This content will display in Courier.</p>
</div>

<div class="fancy">
	<p>This is some fancy content and will display in Georgia.</p>
</div>

<div class="plain">
	<p>This is some plain content and will display in Helvetica.</p>
</div>

p { font-family: Times; }
div p { font-family: Courier; }
div.fancy p { font-family: Georgia;}
div.plain p { font-family: Helvetica;}

Notice how the p tag's style depends on it's context. If p is alone, it's in Times. If p is in a div, it's Courier. If p is in a div with the class "fancy" it's Georgia. And lastly, if p is in a div called "plain", it's in Helvetica.

The benefit of this method, is that you are able to move content around, and it's style will respond to where it is on the page. All you need to do is change one aspect and changes will cascade down.

Overriding with in-line styles.

Because in-line styles have precedence over other declarations, you can use in-line styles to override other styles.

< div class="plain" style="font-family: Arial">
	<p>This is some plain content whose style is overridden to display in Arial.</p>
</div>

Important Styles

What an you style with style sheets? Here's a list of the most important styles.

CSS Property	Includes	Description/Notes
`font`	font-style, font-weight, font-size, line-height, font-family, can use shorthand font	For font-family, specify fonts in descending order of preference, using quotes for font names with spaces: "Helvetica Neue", Helvetica, Arial, sans-serif
`color`	color	Specifies the color of a font. Mostle people use RGB hex values: #ffcc00, use application's color-picker to find values.
`height` `width`	height, width	The width and height of an element. Only works for "block" elements. Width and height excludes dimensions of padding, border, and margin.
`background`	background-color, background-image, background-repeat, background-position, can use shorthand background	Use for adding color, or imagery behind an object. Great for bars of color or rounded corners.
`border`	border-top, border-right, border-bottom, border-left, border (for all sides)	Easiest to use shorthand for border
`padding`	padding-top, padding-right, padding-bottom, padding-left, padding (for all sides)	Padding is the space between an element and it's border.
`margin`	margin-top, margin-right, margin-bottom, margin-left, margin (for all sides)	Margin is the space between an element's border and other elements.
`display`	display	Used to change whether an element is rendered as inline, block, or other style.

Shorthand

Some CSS properties can be written in shorthand:

p {
	font-style: bold;
	font-size: 12px;
	line-height: 16px;
	font-family: Helvetica, "Helvetica Neue", sans-serif;
}

Can become:

p {
	font: bold 12px/16px Helvetica, "Helvetica Neue", sans-serif;
}

Note that the order of values must be in the right order.

The other important properties that can be written in shorthand are background, margin, padding, and border.

Look at the cheat sheet for more details on properties and values:

Colors

Colors in CSS are specified a few ways. The most common is in the form #rrggbb, where rr, gg, bb are hexadecimal values for red, green, and blue.

The hexadecimal number represents a value from 0-255 and is written with the digits 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f in upper or lower case.

The easiest way to find a color value is by using the color selector in Photoshop or Illustrator.

There are some named colors too, that you can used for convenience.

CSS1 Named Colors
white (#ffffff)
silver (#c0c0c0)
gray (#808080)
black (#000000)
red (#ff0000)
fuchsia (#ff00ff)
purple (#800080)
maroon (#800000)
yellow (#ffff00)
lime (#00ff00)
green (#008000)
olive (#808000)
aqua (#00ffff)
teal (#008080)
blue (#0000ff)
navy (#000080)

Note that the need for web-safe colors are not necessary any more.

Here's some example of colors. The first is yellow. The second is black.

h1 { color: #ffcc00; }
h2 { color: black; }

Measurements

There are a few options when measuring items on a webpage.

Pixels

Pixels are the most designer friendly and display accurate. Remember that you need to add "px" to the end of a number like so: 12px. For the value 0, the "px" is optional.

The other options include percentages 50% and em's .5em. Centimeters, Points, Picas, and Inches should be avoided because different computers have different screen resolutions so those sizes are not accurate.

The box model

The box model in CSS represents how you measure block elements in CSS. It's not what most people would expect. Inline elements' size is determined by the content itself.

There are four properties that determine the size of a block element.

width & height (of content)
padding (including: padding-top, padding-right, padding-bottom, padding-left)
border (including: border-top, border-right, border-bottom, border-left)
margin (including: margin-top, margin-right, margin-bottom, margin-left)

Box Model

Note that the padding will include the background, here in pink. The margin will be transparent, here in light blue.

If you use IE and don't have standards compliance enabled, the box model will be different. You can set standards compliant mode by using a !DOCTYPE as shown above.

Encoding

Sometimes you need to set the encoding of your css, specially if you use the :after psuedo-class. These rules are for use in linked style sheets. Only one @charset rule may appear in an external style sheet and it must appear at the very start of the document. It must not be preceded by any characters, not even comments.

@charset "utf-8";