ID and Class Selector in CSS

Describe ID selector

Describe class selector

Differentiate ID from class selector (or reverse)

Identify ID and class selector combined within a given HTML code

Grouping Selectors

Class Selector

Indicates the class or classes to which a particular element belongs. Elements that belong to the same class may share aspects of their presentation.

A class name can be any text you like but can made up only of letters, numbers, hyphens (-), and underscores (_).

To assign the class selector named “info” to a paragraph and a div element in your HTML code :

<p class=”info”> CSS stands for Cascading Style Sheets. CSS lets you apply styling information to specific parts of your HTML, identified by tag name, or by IDs and classes you specify.</p>

<div class=”info”> The div tag is used for block elements so line breaks can be created.</div>

.info {color: purple;}

For example, this CSS code will style any elements belonging to the “info” class, whatever those

elements happen to be:

In CSS, class selectors are preceded by a dot (.) to identify them .

ID Selector

Specifies a unique identifier for an

element. must be unique within a single document; more than one element cannot

share the same identifier.

can be any text you like but can made up

only of letters, numbers, hyp

hens (-), and underscores. The first character must be a

letter.

To assign the ID selector “introduction”to a heading 1 element containing the text Hello World !

<h1 id=”introduction”> Hello World!</h1>

#introduction {color: blue;}

The following CSS code would give the element with the ID “introduction” a blue foreground color:

selectors are preceded by a hash symbol (# ).

CLASS SELECTOR

preceded by a dot (.)

targets any element that contain the given class name in

its class attribute.

A class attribute can be assigned to any element in HTML, and any number of elements can

belong to the same class

ID SELECTOR

preceded by a hash symbol (#) .

Any element can have an id attribute, but

that attribute’s value may be used only once

within a single document .

Grouping Selectors

Group the selectors together if they share the same properties.

Separate each individual selector

by a comma

Example:

h1, h2, h3 { font – family: Arial ; font – style: Italic; }