1

CSS Selectors
 Content 2

1 Type Selector 4 Grouping

2 Class Selector 5 Universal Selector

3 ID Selector 6 Descendant Selector

 Content 2

1 Type Selector 4 Grouping

2 Class Selector 5 Universal Selector

3 ID Selector 6 Descendant Selector

 The Document Tree 3

• All HTML documents are trees and each level of the tree is described in the same
manner as a human family tree, with ancestors, descendants, parents, children and
siblings.
• CSS rules are based on the document tree and If you understand the document tree
concept, then CSS selectors will be easy to understand and apply.
 Ancestor 4

• An ancestor refers to any element that is connected but further up the document tree.
 Descendant 5

• A descendant refers to any element that is connected but lower down the document
tree.
 Parent 6

• A parent is an element that is directly above and connected to an element in the

document tree.
 Child 7

A child is an element that is directly below and connected to an element in the document
tree.
 Sibling 8

• A sibling is an element that shares the same parent with another element.
 Type Selector 9

• Use the aptly named font-size property to specify the size of the text.
 Font Weight 10

• if you want a text element to appear in bold, use the font-weight property to adjust the
boldness of type.
 Font Style 11

• The font-style property affects the posture of the text—that is, whether the letter
shapes are vertical (normal) or slanted (italic and oblique).
 Font Stretch 12

• The CSS3 font-stretch property tells the browser to select a

normal, condensed, or extended font in the font family.
• If the browser cannot find a matching font, it will not try to
synthesize the width by stretching or squeezing text;
 Font Variant 13

• Some typefaces come in a “small caps” variant.

This is a separate font design that uses small
uppercase-style letters in place of lowercase
letters. Small caps characters are designed to
match the size and density of lowercase text so
they blend in.

• Small caps should be used for strings of three or

more capital letters appearing in the flow of text,
such as acronyms and abbreviations, that may
look jarring as full-sized capitals.

• Small caps are also recommended for times, like

1am or 2017ad.
 Font Shortcut 14

• Specifying multiple font properties for each text element can get repetitive and lengthy,
so the creators of CSS provided the shorthand font property, which compiles all the
font-related properties into one rule.
 Changing Text Color 15

• You change the color of text with the color property.

 Text Line Adjustments 16

• The next batch of text properties has to do with the treatment of whole lines of text
rather than the shapes of characters.
 Text Line Adjustments … 17

• The next batch of text properties has to do with the treatment of whole lines of text
rather than the shapes of characters.
 Horizontal Text Alignments 18

• You can align text for web pages just as you would in a word processing or desktop
publishing program with the text-align property.
 Text Decoration 19

• If you want to put a line under, over, or through text, or if you’d like to turn of the
underline under links, then text-decoration is the property for you.
 Changing Capitalization 20

• CSS includes this feature as well with the text-transform property as text processing
programs.
 Spaced Out 21

• These two text properties are used to insert space between letters (letterspacing) or
words (word-spacing) when the text is displayed.
 Text Shadow 22

• The text-shadow property adds a “shadow” below your text that makes it seem to
hover or pop out above the page.
 Changing List Bullets and Numbers 23

• CSS provides a few properties that allow authors to choose the type and position of
the marker, or turn them off entirely.
 Changing List Bullets and Numbers… 24

• CSS provides a few properties that allow authors to choose the type and position of
the marker, or turn them off entirely.
 Changing List Bullets and Numbers… 25

• CSS provides a few properties that allow authors to choose the type and position of
the marker, or turn them off entirely.
 Changing List Bullets and Numbers… 26

• CSS provides a few properties that allow authors to choose the type and position of
the marker, or turn them off entirely.
Thank you