Scribd
Upload
7 views

CSS Basics

Uploaded by

hd3543263
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

CSS Basics

Uploaded by

hd3543263
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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