CSS - The Basics

What is CSS

stands for Cascading Style Sheets

Used to control the presentation of the website

Why do we use CSS

By linking the style sheets in externally, it allows us to:

How to use CSS

link in an external file as such 

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

The href attribute should point to a CSS file. The rel tells the browsers what type of link it is, and the type define the type of file, so it knows how to download it. They are not redundant, because there are also alternative stylesheets so pages can swap style sheets dyanamically. You can even define the media, so you can use different style sheets for on-line, print, handheld devices, etc.

Redefining Tags

Inside the CSS file, you can redefine tags, so the default values aren't used. For example if you want to change the h1 tag you could write:

h1 {
 	font-size: 18px;
 	font-weight: bold;
	color: #333333;
}

The indent is optional, but I use it to make it easier to read.

Here we change the font size, and weight (bold, bolder, or normal for the most part), as well as the (forground) color. There are dozens of properties that can be changed to make an existing tag look entirely different, inlcuding the font-family, border, and background-color. 

pre {
	 font-size: 14px;
	 font-family: "Courier New", Courier, monospace;
	 color: #333333;
	 background-color: #CCCCCC;
	 padding: 10px;
}

In both cases you can see the tag name, then braces ({ }). Inside the braces, each property is listed, then a colon to seperate the property from the value, then after each name/value pair a semi-colon. Indentation, and moving to a new line is done for readablity, not for any other reason.

When you use CSS on a non-visible tag, you will use it on a div (for block level control) and span (for in-line control).

Using IDs

Ids, start with a # symbol in CSS file, but doesn't in the html file.

#header { ... set style ...}
<div id="header">... say something ...</div>

Ids should only be used once in an HTML file. They are often, but not always, used to define the look of the web page, including headers, footers, and navigation and content sections.

Using a Class

A class can be used over and over again inside the same HTML file. In the CSS file, it will start with a "." (period). 

.required { color: #ff0000; font-style: italic; }

The period is not listed in the HTML file.

<span class="required">first name</span>

Some links to help you out: