Slide 8.3: CSS id and class selectors

CSS Id and Class Selectors

In addition to setting a style for an HTML element, CSS allows you to specify your own selectors called id and class.

The Id Selector
The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a ‘#’.

(Top example) The style rule will be applied to the element with id="para1".

The Class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a ‘.’.

(Middle example) All HTML elements with class="center" will be center-aligned.

You can also specify that only specific HTML elements should be affected by a class.

(Bottom example) All p elements with class="center" will be center-aligned.

<html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body bgcolor="#EDF3FE"> <p id="para1">Hello World!</p> <p>Not affected by the style.</p> </body> </html>



<html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h3 class="center">Heading</h3> <p class="center">Paragraph</p> </body> </html>

<html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h3 class="center">Not affected</h3> <p class="center">Center aligned</p> </body> </html>

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <title>HTML Working Area</title> <style type="text/css"> /* This is a comment / p#para1 { border: navy solid thin; / This is a multi-line comment */ outline: #3366CC dotted thick } </style> </head> <body bgcolor="#EDF3FE"> <p id="para1"> This is a text. This is a text. </p> <p id="para2"> This is a text. This is a text. </p> </body> </html>

Review: CSS id Attribute

Which symbol is used to define a CSS selector with the id attribute?

.

-

#

%

Result: