CSS Basics

CSS stands for Cascading Style Sheets and are one of the 3 main components of a modern web page (HTML and JavaScript being the others). CSS is used to specify colors, positions, fonts, and other visual design of a web page.

Including CSS

CSS can be included in HTML in 3 different ways:

Inside a tag:

<div style="color: red; font-size: 100px">Big Red</div>

In the HTML, typically in the "head" separate from in a tag:

<style>
div {
	color: red; 
	font-size: 100px
}
</style>

Or in a separate document and linked to in the head with the following tag:

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

Style Definitions

Styles can apply to entire tags such as all "div" tags:

<style>
div {
	color: red; 
	font-size: 100px
}
</style>

<div>Hi</div>

or only to tags with a specific "class":

<style>
.bigred {
	color: red; 
	font-size: 100px
}
</style>

<div class="bigred">Hi</div>

or to only a tag with a specific ID:

<style>
#bigred {
	color: red; 
	font-size: 100px
}
</style>

<div id="bigred">Hi</div>

Working with type

CSS has a rich support for type or text formatting. Here are a few of the capabilities:

font-family: Times, serif; - Web Safe Fonts

font-size: 20px;

font-weight: bold;

font-style: italic;

Positioning

Elements can be positioned in a number of ways in CSS.

Relative positioning moves the relative to where it would normally be:

position: relative; top: 25px; left: 25px;

Absolute positioning moves the element to a specific position relative to it's container:

position: absolute; top 10px; left: 10px;

Grid Layouts

A class of CSS layouts has appeared called grids. These are starting points for grid based layouts and easier to use that building from scratch. One of the most well known is the 960 Grid which is a 960 pixel wide grid based layout.

To use it, you download and included it on your page:

<link rel="stylesheet" type="text/css" href="960_12_col.css" />

The above version is the 12 column version.

You specify in your block elements how many columns they should occupy in any given row:

<div class="container_12 clearfix">
	<div class="grid_12">All 12 Columns</div>			
	<div class="grid_4">4 Columns</div>		
	<div class="grid_3">3 Columns</div>			
</div>

All 12 Columns

4 Columns

3 Columns

More Information

HTML & CSS by Jon Duckett is a fantastic book that takes you through a lot of how to work with HTML and CSS to make sites look the way you want. I highly recommend it.