Cascading Style Sheets (CSS)

Péter Jeszenszky

Faculty of Informatics, University of Debrecen

October 28, 2024

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 1 / 153
Terms of Use

This work is licensed under a Creative Commons

“Attribution 4.0 International” license.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 2 / 153
What is CSS?

A style sheet language for describing the rendering of structured

documents (such as HTML and XML).
Supports rendering on different devices, such as screens, printers, and
Braille devices.

Separates the presentation style of documents from the content of

documents.
Thus, simplifies web authoring and site maintenance.

Website: https://www.w3.org/Style/CSS/

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 3 / 153
History

Originally, CSS was proposed by Håkon Wium Lie, a Norwegian

researcher in 1994 while he was working with Tim Berners-Lee at
CERN.
Website: https://www.wiumlie.no/

For more information, see: 20 Years of CSS (W3C)

A brief history of CSS until 2016

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 4 / 153
Development

Developed by the CSS Working Group of W3C.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 5 / 153
Levels

CSS does not have versions in the traditional sense, instead, it has
levels:
CSS Level 1
CSS Level 2
CSS Level 3

Each level of CSS builds on the previous one, refining definitions and
adding features.
See: Levels, snapshots, modules. . . (W3C)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 6 / 153
CSS Level 1

Specification: Cascading Style Sheets, level 1 (Superseded W3C

Recommendation)
Considered to be obsolete.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 7 / 153
CSS Level 2

Defined by the CSS2.1 specification (i.e., a single document):

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C
Recommendation, 7 June 2011)

Its revision is currently under development:

Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (W3C
First Public Working Draft, 12 April 2016)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 8 / 153
CSS Level 3 (1)

Currently under development.

Has a modular structure:
Broken into modules, where each module defines a part of CSS.
Each module adds functionality and/or replaces part of the CSS2.1
specification.

Modules also have levels.

Modules with no CSS Level 2 equivalent start at Level 1.
Modules that update features that existed in CSS Level 2 start at Level
3.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 9 / 153
CSS Level 3 (2)

Different CSS modules are at different levels of stability.

The list of all CSS specifications:
http://www.w3.org/Style/CSS/current-work.en.html
A few modules are the following:
Selectors Level 3 (W3C Recommendation, 6 November 2018)
CSS Values and Units Module Level 3 (W3C Candidate
Recommendation Draft, 22 March 2024)
CSS Transforms Module Level 1 (W3C Candidate Recommendation, 14
February 2019)
CSS Transforms Module Level 2 (W3C Working Draft, 9 November
2021)
...

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 10 / 153
CSS Level 3 (3)

CSS Snapshot 2023 (W3C Group Note, 7 December 2023)

Collects together all specifications that together form the current state
of CSS.
The primary audience is CSS implementers.
See the section titled Cascading Style Sheets (CSS) – The Official
Definition.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 11 / 153
CSS Level 4 and Beyond

There is no CSS Level 4.

Independent modules can reach level 4 or beyond, but CSS the
language no longer has levels.
“CSS Level 3” as a term is used only to differentiate it from the
previous monolithic versions.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 12 / 153
Browser Support

Modern web browsers support most of the features of CSS 2.1.

They support some features of CSS3:
https://caniuse.com/?search=CSS3
The CSS3 Test https://github.com/LeaVerou/css3test

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 13 / 153
Coding Styles

Google HTML/CSS Style Guide

Nicolas Gallagher. Principles of writing consistent, idiomatic CSS.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 14 / 153
Editors (1)

Free and open source software:

Visual Studio Code (platform: Linux, macOS, Windows; license: MIT
License) https://code.visualstudio.com/
https://github.com/Microsoft/vscode
See: https://code.visualstudio.com/docs/languages/css

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 15 / 153
Editors (2)

Non-free software:
WebStorm (platform: Linux, macOS, Windows)
https://www.jetbrains.com/webstorm/
See: https://www.jetbrains.com/help/webstorm/style-sheets.html

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 16 / 153
Editors (3)

Emmet (written in: JavaScript; license: MIT License) https://emmet.io/

https://github.com/emmetio/emmet
A set of text editor plugins for boosting HTML and CSS code writing.
Available for many text editors such as: Eclipse, NetBeans,
Notepad++, Visual Studio Code, IntelliJ IDEA, . . .
See: https://emmet.io/download/
Documentation: https://docs.emmet.io/
Customization: https://docs.emmet.io/customization/
See also: Emmet in Visual Studio Code

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 17 / 153
Editors (4)
Examples of Emmet abbreviations:

Abbreviation Expanded to
bd border: 1px solid #000;
bdt border-top: 1px solid #000;
bgc background-color: #fff;
fwb font-weight: bold;
p10 padding: 10px;
p1e padding: 1em;
mla margin-left: auto;
mra margin-right: auto;
pt.5e padding-top: 0.5em;
tac text-align: center;
tar text-align: right;
df display: flex;
w50% width: 50%;

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 18 / 153
CSS Frameworks

Minimalistic CSS frameworks:

Milligram (license: MIT License) https://milligram.io/
https://github.com/milligram/milligram
Examples: https://milligram.io/#examples

Pico CSS (license: MIT License) https://picocss.com/

https://github.com/picocss/pico
Examples: https://picocss.com/examples

Simple.css (license: MIT License) https://simplecss.org/

https://github.com/kevquirk/simple.css
Examples: https://simplecss.org/demo

For more, see: https://github.com/troxler/awesome-css-frameworks

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 19 / 153
Other Tools

Minifier tools:
cssnano (written in: CSS/JavaScript; license: MIT License)
https://cssnano.github.io/cssnano/
https://github.com/cssnano/cssnano
CSSO (written in: CSS/JavaScript; license: License MIT)
https://css.github.io/csso/ https://github.com/css/csso
Visual Studio Code:
MinifyAll (written in: TypeScript; license: GPLv3) https:
//marketplace.visualstudio.com/items?itemName=josee9988.minifyall
https://minifyall.jgracia.es/ https://github.com/Josee9988/MinifyAll

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 20 / 153
Online CSS Sandboxes

CodePen
JSFiddle
Liveweave

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 21 / 153
File Properties

File extension: .css

IANA media type: text/css

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 22 / 153
Characters

CSS uses the Unicode character set.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 23 / 153
Escape Sequences (1)

Unicode characters can be specified with escape sequences of the form

\hhhhhh where hhhhhh is a sequence of one to six hexadecimal digits
representing the code point of the Unicode character.
If the number of hex digits is less than six and a character in the range
[0-9a-fA-F] follows the hexadecimal number, then a whitespace
character must end the escape sequence.
A whitespace character that immediately follows an escape sequence will
be ignored.

Examples:
\9, \09, . . . , \000009 denote the vertical tab character.
\A9, \0A9, . . . , \0000A9 denote the copyright symbol (©).

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 24 / 153
Escape Sequences (2)

Special characters can be escaped with a '\' character.

For example, it is required when a selector contains an element name
that contains '.' characters.
For example, an element named given.name matches the selector
given\.name and does not match the selectorgiven.name.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 25 / 153
Character Encoding

Character encoding is determined by the following:

A byte order mark (BOM).
Otherwise, the value of the charset parameter in the Content-Type
HTTP header field.
Otherwise, the @charset "encoding"; at-rule at the very beginning of
the stylesheet.
Example: @charset “UTF-16”;
Otherwise, UTF-8 is the default character encoding.

See: Declaring character encodings in CSS (W3C)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 26 / 153
Comments

Comments can be placed between the /* and */ delimiters.

Example: /* Style sheet for index.html */

Can occur anywhere but in tokens.

Cannot be nested.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 27 / 153
Box Model (1)

Relevant specification: CSS Display Module Level 3 (W3C Candidate

Recommendation Snapshot, 30 March 2023)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 28 / 153
Box Model (2)

CSS takes a source document, organized as a tree, and renders it onto

a canvas (such as the screen) generating an intermediary structure, the
box tree, which represents the formatting structure of the rendered
document.
Each box in the box tree represents a corresponding element (or
pseudo-element) from the document in space and/or time on the
canvas.
For each element, CSS generates zero or more boxes as specified by
that element’s display property.
Typically, an element generates a single box.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 29 / 153
Box Model (3)

margin

border

padding

<Content>
Tartalom

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 30 / 153
Properties (1)

Parameters defined by CSS for controlling the rendering of documents.

Properties have names and values.
The list of CSS properties: List of CSS properties (W3C)
The total number of distinct property names is 602.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 31 / 153
Properties (2)

Shorthand property:
A property that allows authors to specify the values of several
properties simultaneously
For example, the margin property is a shorthand property for setting
the value of the margin-top, margin-right, margin-bottom and
margin-left properties.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 32 / 153
Declaration Blocks

Start with a '{' character and end with a '}' character, in between
there must be a list of zero or more declarations.
Declarations are of the form name:value, where whitespace characters
are allowed before and after tokens.
In a declaration name is an identifier..
Declarations must end with a ';' character.
The ';' character after the last declaration can be omitted.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 33 / 153
Rule Sets (Style Rules)

Consist of a selector (or a list of selectors separated with a ',' character)

followed by a declaration block.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 34 / 153
At-rules

Define special processing rules or values.

Start with a '@' character, followed by an identifier and includes
everything up to the next ';' character, or the next declaration block.
Examples: @charset, @import, @namespace, @media
See: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 35 / 153
Values (1)

Relevant specification: CSS Values and Units Module Level 3 (W3C

Candidate Recommendation Draft, 22 March 2024)
See also: CSS values and units (MDN)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 36 / 153
Values (2)

A property value can have one or more components:

Identifiers (e.g., none, inherit)
Strings (e.g., 'Hello, world!')
URLs (e.g., url(images/item.png))
Numbers (e.g., 123, 3.141593)
Percentages (e.g., 150%)
Dimensions (e.g., 10px, 0.5em, 45deg)
Colors (e.g., fuchsia, #f0f, #ff00ff, rgb(255,0,255))
Functional notations (e.g., attr(name), calc(100% - 50px),
counter(chapter-number))
...

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 37 / 153
Values (3)

For each property, CSS specifications define the type, number, and
ordering of components allowed in property values.
Examples:
text-transform: none | capitalize | uppercase | lowercase
| full-width
letter-spacing: normal | <length>
border-color: <color>{1,4}
border-top: <line-width> || <line-style> || <color>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 38 / 153
Identifiers

Keywords: are ASCII case-insensitive (i.e., the [a-z] and [A-Z]

characters are equivalent).
Author-defined identifiers:
Used, for example, for names of counters.
Are case-sensitive.

Syntax:
See: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 39 / 153
Strings

Sequences of characters delimited by ''' or '"' characters.

Cannot contain the delimiter character directly.
Delimiters in strings must be escaped with a '\' character.
Example: 'It\'s So Cool', "\"Good morning, Frank,\" said
Hal."

Newlines can be specified only with the \A escape sequence.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 40 / 153
URL-s

Examples:
list-style-image: url("http://eg.com/images/item.png")
list-style-image: url('http://eg.com/images/item.png')
list-style-image: url(http://eg.com/images/item.png)

Relative references can be used and are resolved against the URL of
the stylesheet.
Example: list-style-image: url("images/item.png")

In some contexts, e.g., in @import at-rules, the url() function can be

omitted and a bare string can be used instead.
Example: @import "default.css";

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 41 / 153
Numbers

CSS uses two types of numbers:

Integers: consist of an optional sign and one or more decimal digits.
Examples: 0, 255, -1, +10946

Real numbers: consist of an optional sign, one ore more decimal digits,
an optional dot, optionally followed by an 'e' or 'E' character and an
integer.
At least one digit is required after the dot.
Integers are special cases of real numbers.
Examples: 1.5, -100.0, +.25, 1E-10

Properties may restrict numeric values to some range.

For example, they can exclude negative numbers.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 42 / 153
Percentages (1)

Consist of an integer or a real number immediately followed by a '%'

character.
Percentage values are always relative to another quantity.
Each property that allows percentages also defines the quantity to which
the percentage refers.
This quantity can be a value of another property for the same element,
the value of a property for an ancestor element, or something else.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 43 / 153
Percentages (2)

Examples:
sup {
font-size: 75%;
}

nav {
width: 40%;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 44 / 153
Dimensions

Consist of an integer or a real number immediately followed by a unit.

Units are ASCII case-insensitive identifiers.

Each dimension represents a quantity, such as length, or angle.

For zero lengths the unit can be omitted.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 45 / 153
Lengths (1)

There are two types of length units:

Relative: specify a length relative to another length.
em, ex, ch, rem, vw, vh, vmin, vmax

Absolute: fixed in relation to each other and anchored to some physical

measurement.
cm, mm, Q, in, pc, pt, px

Examples: 0.5em, 1.5cm, 0px, 0, -1in

See: https://developer.mozilla.org/en-US/docs/Web/CSS/length

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 46 / 153
Lengths (2)

Relative units:
em: equals to the computed value of the font-size property of the
element on which it is used (in case of the font-size property itself it
refers to the computed font-size of the parent element).
ex: equals to the x-height of the element’s font (in case of the of the
font-size property itself it refers to the x-height of the parent
element).
It is so called because it is often equal to the height of the lowercase x
character.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 47 / 153
Colors (1)

Relevant specification: CSS Color Module Level 3 (W3C Recommendation,

18 January 2022)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 48 / 153
Colors (2)

The 16 basic color keywords: aqua, black, blue, fuchsia, gray,

green, lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow.
Modern web browsers generally support several other color keywords,
see:
https://www.w3.org/TR/css-color-3/#svg-color
https://developer.mozilla.org/en-US/docs/Web/CSS/named-color

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 49 / 153
Colors (3)

RGB color model:

For example, all of the following specify the same color:
lightslategrey
#778899
#789 (each hexadecimal digit is doubled)
rgb(119,136,153)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 50 / 153
Colors (4)

RGB color model:

The rgb() functional notation also accepts three percentages as
arguments, where the integer value 255 corresponds to 100%.
For example, the following colors are equivalent:
#ffffff
#fff
rgb(255,255,255)
rgb(100%,100%,100%)
white

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 51 / 153
Selectors (1)

Relevant specification: Selectors Level 3 (W3C Recommendation, 6

November 2018)
Selectors express pattern matching rules.
They determine which style rules apply to elements.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 52 / 153
Selectors (2)

Selectors are case-insensitive within the ASCII range (i.e., the

characters [a-z] and [A-Z] are equivalent), except for parts that are
not underthe control of CSS (element names, attribute names and
values).
The case sensitivity of document language element names, attribute
names, and attribute values in selectors depends on the document
language

For example, element names are case-sensitive in XHTML and XML.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 53 / 153
Selectors (3)

Simple selector: either a type selector, universal selector, attribute

selector, class selector, ID selector, or pseudo-class.
Examples:
div
*[rel=stylesheet]
.copyright
#logo
:lang(hu)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 54 / 153
Selectors (4)

Combinator: any of the following characters:

whitespace
'>'
'+'
'~'

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 55 / 153
Selectors (5)

Sequence of simple selectors:

A chain of simple selectors that are not separated by a combinator.
Begins with a type selector or a universal selector. No other type
selector or universal selector is allowed in the sequence.
Examples:
div
h2#status
link[rel=stylesheet][type=text/css]
p.copyright
*:lang(hu)
tr:nth-child(odd)
li:not(:last-child)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 56 / 153
Selectors (6)

Selector:
A chain of one or more sequences of simple selectors separated by
combinators.
One pseudo-element may be appended to the last sequence of simple
selectors.
Examples:
p
a img
h1 ~ table
div#main > h1
div > h1 + p
q::before

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 57 / 153
Type Selector

Written as a CSS qualified name, generally, an identifier.

Matches the elements of that name.
Examples:
p { color: red }
a { text-decoration: none }

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 58 / 153
Universal Selector

Written as *.
Matches all elements.
May be omitted from a simple selector, if it is not the only component.
Thus, for example, the following selectors are equivalent:
*#nav and #nav
*.important and .important
*[title] and [title]

It is recommended not to omit the *, because it improves readability.

For example, the selector div *:first-child is more readable than
the selector div :first-child, because it is less likely to confuse with
the selector div:first-child.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 59 / 153
Attribute Selectors (1)

[att]: matches elements with the att attribute.

[att=val]: matches elements with the att attribute whose value is
exactly val.
[att~=val]: matches elements with the att attribute whose value is
a whitespace-separated list of words, one of which is exactly val.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 60 / 153
Attribute Selectors (2)

[att|=val]:
Matches elements with the att attribute, its value either being exactly
val or beginning with val-.
Primarily intended to be used for attributes whose value is a language
tag, for example, en-US, en-GB.
For the xml:lang attribute and the HTML lang attribute the
:lang(C) pseudo-class should be used.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 61 / 153
Attribute Selectors (3)

Additional attribute selectors introduced by CSS3:

[attˆ=val]: matches elements with the att attribute whose value
begins with the prefix val.
[att$=val]: matches elements with the att attribute whose value
ends with the suffix val.
[att*=val]: matches elements with the att attribute whose value
contains the substring val.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 62 / 153
Attribute Selectors (4)

In each attribute selector, val must be a CSS identifier or a string.

Thus, for example, the [dir=rtl], [dir='rtl'], and [dir="rtl"]
selectors are equivalent.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 63 / 153
Attribute Selectors (5)
Examples:
style[type=italic] {
font-style: italic;
}

style[type=bold] {
font-weight: bold;
}

style[type=normal] {
font-style: normal;
font-weight: normal;
}

a[hreflang|=en] {
text-decoration: line-through;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 64 / 153
Class Selector

For HTML documents, the attribute selector [class~=val] is

equivalent with the selector .val.
Examples:
div.centered {
margin-left: auto;
margin-right: auto;
}

.important {
color: red;
text-decoration: underline;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 65 / 153
ID Selector (1)

A selector of the form #identifier matches the element with that

identifier.
The identifier must be provided by an attribute of type ID in the
document.
The name of such an attribute depends on the document language, for
example, in HTML the attribute is named id.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 66 / 153
ID Selector (2)

Examples:
div#main {
width: 50%;
margin-left: auto;
margin-right: auto;
}

#footer {
text-align: center;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 67 / 153
Pseudo-classes (1)

Selectors of the form :identifier or :identifier(value).

Pseudo-class names are case-insensitive.
Permit selection based on information that lies outside of the
document or that cannot be expressed using the other simple selectors.
Some pseudo-classes are mutually exclusive (e.g., :link and
:visited).
Some pseudo-classes are dynamic: an element may acquire or lose a
dynamic pseudo-class while a user interacts with the document.
The two types of dynamic pseudo-classes: link pseudo-classes and user
action pseudo-classes.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 68 / 153
Pseudo-classes (2)

Link pseudo-classes:
:link: applies to links that have not yet been visited.
:visited: applies to links that have not yet been visited.
For privacy reasons, a very limited set of CSS properties can be set via
the :visited pseudo-class.
Moreover, for the same reasons, modern web browsers lie about the
values of the CSS properties of visited links when they are queried from
JavaScript via the Window.getComputedStyle() method.
See:
:visited (MDN)
Privacy and the :visited selector (MDN)
Window: getComputedStyle() method (MDN)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 69 / 153
Pseudo-classes (3)

User action pseudo-classes:

:hover: applies while the user designates an element with a pointing
device, but does not necessarily activate it.
:active: applies while an element is being activated by the user.
For example, between the times the user presses the mouse button and
releases it.

:focus: applies while an element has the focus (accepts keyboard or

mouse events, or other forms of input).

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 70 / 153
Pseudo-classes (4)

Example for using dynamic pseudo-classes:

a:link {
color: indigo;
text-decoration: none;
}

a:visited {
color: gray;
text-decoration: line-through; /* Won't work */
}

a:hover {
border-width: medium;
border-style: solid;
}

a:active {
font-weight: bolder;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 71 / 153
Pseudo-classes (5)

The :target pseudo-class:

When the URI of the document contains a fragment identifier,
:target represents the element referred by the fragment.
For example, if index.html#copyright is the URI of the document,
then the selector div:target represents the div element with the ID
copyright.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 72 / 153
Pseudo-classes (6)

The :lang(C) pseudo-class:

Represents elements that are in language C, where C is a CSS identifier
(language code).
Examples:
:lang(en), :lang(en-GB), :lang(en-US)
:lang(hu)

In XML documents, the language used is defined by the xml:lang

attribute. In HTML documents, the language can be specified with
both the lang and the xml:lang attributes.
The lang and xml:lang attributes are not necessarily occur directly on
an element.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 73 / 153
Pseudo-classes (7)

Example for using the :lang(C) pseudo-class: using Hungarian quotation

marks for quotations in Hungarian
q:lang( hu) {
quotes: "„" "”" "»" "«";
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 74 / 153
Pseudo-classes (8)

UI element states pseudo-classes:

:enabled: represents user interface elements that are in an enabled
state.
:disabled: represents user interface elements that are in a disabled
state.
:checked: represents user interface elements that are in a “checked”
state (for example, radio buttons, checkboxes).

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 75 / 153
Pseudo-classes (9)

Structural pseudo-classes:
Only elements are counted when calculating the position of an element
in its list of siblings.
For example, text, comments, and processing instructions are ignored.

Index numbering starts at 1.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 76 / 153
Pseudo-classes (10)

Structural pseudo-classes:
:root: represents the root element of the document.
:only-child: represents elements that have no siblings.
:only-of-type: represents elements that have no siblings with the
same element name.
:empty: represents elements that have no children at all.
These elements do not contain any text or elements, but may contain
comments and processing instructions.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 77 / 153
Pseudo-classes (11)

Structural pseudo-classes (continued): a and b are integers

:nth-child(an+b): represents elements that have an + b − 1 siblings
before it in the document, for any non-negative integer value of n.
:nth-last-child(an+b): represents elements that have an + b − 1
siblings after it in the document, for any non-negative integer value of
n.
:nth-of-type(an+b): represents elements that have an + b − 1
siblings with the same element name before it in the document, for any
non-negative integer value of n.
:nth-last-of-type(an+b): represents elements that have
an + b − 1 siblings with the same element name after it in the
document, for any non-negative integer value of n.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 78 / 153
Pseudo-classes (12)

Structural pseudo-classes (continued):

:nth-child(), :nth-last-child(), :nth-of-type() és
:nth-last-of-type():
The argument an+0 can be specified as an in short.
The argument 0n+b can be specified as b in short.
For a negative b the argument must be specified as an-b, the form
an+-b is invalid.
The argument 2n can be specified as even, the argument 2n+1 as odd,
respectively.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 79 / 153
Pseudo-classes (13)

Structural pseudo-classes (continued):

Selector Meaning
tr:nth-child(2n+0) The even rows of a table
tr:nth-child(2n)
tr:nth-child(even)
tr:nth-child(2n+1) The odd rows of a table
tr:nth-child(2n-1)
tr:nth-child(odd)
tr:nth-child(5) The the fifth row of a table
tr:nth-child(5n+1) The 1st, 6th, 11th, . . . rows of a table
tr:nth-child(5n-4)
tr:nth-child(-n+5) The first five rows of a table
tr:nth-last-child(-n+5) The last five rows of a table

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 80 / 153
Pseudo-classes (14)

Structural pseudo-classes (continued):

:first-child: has the same meaning as :nth-child(1)
:last-child: has the same meaning as :nth-last-child(1)
:first-of-type: has the same meaning as :nth-of-type(1)
:last-of-type: has the same meaning as :nth-last-of-type(1)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 81 / 153
Pseudo-classes (15)

The negation pseudo-class:

A selector of the form :not(X) , where the argument is a simple
selector (excluding the negation pseudo-class itself).
Matches elements that do not match the argument.
Examples:
:not(.important)
:not([title])
li:not(:last-child)
a:not(:hover)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 82 / 153
Pseudo-classes (16)

The negation pseudo-class (continued):

Only the argument is taken into account when calculating specificity!
For example, the selector h1:not(h2) is practically equivalent to the
selector h1, but it has a higher specificity: (a = 0, b = 0, c = 2).

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 83 / 153
Pseudo-elements (1)

Pseudo-elements allow authors to refer to content in the document

that is otherwise inaccessible.
This includes content that originally does not exist in the document (i.e.,
generated content).

Only one pseudo-element may appear per selector.

The following pseudo-elements are available:
::first-letter
::first-line
::before, ::after

CSS3 uses '::' instead of ':' for pseudo-elements to distinguish

them from pseudo-classes.
For compatibility ':' can be used also.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 84 / 153
Pseudo-elements (2)

::first-line: represents the first formatted line of an element.

Példa:
p::first-line {
text-decoration: underline
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 85 / 153
Pseudo-elements (3)

::first-letter: represents the first letter or digit of an element, if it is

not preceded by any other content (such as images) on its line.
Also applies to any punctuation character that precedes or follows the
first letter.
Example:
p::first-letter {
font-size: 2em;
font-weight: bold;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 86 / 153
Pseudo-elements (4)

::before and ::after: they can be used to describe generated content

before or after an element’s content.
Example:
div.proof::before {
content: "Proof: ";
font-weight: bold;
}

div.proof::after {
content: "\220E" /* End of proof */
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 87 / 153
Combinators (1)

Descendant combinator:
Whitespace that separates two sequences of simple selectors.
If P and Q are two sequences of simple selectors, the selector P Q
represents elements matching Q that are descendants of elements
matching P.
Example:
thead th {
background-color: darkgrey;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 88 / 153
Combinators (2)
Child combinator:
A '>' character that separates two sequences of simple selectors.
If P and Q are two sequences of simple selectors, the selector P > Q
represents elements matching Q that are children of elements matching
P.
Example:
nav > div {
display: inline;
}

p > img:only-child {
margin-left: 0;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 89 / 153
Combinators (3)
Next-sibling combinator:
A '+' character that separates two sequences of simple selectors.
If P and Q are two sequences of simple selectors, the selector P + Q
represents elements matching Q that immediately follow an element
matching P.
The elements represented by the two sequences share the same parent in
the document.
Non-element constructs (e.g., text and comments) are ignored when
considering adjacency of elements.

Example:
h1 + p {
text-indent: 0;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 90 / 153
Combinators (4)

Subsequent-sibling combinator (CSS3):

A '~' character that separates two sequences of simple selectors.
If P and Q are two sequences of simple selectors, the selector P ~ Q
represents elements matching Q that (not necessarily immediately)
follow an element matching P.
The elements represented by the two sequences share the same parent
in the document.
Example:
img ~ span {
color: red;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 91 / 153
Grouping Rules (1)

Rules with the same declarations can be grouped together.

The selector of the grouped rule contains the selectors of the original
rules separated by ',' characters.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 92 / 153
Grouping Rules (2)

For example, the first three rules are equivalent to the fourth one:
h1 + p { text-indent: 0 }
h2 + p { text-indent: 0 }
h3 + p { text-indent: 0 }

h1 + p, h2 + p, h3 + p {
text-indent: 0;
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 93 / 153
Selectors Level 4 (1)

Specification: Selectors Level 4 (W3C Working Draft, 11 November

2022)
Changes since Level 3:
https://www.w3.org/TR/selectors-4/#changes-level-3
New features:
:any-link and :local-link pseudo-classes
:has() pseudo-class
:is() pseudo-class
:not(): takes a selector list as an argument
...

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 94 / 153
Selectors Level 4 (2)

:is() pseudo-class:
A selector of the form :is(X) where the argument is a selector list.
Also called matches-any pseudo-class.
Matches any element that can be matched by any of the selectors in
the list argument.
Useful for representing long selector lists in a more compact form.
Pseudo-elements are not valid within :is().
The specificity of the :is() selector is the specificity of selector with
the highest specificity in the list argument.
Browser support: https://caniuse.com/css-matches-pseudo

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 95 / 153
Selectors Level 4 (3)

:is() pseudo-class: for example, the following two style rules are
equivalent:
div:is( .note, .warning, .hint)::before {
/* ... */
}

div.note::before ,
div.warning::before ,
div.hint::before {
/* ... */
}

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 96 / 153
Other Uses of CSS Selectors

Web scraping:
Free and open source software:
Scrapy (written in: Python; license: New BSD License)
https://scrapy.org/ https://github.com/scrapy/scrapy
Parsel (written in: Python; license: New BSD License)
https://parsel.readthedocs.io/ https://github.com/scrapy/parsel

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 97 / 153
Specificity (1)

For each selector and declaration a specificity is calculated, which is a

vector (a, b, c) of length 3, where a, b, and c are non-negative integers.
The vectors are sorted in lexicographic order.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 98 / 153
Specificity (2)

A selector’s specificity is calculated as follows: the specificity of the selector

is a vector (a, b, c), where:
a is the number of ID selectors in the selector.
b is the number of class selectors, attribute selectors, and
pseudo-classes in the selector.
Selectors inside the negation pseudo-class are counted like any other,
but the negation itself does not count as a pseudo-class!

c is the number of type selectors and pseudo-elements in the selector.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 99 / 153
Specificity (3)

Specificity of a declaration:
Each declaration has the same specificity as of the selector of the style
rule it appears in.
Declarations that do not belong to a style rule (such as the contents of
a style attribute in HTML) are considered to have a specificity higher
than any selector.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 100 / 153
Calculating a Selector’s Specificity (1)

The specificity of the selector * is (a = 0, b = 0, c = 0).

Because it does not contain any ID selectors, class selectors, attribute
selectors, pseudo-classes, type selectors, or pseudo-elements.

The specificity of the selector div is (a = 0, b = 0, c = 1).

The specificity of the selector p::first-letter, a img, and h1 + p
is (a = 0, b = 0, c = 2).

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 101 / 153
Calculating a Selector’s Specificity (2)

The specificity of the selector div[class=nav] and the equivalent

selector div.nav is (a = 0, b = 1, c = 1).
The specificity of the selector #main *:lang(en) is
(a = 1, b = 1, c = 0).

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 102 / 153
Calculating a Selector’s Specificity (3)

The selectors from the examples in increasing order of specificity:

Selector Specificity
* (a = 0, b = 0, c = 0)
div (a = 0, b = 0, c = 1)
p::first-letter a (a = 0, b = 0, c = 2)
img h1 + p
div[class=nav] (a = 0, b = 1, c = 1)
div.nav
#main *:lang(en) (a = 1, b = 1, c = 0)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 103 / 153
Stylesheets of Different Origins

Multiple stylesheets of different origins may belong to a document.

Stylesheets may have three different origins:
User agent
User
Author

Origins are listed in increasing order of precedence.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 104 / 153
User agent stylesheets (1)

User agents must apply a default stylesheet.

For example, they provide a style rule specifying that the content of
the HTML em element is presented using an italic font.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 105 / 153
User agent stylesheets (2)

Firefox : the default stylesheet can be accessed as follows:

Type the following in the address bar: resource://gre-resources/
As a result, a directory is presented, in which the html.css is the
default stylesheet.
See:
https://searchfox.org/mozilla-central/source/layout/style/res/html.css

Chromium, Google Chrome : the default stylesheet to render HTML

documents: https://chromium.googlesource.com/chromium/blink/+
/master/Source/core/css/html.css

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 106 / 153
User Stylesheets

The user may be able to specify style information for a particular

document.
This is important to people with disabilities.
Related concept: web accessibility https://www.w3.org/WAI/
The Stylish extension for the Chromium, Google Chrome, Firefox, and
Opera browsers provides such functionality: https://userstyles.org/

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 107 / 153
Author Stylesheets (1)

In HTML, the link element associates an external stylesheet with the

document.
Example:
<link rel="stylesheet" href="style.css">

In HTML, the style element allows the direct embedding of style

rules in the document.
Example:
<style>
h1, h2, h3, h4, h5, h6 { font-variant: small-caps }
</style>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 108 / 153
Author Stylesheets (2)

In XML, the xml-stylesheet processing instruction associates an

external stylesheet with the document.
The processing instruction should occur before the root element of the
document.
Example:
<?xml-stylesheet type="text/css" href="style.css"?>
See: Associating Style Sheets with XML documents 1.0 (Second
Edition) (W3C Recommendation, 28 October 2010)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 109 / 153
Importing Stylesheets

The @import at-rule allows users to import style rules from other
stylesheets.
The URL of the stylesheet can be specified with the url() function or
as a string.
If an @import at-rule refers to a valid stylesheet, user agents must
treat the contents of the stylesheet as if they were written in place of
the @import at-rule.
Any @import at-rules must precede all other at-rules and style rules
with the exception of the @charset at-rule.
Example:
@import url(https://fonts.googleapis.com/css?family=Tangerine);
@import "default.css";

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 110 / 153
Important Declarations (1)

A declaration can be followed by the token '!' token and keyword

important.
Example:
color: red !important
Such a declaration overrides any other normal declarations.
See: Specificity – The !important exception (MDN)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 111 / 153
Important Declarations (2)

By default, rules in author stylesheets have higher precedence than

rules in user stylesheets.
Both author and user stylesheets may contain !important
declarations, and user !important rules override author !important
rules.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 112 / 153
Important Declarations (3)
Example:
<html lang="en">
<head>
<title>!important</title>
<meta charset="UTF-8">
<styl>
p {
background-color: cornsilk;
color: green !important;
}
</style>
</head>
<body>
<p style="background-color: aliceblue; color: red">
Hello, World!
</p>
</body>
</html>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 113 / 153
Calculating Property Values

The final value of a CSS property for a given element or box is the result of
a multi-step calculation:
Cascaded value: the result of the cascade.
Specified value: the result of the defaulting.
Computed value: the result of transforming a relative value to an
absolute one.
Used value: the result of formatting the document.
Actual value: the result of transforming the used value to be suitable
for a display environment.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 114 / 153
Cascading, Inheritance, and Initialization

Cascading: conflict resolution mechanism that is applied when

different declarations set a value for the same element/property
combination.
Inheritance, initialization: mechanisms that are applied when no
declarations try to set a the value for an element/property combination.
Relevant specification: CSS Cascading and Inheritance Level 3 (W3C
Recommendation, 11 February 2021)

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 115 / 153
Cascade (1)

Several different declarations can set the value of the same variable.
These declarations can be of different origins.
The cascade is the process during which it is determined which
declaration sets the value of a given property of a given element.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 116 / 153
Cascade (2)

The cascade determines the cascaded value of a property for an element as

follows:
The declarations that set the value of a property for the element are
identified and collected.
Remember that these declarations are provided by style rules or the
style HTML attribute.

These declarations are sorted by decreasing origin.

Declarations of the same origin are sorted by decreasing specificity.
In case of equal specificity the last declaration in document order wins.

The value of the property is set by the first declaration according to

this order.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 117 / 153
Rule Ordering (1)

The ordering of style rules may be significant.

The ordering is significant when more than one style rule with the same
specificity applies to an element.
In this case, the last declaration in document order wins.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 118 / 153
Rule Ordering (2)

For example, the first two rules will never be taken into account here:
a:active { color: red } /* (a = 0, b = 1, c = 1) */
a:hover { color: green } /* (a = 0, b = 1, c = 1) */
a:visited { color: black } /* (a = 0, b = 1, c = 1) */
a:link { color: blue } /* (a = 0, b = 1, c = 1) */
The correct order of these rules is the following (the first two rules are
interchangeable):
a:visited { color: black }
a:link { color: blue }
a:hover { color: green }
a:active { color: red }

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 119 / 153
Specified Value

The specified value the value of a given property that the style sheet
authors intended for that element.
If the cascade results in a value, then that is the specified value.
Otherwise, the specified value is determined by defaulting process.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 120 / 153
Defaulting

When the cascade does not result in a value, the specified value must
be found some other way.
Inherited properties draw their defaults from their parent element
through inheritance.
All other properties take their initial value.

Authors can explicitly request inheritance or initialization via the

inherit and initial keywords.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 121 / 153
Computed Value (1)

In general, a relative value is transformed to an absolute one when the

computed value is determined.
However, the computed value can be a percentage!
The result of determining the computed value is a percentage, when the
specified value is percentage that is relative to a quantity that depends
on the layout of the document.
Such percentages are transformed to absolute values when the used
value is determined.

The computed value is the value that is transferred from parent to

child during inheritance.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 122 / 153
Computed Value (2)
Example:
CSS:
section { font-size: 12px }
h1 { font-size: 1.5em }
HTML:
<section>
<h1>Introduction</h1>
</section>
The specified and the computed value of the font-size property of
the section element is 12px.
The specified value of the font-size property of the h1 element is
1.5em, it’s computed value is 1.5 × 12px = 18px.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 123 / 153
Used Value

Computed values are determined without formatting the document.

However, there are properties whose value may depend on the layout of
the document (e.g., height, width).
For such properties the used value is determined from the computed
value based on the layout of the document.
For all other properties, the used value is the same as the computed
value.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 124 / 153
Actual Value

The used value is transformed to the actual value based on constraints

of the display environment.
For example, the value of the font-size property may need
adjustment based on the availability of fonts.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 125 / 153
Inheritance (1)

Inheritance propagates property values from parent elements to their children.

Some properties are inherited, this means that, unless the cascade results in a
value, the value will be determined by inheritance.
For each property, the relevant CSS specification defines whether it is
inherited or not.
For example, the font-family, font-style, font-variant, font-weight,
font-size, and font properties are inherited.
For example, the margin-top, margin-bottom, margin-right,
margin-left, margin, and width properties are not inherited.

If the cascaded value of a property is the inherit keyword, the inherited

value becomes the property’s specified and computed values.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 126 / 153
Inheritance (2)

Example:
When no rules apply to the em HTML element below that set the value of
the color property, the element inherits the value of the property from the
span element (i.e., red).
<span style="color: red">
May the <em>force</em> be with you!
</span>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 127 / 153
Inheritance (3)

Example:
When the style rule below applies, a hyperlink inherits the value of the
color property from it’s parent. Thus, for example, the value of the color
property of the a element in the div element is green.
a:visited , a:link {
color: inherit;
}
<p style="color: green">
Click here: <a href="https://www.w3.org/">W3C</a>
</p>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 128 / 153
Initial Value
Each property has an initial value, defined in the relevant CSS
specification. The initial value can be defined to depend on the user
agent.
For example, the initial value of the background-color property is the
transparent keyword.
See:
https://www.w3.org/TR/css-backgrounds-3/#the-background-color
For example, the initial value of the color property depends on the user
agent.
See: https://www.w3.org/TR/css-color-3/#foreground

If the property is not an inherited property, and the cascade does not
result in a value, then the specified value of the property is its initial
value.
If the cascaded value of a property is the initial keyword, the
property’s initial value becomes its specified value.

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 129 / 153
Assignment (1)

Consider the following style rules in an author stylesheet associated

with a HTML document:
:lang( hu) { color: red }
div > p { color: blue }
#main > p.foo { color: yellow }
#main :lang( hu) { color: green }
div:lang( hu) p.foo:first-child { color: black }
What is the color of the text in the p element?
<div id="main" lang="hu">
<p class="foo">What is the color of this text?</p>
</div>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 130 / 153
Assignment (2)

Consider the following style rules in an author stylesheet associated with a HTML
document:
.movies > ul > li:not(:first-child) { color: navy }
h1 + ul li:first-child { color: gold }
ul > :nth-child( 2n + 1) { color: purple }
#ot li + :last-child { color: tomato }
*:not( [class]) + ul:first-child > li:first-child { color: silver }
What is the color of the text in each li element?
<section id="ot" class="movies">
<h1>The Original Trilogy</h1>
<ul>
<li>A New Hope</li>
<li>The Empire Strikes Back</li>
<li>Return of the Jedi</li>
</ul>
</section>

Péter Jeszenszky (DE-IK) Cascading Style Sheets (CSS) October 28, 2024 131 / 153