Class and ID Selectors Explained

Class and ID Selectors to rememberYou can define your own selectors in the form of Class and ID selectors. Thus, you can have the same HTML element presented differently depending on its ID or class.

class selector – a name preceded by a full stop (.)

ID selector – a name preceded be a hash character (#)

Here is the sample of CSS:

#top {
background-color: #ccc;
padding: 1em

.intro {
color: red;
font-weight: bold;

The HTML refers to the CSS by using the attributes id and class. For example:Class and ID Selectors explained

<div id=”top”>

<h1>Brazil Changes Your Life</h1>

<p>How I spend my holiday in this hot country</p>

<p>Great! Unbelievable! Impressive! Fabulous!</p>


Thus, an ID can be used to identify one element while a class can indentify more than one.

A selector to specific HTML element can be applied by simply stating the HTML selector first. For example, p.jam { whatever } will be applied to paragraph elements that have the class ‘jam’ only.

Comments are closed.