Scribd
Upload
63 views24 pages

Chapter 11 - Cascading Style Sheets

Cascading Style Sheets (CSS) allows precise control over elements on web pages through properties that control aspects like color, font, spacing, and layout. CSS code can be linked externally, embedded within HTML, or applied inline to elements. CSS follows a cascade model where rules are applied based on specificity from browser defaults to inline styles.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views24 pages

Chapter 11 - Cascading Style Sheets

Cascading Style Sheets (CSS) allows precise control over elements on web pages through properties that control aspects like color, font, spacing, and layout. CSS code can be linked externally, embedded within HTML, or applied inline to elements. CSS follows a cascade model where rules are applied based on specificity from browser defaults to inline styles.

Uploaded by

ryuu.ducat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Cascading Style Sheets

Web development I: Front-end engineering


Why CSS

Precise type and layout controls

Less work

More accessible sites

Reliable browser support


Writing CSS
Adding CSS

External file:
<link href="/path/to/file.css" rel="stylesheet" />

Embedded in the HTML:


<style>
@import url("/path/to/file.css");
p { color: red; }
</style>

Inline (bad practice):


<p style="color:red">Hello</p>
Some notes

Whitespace (in)significance: Comments:


p { color: red; } /* This is ignored. */

p {

color: red; Grouped selectors:


} p, h1, h2 { … }
p{color:red}
Inheritance
Inheritance and document structure
Inheritance and document structure
Document tree structure

...
Contextual selectors

Descendant selector (note the whitespaces):


ul li a { … }
Child selector:
p > em { … }
Adjacent sibling selector:
h1 + p { … }
General sibling selector:
h1 ~ h2 { … }
Class and ID selectors

Class notation: dot (.) + class name ID notation: hash (#) + id

.warn { color: orange; } #top { color: blue; }

Classes can be shared across HTML Only one ID is allowed in the whole HTML
elements: document!

<p class="warn">Hi</p> <h1 id="top">Welcome</h1>

<div class="warn">Bye</p>
Combining selectors

Increase specificity:

main > section p.warn { … }


Conflicting styles: the cascade

Style information is passed down (“cascades” down) until it is overridden by a style


command with more specificity (weight).

Rule order: Last rule always wins

<style> <style>
p { color: red; } p { color: red;
p { color: blue; } color: blue;
p { color: green; } color: green; }
</style> </style>
Conflicting styles: the cascade

From less to more priority:

1. Default browser styles


2. User style settings (set as “reader style sheet”)
3. Linked external style sheet (added with <link> element)
4. Imported style sheets (added with @import)
5. Embedded style sheets (added with <style> element)
6. Inline style information (added with style attribute)
7. Any style rule marked as !important
Conflicting styles: the cascade

From less to more priority:

1. Universal selector: * { … }
2. Individual selectors
3. Contextual selectors
4. Class selectors
5. ID selectors
6. The !important flag.
Pseudo-class selectors

:link Never clicked element

:visited Already clicked element

:hover Mouse pointer over the element

:active Element being clicked

:focus Element selected and ready for input


Pseudo-class selectors
Pseudo-class selectors in forms

:enabled Element is enabled

:disabled Element is disabled

:checked Element is checked (radio, checkbox)

:required Element is required

:autofill Matches content filled by the browser

:invalid Element has invalid content (e.g.


malformed email)
More pseudo-class selectors

:root Useful to declare CSS variables

:empty Element with no content (and no whitespace)

:target Element ID matches URL fragment

:not() Do not match given selector(s)

:lang() Match elements based on language

:has()1 Match all elements with forgiving selectors

:is()1 Match any elements with forgiving selectors

:where()1 Same as :is() but using 0 specificity

1
Not fully supported yet in all major browsers
More pseudo-class selectors

:first-child First element in group of siblings


:last-child Last element in group of siblings
:only-child Element with no siblings
:first-of-type First element in group of siblings
:last-of-type Last element in group of siblings
:only-of-type Element has no siblings of the same type
More pseudo-class selectors

:nth-child() Matches based on position among siblings


:nth-last-child() … counting from the end
:nth-of-type() Matches based on type among siblings
:nth-last-of-type() … counting from the end
Pseudo-element selectors

::first-line Matches first line of (block-level) element

::first-letter Matches first letter of (block-level) element

::before Creates a first child of the element

::after Creates a last child of the element

::selection Matches highlighted content


Attribute selectors

element[attribute] Simple attribute value selector

element[attribute = "value"] Exact attribute value selector

element[attribute ~= "value"] Partial attribute (word) value selector

element[attribute |= "value"] Beginning hyphen-separated value selector

element[attribute ^= "value"] Beginning substring value selector

element[attribute $= "value"] Ending substring value selector

element[attribute *= "value"] Arbitrary substring value selector


How many CSS properties are there?

“541 distinct property names, based on 73 technical reports.”

— https://www.w3.org/Style/CSS/all-properties.en.html

You might also like