Embedded Files
Home > Chapter Review and Exercises > Ch 11 In-Class Demonstration
The following is a sample website that demonstrates some of the CSS selectors we are learning about in this chapter.
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Using Classes and IDs</title>
<!-- These are the embedded selectors and CSS style properties and values -->
<style>
/* These are the embedded selectors and CSS style properties and values */
#bigred {color: red; text-align: center;}
.niceblue {color: blue; text-align: center;}
p {color: green; font-size: 40px;}
</style>
</head>
<body>
<!-- These are ID and the Class selectors -->
<h1 id="bigred">This text should be red</h1>
<h1 class="niceblue">This text should be blue</h1>
<h1 class="niceblue">This text should also be blue</h1>
<p>This text should be green</p>
<!-- These are inline CSS style properties and values -->
<p style="color: brown;">This text should be brown</p>
<!-- This is another instance of the ID bigred -->
<h1 id="bigred">Duplicate IDs will work, but should be avoided</h1>
</body>
</html>
In the embedded style section are three selectors:
#bigred is an ID selector with the name bigred. It's properties are Color: red; and Text-align: center;.
.niceblue is a class selector with the name niceblue. It's properties are Color: blue; and Text-align: center;.
p is a paragraph selector. It's properties are Color: green; and Font-size: 40px;
The first three lines of markup in the body are:
<h1 id="bigred">This text should be red</h1>
<h1 class="niceblue">This text should be blue</h1>
<h1 class="niceblue">This text should also be blue</h1>
They use the ID and the Class selectors.
The next line is:
<p>This text should be green</p>
Since the p selector in the embedded style section has two properties in its declaration, Color: green; and Font-size: 40px;, the text is displayed as green and with a 40 pixel height. But since there was no Text-align: center; property in the declaration, the text defaults to aligning to the left.
The next paragraph element is:
<p style="color: brown;">This text should be brown</p>
It has an inline CSS style with the property color: brown; The brown color overrides the green color that was set in the embedded style section, but nothing was changed with the font size, so it remains as 40 pixels in height.
The last line in the body section is:
<h1 id="bigred">Duplicate IDs will work, but should be avoided</h1>
This demonstrates that IDs can be repeated, but doing that is not encouraged. Use a Class selector instead.
When this website is displayed in a browser, it looks like this.
Report abuse