Scribd
Upload
7 views

CSS Basics

Uploaded by

hd3543263
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

CSS Basics

Uploaded by

hd3543263
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

Cascading Style Sheets

Anatomy of a CSS ruleset


modify multiple property values
Selecting multiple elements
Different types of selectors
Applying CSS to a document

• Three methods
1. External stylesheet
2. Internal stylesheet
3. Inline styles
External stylesheet
Internal stylesheet
Inline styles
Conflicting rules
• Cascade
• Specificity
The cascade

Output :-
Specificity

Output :-
Inheritance

Output :-
Understanding inheritance

Output :-
Controlling inheritance
• Inherit
• Initial
• Unset
Controlling inheritance

Output :-
Resetting all property values

Output :-
Selector lists
Types of selectors
• Type, class, and ID selectors
– h1 { }
– .box { }
– #unique { }

• Attribute selectors
– a[title] { }
– a[href="https://example.com"] { }

• Pseudo-classes and pseudo-elements


– a:hover { }

• Combinators
– article > p { }
Type selectors

Output: -
The universal selector

Output: -
Class selectors

Output: -
Targeting classes on particular elements

Output: -
Target an element if it has more than one
class applied

Output: -
ID Selectors

Output: -
Presence and value selectors
Attribute presence and value selectors

Output: -
Substring matching selectors
Attribute substring matching selectors

Output: -
Case-sensitivity

Output: -
pseudo-class

Output: -
pseudo-class

Output: -
• :last-child
• :only-child
• :invalid
User-action pseudo classes

Output: -
What is a pseudo-element?

Output: -
Combining pseudo-classes and pseudo-
elements
Generating content with ::before
and ::after
Descendant combinator

Output: -
Child combinator

Output: -
Adjacent sibling combinator

Output: -
General sibling combinator

Output: -

You might also like