Cascading Style Sheets 3.0 Tutorial

CSS can turn a drab, boring website into an exciting and dynamic one. A basic understanding of HTML is a prerequisite.

Adding Style

The first approach to adding style is inline with the style attribute of the HTML element. The following code modifies the text color of a paragraph: <p style="color: red;">This paragraph is red.</p>

This paragraph is red.

The second approach is to embed a style sheet using a <style> element, which goes in the document's <head> section.

<!DOCTYPE html>
<html>
<head><title>Embeded CSS</title>
<style>
	p {
		color: red;
	}
</style>
</head>
<body>
<p>
	All paragraphs are red.
</p>
</body>
</html>

The third approach, and the recommended one, is to place all this style formatting information in a separate file.

<!DOCTYPE html>
<html>
<head><title>Separate CSS</title>
<style href="DocStyles.css" rel="stylesheet" />
</head>
<body>
<p>
	All paragraphs are red.
</p>
</body>
</html>

Dissecting a Style Sheet

selector {
	property: value;
	property: value;
}
selector, selector {
	property: value;
	property: value;
}

The selector identifies what is to be styled. It can be an HTML tag, the ID of an HTML element, or a class. If it is an ID then a hash precedes it; if it is a class then a period precedes it (more on classes below):

element {
	property: value;
	property: value;
}
#id {
	property: value;
	property: value;
}
.class {
	property: value;
	property: value;
}

The property identifies the type of formatting wanting to be applied.

h1, h2 {
	color: value;
	text-align: value;
	text-shadow: value;
}
#footer {
	color: value;
	text-align: value;
}
.bluecenter {
	color: value;
	text-align: value;
}

The value identifies the value of the property. The curly braces define a declaration block and each line contained within, terminated by a semicolon, is a declaration.

h1, h2 {
	color: black;
	text-align: center;
	text-shadow: 10px 10px 3px gray;
}
#footer {
	color: navy;
	text-align: center;
}
.bluecenter {
	color: blue;
	text-align: center;
}

Common Style Sheet Properties

  • Borders:
    • border-color
    • border-style
    • border-width
    • border (sets all three: 1px solid red)
  • Colors:
    • background-color
    • color
  • Fonts:
    • font (sets all properties: bold 12pt 'Courier New', Arial, Verdana)
    • @font-face
    • font-family
    • font-size
    • font-style
    • font-weight
    • font-variant
    • text-decoration
  • Graphics:
    • background-image
    • background-position
    • background-repeat
  • Layout:
    • position
    • float
    • clear
    • left
    • right
    • top
    • bottom
  • Size:
    • width
    • height
  • Spacing:
    • margin
    • margin-bottom
    • margin-right
    • margin-left
    • margin-top
    • padding
    • padding-bottom
    • padding-right
    • padding-left
    • padding-top
  • Text Alignment:
    • letter-spacing
    • line-height
    • text-align
    • text-indent
    • white-space
    • word-spacing
<< < [Page 1 of 15] > >>