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; }