Cascading Style Sheets 3.0 Tutorial

Formatting with Classes

Giving a specific element a different formatting can be done inline with the style attribute, but it is cleaner (and recommended) to do so using a style sheet class. To do this, assign the element a name with the class attribute: <h3 class="title">CSS3 Programming</h3>

Selectors

Contextual Selectors

A contextual selector matches an element inside another element. For example:

<!DOCTYPE html>
<html>
<head><title>Contextual Selectors</title>
<style>
	#main h1 {
		color: green;
	}
</style>
</head>
<body>
<div id="main">
	<h1>This Heading is Green</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><title>Contextual Selectors</title>
<style>
	.title {
		font-size: large;
	}
	.main h1 {
		color: green;
	}
</style>
</head>
<body>
<div class="main title">
	<h1>This Heading is Green</h1>
</div>
</body>
</html>

Pseudo-Class Selectors

Pseudo-classes take more information into account. Information that might not be in the HTML markup or may be based on user actions. Pseudo-classes always start with a semi-colon. The :link pseudo-class formats any link pointing to a new, never-visited document. The :visited pseudo-class pertains to any link that points an already-visited document. The :hover pseudo-class applies when a user moves his mouse over the link. The :active pseudo-class applies when as a reader clicks it. For example:

<!DOCTYPE html>
<html>
<head><title>Contextual Selectors</title>
<style>
	a:link {
		color: blue;
	}
	a:hover {
		color: lightblue;
	}
	a:visited {
		color: navy;
	}
	a:active {
		color: red;
	}
	.hotLink:visited {
		color: gray;
	}
</style>
</head>
<body>
<p>
	This is a <a class=hotLink href="http://www.google.com/">link to Google</a>
		and another <a href="http://www.bing.com/">link to Bing</a>
</p>
</body>
</html>

Attribute Selectors

Atribute selectors allow the formatting of a certain type of element that also has a specific value set for on of its attributes. For example:

<!DOCTYPE html>
<html>
<head><title>Contextual Selectors</title>
<style>
	input[type="text"] {
		color: silver;
	}
	input[type="text"]:focus {
		color: black;
	}
	label[for="lastName"] {
		color: red;
	}
	a[href^="http://"] { /* this selects all links that begin with "http://" */
		color: red;
	}
	a[href$=".doc"], a[href$=".DOC"] { /* this selects all links that end with ".doc" or ".DOC" */
		padding-left: 16px;
		background: url('wordicon.gif') no-repeat;
	}
	a[href$=".xls"], a[href$=".XLS"] { /* this selects all links that end with ".xls" or ".XLS" */
		padding-left: 16px;
		background: url('excelicon.gif') no-repeat;
	}
	a[href*="bios"] { /* this selects all links that contain "bios" */
		color: purple;
	}
</style>
</head>
<body>
	<label for="lastName">Last Name:</label>
	<input id="lastName" type="text" />
</body>
</html>

The Negation Pseudo-Class

The negation pseudo-class allows selecting something that is not something else. For example:

<!DOCTYPE html>
<html>
<head><title>Contextual Selectors</title>
<style>
	a[href^="http://"]:not([href*="mydomain.com"]) {
		/* this selects all links that begin with "http://"
		but not the one with "mydomain.com" in the address */
		color: red;
	}
</style>
</head>
<body>
<p>
	<a href="http://www.google.com">Google</a>
</p>
<p>
	<a href="http://www.mydomain.com">Home</a>
</p>
</body>
</html>

NTH-CHILD Selector

Use CSS to style every other row in a table. For example:

tr:nth-child(odd) {
	background-color: limegreen;
}
tr:nth-child(even) {
	background-color: white;
}
<< < [Page 2 of 15] > >>