PROWARE technologies
PROWARE technologies

Cascading Style Sheets 3.0 (CSS3) 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>

<!DOCTYPE html>
<html>
<head><title>Inline CSS</title>
</head>
<body>
<p style="color: red;">This paragraph is red.</p>
</body>
</html>

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

<< < [Page 1 of 15] > >>
Contact