Cascading Style Sheets (CSS) Basics

The three basic types of style sheets

External (linked)
Stored in a separate text file on the server; the most common and useful type of CSS
Internal (embedded)
Stored in a <style> section, within the <head> section of an HTML document
Local (inline)
Placed next to the text they affect, within the <body> of an HTML document

CSS syntax for external and internal style sheets

a CSS rule
  declaration block  
  declaration   declaration  
selector open
brace		 property colon value
 semi-
colon		 property colon value
 semi-
colon		 close
brace
body { background-color : white ; color : black ; }

Sample code for a CSS rule
(all are equal and correct)
body { background-color: white; color: black }
body { background-color: white; color: black; }
body{background-color:white;color:black}
body {
background-color: white;
color: black;
}
body
{
background-color: white;
color: black;
}

In CSS syntax, colons separate properties from their values. Semicolons separate declarations (proerty/value pairs) from each other; a semicolon after the last declaration is optional. Spaces are generally not significant. But there can be no space between a number and unit of measurement (as shown in the example below, there is no space in "10px", which means 10 pixels).

External (linked) CSS

An external stylesheet is a simple text file, named with a .css extension ("style.css", for example). The style sheet is made up of one or more CSS rules:

External style sheet example
(this style sheet has 3 CSS rules)

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: white;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

h1 {
font-family: Times, "Times New Roman", serif;
font-size: 24px;
font-weight: bold;
color: #006699;
text-align: left;
margin-top: 5px;
}

In the <head> section of your HTML document, place the link (either a relative path or a URL) to the external style sheet:

<link> tag example
(using a relative path to the external style sheet)

<head>

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

</head>


<link> tag example
(using the URL of the external style sheet)

<head>

<link rel="stylesheet" href="http://www.duh.com/css/styles.css" type="text/css">

</head>

The above <link> tag examples are written for XHTML. Note that if you are using an HTML standard, you will need to remove the space and slash at the end of the <link> tag.

Internal (embedded) CSS

The internal style sheet looks just like an external style sheet, but it is instead enclosed withing a <style> section, within the <head> section of your HTML document.

Internal style sheet example
(this one has 3 CSS rules)

<head>

<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: white;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

h1 {
font-family: Times, "Times New Roman", serif;
font-size: 24px;
font-weight: bold;
color: #006699;
text-align: left;
}

</style>

</head>

CSS syntax for local style

open
angle
bracket		 selector
(an
HTML
tag)		 space style
attribute		 equals open
quote		 property colon value
 semi-
colon		 close
quote		 close
angle
bracket
< p style = " color : red ; " >

In the <body> section of your HTML document, right next to the text you wish to affect, place the local style:

Example of a local style applied to a <p> element
<p style="color: red;">
This is some text...
</p>

In local CSS syntax there must be a space after the selector (in the above example, between p and style). Any other spaces are generally not significant. But, as with external and internal style sheets, there can be no space between a number and unit of measurement.

CSS validation

If your page uses any external, internal, or local CSS, you should make sure your CSS validates (even though the HTML Validator may say your page has no HTML errors, your page may still contain CSS errors). See the CSS section of How to use the W3C HTML and CSS validators for details.

Class selectors

If you assign a style to a <p> element in an external or internal style sheet, then that style will apply to all instances of <p> in your Web page. But what if you want to apply a style to only some paragraphs? This is one reason to use a CSS "class".

To define a class, you make up a descriptive name for the class, put a period in front of it, and use it as you would use any selector in your style sheet. In the example style sheet below, we create a class called "warning". In a style sheet, a dot in front of a selector indicates that the selector is a class.

Example of defining a class in a style sheet

.warning {
font-size: 16px;
font-weight: bold;
color: red;
background-color: yellow;
}

Now in the HTML of your Web page, you can use this class. In this example, we attach the class to a <p> element:

Example of using a class in the HTML code

<p class="warning">
Do not eat the orange mushrooms!
</p>

Note that you do not add the dot in the HTML.

ID selectors

A CSS "ID" is very similar to a class, but has one important difference. While you may use the same class many times in a given Web page, you may only use the same ID once in a Web page; the ID must be unique in a given Web page. (The same ID can be used in many different Web pages, but may not be repeated in the same Web page.)

To define an ID, you make up a descriptive name for the ID, put a # in front of it, and use it as you would use any selector in your style sheet. In the example style sheet below, we create an ID called "navbar". In a style sheet, a # in front of a selector indicates that the selector is an ID.

For example, if you have a navigation bar that is only used once in a Web page, you can define it as an ID:

Example of defining an ID in a style sheet

#navbar {
font-size: 12px;
font-weight: bold;
}

Now in the HTML of your Web page, you can use this ID. In this example, we attach the ID to a <ul> element:

Example of using an ID in the HTML code

<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="who.html">Who we are</a></li>
<li><a href="what.html">What we do</a></li>
</ul>

Note that you do not add the # in the HTML.

Pseudo-class selectors

Pseudo-classes are special classes that describe styles for elements that only apply under certain conditions. Here we will look at four anchor pseudo-classes:

a:link
Describes a link that has not yet been visited (clicked on) by the user's browser.
a:visited
Describes a link that has been recently visited by the user's browser.
a:hover
Describes a link while the user's mouse is hovering over it. The hover pseudo-class does not work in Netscape 4, but gracefully degrades (in other words, in Netscape 4 nothing will happen when the mouse passes over a link.)
a:active
Describes a link that has been clicked but not yet released. The active pseudo-class does not work in Netscape 4, but gracefully degrades (in other words, in Netscape 4 nothing will happen as the mouse is clicks on a link.)

Note that the "link," "visited," and "active" pseudo-classes essentially work like the "link," "vlink," and "alink" attributes of the <body> tag. There is no HTML equivalent of the hover pseudo-class.

Example of defining pseudo-classes in a style sheet

a:link {
color: blue;
}

a:visited {
color: purple;
}

a:hover {
color: black;
background-color: yellow;
}

a:active {
color: red;
}

The order of the rules in the above style sheet is very significant. For these pseudo-classes to work properly, they must be appear in this order in a style sheet.

Move your cursor over the link in this sentence to see a demonstration of the hover pseudo-class above.

To use these pseudo-classes you do not need to do anything special in the Web page's HTML code. Just code your links as you normally would, and these pseudo-classes will apply to all links in the Web page.

Block level and inline elements

Most HTML elements can be classified as either "block level" or "inline" elements. In general, a block level element forces a new line to begin. For example, if you use a block level element such as <p>, <table>, <h1>, <ul>, <li>, etc. in your HTML a new line will start (without using a <br>). If you use an inline element such <strong>, <em>, <font>, <img>, etc. a new line will not begin (unless, of course, you also throw in something like a <br> or <p>).

Although the rules governing this can be a bit tricky, generally you can nest inline elements inside other inline elements, and you can nest inline elements inside block level elements. You can nest some block level elements inside some other block level elements, but you can never nest a block level element inside an inline element. If this is confusing, don't worry about it right now; I just needed to talk about this to introduce <div> and <span>.

<div> and <span>

<div> and <span> give us a way to use CSS classes without being tied to a particular HTML element.

<div> is called a generic block level element, and <span> is called a generic inline element. They basically don't do anything by themselves.

For example, if you were to code like this:
He said <span>"Do not eat the orange mushrooms!"</span> and smiled.
It would not have any effect on your Web page.

If you were to code like this:
He said <div>"Do not eat the orange mushrooms!"</div> and smiled.
It would have a small effect on your Web page; the <div> would simply break the line, because it is a block level element.

So why do we care about <div> and <span>? Because these elements are usually used with classes.

For example, if your style sheet contained the .warning class as defined in the above setion on selectors, and if your HTML looked like this
<p>He said <span class="warning">"Do not eat the orange mushrooms!"</span> and smiled.<p>
 It would look like this:

He said "Do not eat the orange mushrooms!" and smiled.

And if you were to code like this:
He said <div class="warning">"Do not eat the orange mushrooms!"</div> and smiled.
It would look like this:

He said
"Do not eat the orange mushrooms!"
and smiled.

Here are some more examples:

Example of using <span> in the HTML code

There are many things to remember in life, such as
<span class="warning">
Do not eat the orange mushrooms!
</span>
and other words of wisdom.

If we wanted to apply the warning class to a block of text that included block level elements, we would have to use <div> instead of <span>:

Example of using <div> in the HTML code

There are many things to remember in life, such as
<div class="warning">
<ul>
<li>Do not eat the orange mushrooms!</li>
<li>Brush your teeth every day!</li>
<li>Get plenty of sleep!</li>
</ul>
</div>
and other words of wisdom.

In the above example we could have attached the warning class to the <ul> and achieved a similar result.