|
How do I group selectors?
Author: Deron Eriksson
Description: This is a CSS example that demonstrates how to group selectors.
Tutorial created using:
Windows XP
(Continued from page 1) Both the ungrouped selectors and the grouped selectors generate the same results. To demonstrate, below we can see two HTMLW pages and their displays. The first page utilizes the ungrouped selectors, while the second page utilizes the grouped selectors. style-test-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test 1</title>
<style type="text/css">
h1 { background: yellow; }
h2 { background: yellow; }
h3 { background: yellow; }
</style>
</head>
<body>
<h1>Howdy</h1>
<h2>Hello, again</h2>
<h3>Bye</h3>
</body>
</html>
The display of style-test-1.html is shown here: 
The grouped selectors HTML file is shown here: style-test-2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test 2</title>
<style type="text/css">
h1, h2, h3 { background: yellow; }
</style>
</head>
<body>
<h1>Howdy</h1>
<h2>Hello, again</h2>
<h3>Bye</h3>
</body>
</html>
The display of style-test-2.html is shown here: 
Related Tutorials: |