SELECTORS, DIV, SPAN AND

CLASS
The CSS element Selector
The element selector selects HTML elements based on the element name.
Here, all <p> elements on the page will be center-aligned, with a red text
color:
p{
text-align: center;
color: red;
}

2
The CSS id Selector
 The id selector uses the id attribute of an HTML element
to select a specific element.
 The id of an element is unique within a page, so the id
selector is used to select one unique element!
 Toselect an element with a specific id, write a hash (#)
character, followed by the id of the element.

3
The CSS id Selector
The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

4
The CSS id Selector

5
The CSS class Selector
The class selector selects HTML elements with a specific class
attribute.
To select elements with a specific class, write a period (.) character,
followed by the class name.

6
The CSS class Selector
 In this example all HTML elements with class="center" will be red and center-aligned:
 You can also specify that only specific HTML elements should be affected by a class.

7
The CSS class Selector
• In this example only <p> elements with class="center" will be center-aligned
• HTML elements can also refer to more than one class.

8
The CSS class Selector
 Inthis example the <p> element will be styled according to
class="center" and to class="large“
 Note: A class name cannot start with a number!

9
The CSS class Selector

10
The CSS Universal Selector
 The universal selector (*) selects all HTML elements on the page.
 The CSS rule below will affect every HTML element on the page:

11
The CSS Universal Selector

12
The CSS Grouping Selector
h1 {
 The grouping selector selects all the HTML
text-align: center;
elements with the same style definitions.
color: red;
 Look at the following CSS code (the h1, }
h2, and p elements have the same style h2 {
definitions): text-align: center;
color: red;
 It will be better to group the selectors, to
}
minimize the code.
p{
 To group selectors, separate each selector text-align: center;
with a comma color: red;
}

13
The CSS Grouping Selector

14
 All CSS Simple Selectors

https://www.w3schools.com/cssref/css_selectors.php
15
The CLASS Attribute
• The CLASS attribute is used to specify the style class to which the
element belongs.
• For example, the style sheet may have created the punk and
warning classes:
.punk { color: blue; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

16
The CLASS Attribute
These classes could be referenced in HTML with the CLASS attribute:

17
The CLASS Attribute
• The punk class may be applied to any BODY element since it does not have an HTML
element associated with it in the style sheet. Using the example's style sheet, the warning
class may only be applied to the P element.
• A good practice is to name classes according to their function rather than their appearance.
The warning class in the previous example could have been named red, but this name
would become meaningless if the author decided to change the style of the class to a
different color, or if the author wished to define an aural style for those using speech
synthesizers.
• Classes can be a very effective method of applying different styles to structurally identical
sections of an HTML document. For example, this page uses classes to give a different
style to CSS code and HTML code.

18
The ID Attribute
The ID attribute is used to define a
unique style for an element. A CSS
rule such as
#wdg97 { font-size: larger; color: red}
may be applied in HTML through the
ID attribute:
<P ID=wdg97>Welcome to the Web
Design Group!</P>

19
The ID Attribute
• Each ID attribute must have a unique value over the document.
• Value must be an initial letter followed by letters, digits, or hyphens.
• Letters are restricted to A-Z and a-z.
• Note: HTML 4 allows periods in ID attribute values, but CSS1 does not allow periods in ID
• selectors.
• Note: CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a
numeric code, but HTML 4 does not allow these characters in an ID attribute value.
• The use of ID is appropriate when a style only needs to be applied once in any document.
• ID contrasts with the STYLE attribute in that the former allows medium-specific styles and
can also be applied to multiple documents (though only once in each document).

20
The SPAN Element
 The SPAN element was introduced into HTML to allow authors to give style that
could not be attached to a structural HTML element. SPAN may be used as a
selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes.
 SPAN is an inline element, so it may be used just as elements such as EM and
STRONG in HTML. The important distinction is that while EM and STRONG
carry structural meaning, SPAN has no such meaning. It exists purely to apply
style, and so has no effect when the style sheet is disabled.

21
The SPAN Element

22
 The DIV Element
• The DIV element is similar to the SPAN element in function, with the main
difference being that DIV (short for "division") is a block-level element. DIV may
contain paragraphs, headings, tables, and even other divisions. This makes DIV
ideal for marking different classes of containers, such as a chapter, abstract, or
note.

23
The DIV Element
Example:

24