Untitled Quiz

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

How are Unicode characters specified in CSS?

Using the format \hhhhhh (correct)

Using the format $hhhhh$

Using the format /hhhhhh

Using the format \hhhhh

What must occur if fewer than six hexadecimal digits are used and a following character is in the range [0-9a-fA-F]?

The sequence must contain exactly six hex digits.

A whitespace character must follow the escape sequence. (correct)

A whitespace character must precede the escape sequence.

The escape sequence becomes invalid.

Which encoding is considered the default if no BOM or charset parameter is provided?

UTF-16

ASCII

ISO-8859-1

UTF-8 (correct)

What is the purpose of the escape character '' in CSS?

To escape special characters in selectors. Signup and view all the answers

What are CSS comments unable to do?

Be nested within one another. Signup and view all the answers

What does the box model generate that represents the formatting structure of a rendered document?

Box tree Signup and view all the answers

What is required at the very beginning of a stylesheet to set the character encoding?

@charset 'encoding'; Signup and view all the answers

Which of the following is true about special character escaping in selectors?

A '' character is required before special characters. Signup and view all the answers

Which component is NOT a type of property value in CSS?

Booleans Signup and view all the answers

What syntax is used to escape a delimiter character within a string in CSS?

\ Signup and view all the answers

Identifying identifiers in CSS, which statement is correct?

Identifiers are used for author-defined elements and are case-sensitive. Signup and view all the answers

Which of the following is not an example of a valid dimension in CSS?

25units Signup and view all the answers

What must be done to specify a newline in a CSS string?

Use '\A' Signup and view all the answers

Which of the following color formats is NOT valid in CSS?

hsl(360,100%,50%) Signup and view all the answers

Which is true regarding CSS keywords?

Keywords are ASCII case-insensitive. Signup and view all the answers

Which of the following statements about CSS specifications is correct?

They determine the type and order of components in property values. Signup and view all the answers

What does the attribute selector [att=val] match?

Elements with the att attribute whose value is exactly val Signup and view all the answers

Which attribute selector would you use to match elements whose attribute value begins with the specified string?

[att^=val] Signup and view all the answers

What is the purpose of the * in a CSS selector?

It matches all elements. Signup and view all the answers

Which attribute selector matches elements whose attribute value ends with a specified string?

[att$=val] Signup and view all the answers

Why is it recommended to include the * in selectors?

It enhances readability of the selectors. Signup and view all the answers

What does the attribute selector [att|=val] primarily target?

Elements with a value starting with val- Signup and view all the answers

What does the attribute selector [att*=val] do?

Matches elements with att attribute containing substring val. Signup and view all the answers

Which of the following selectors is considered equivalent in functionality?

[dir='rtl'] and [dir=rtl] Signup and view all the answers

What does the selector `tr:nth-child(2n)` specifically target in a table?

The even rows of the table Signup and view all the answers

Which statement about the selector `:not(.important)` is true?

It excludes elements with the class 'important' from selection. Signup and view all the answers

How does the `:first-of-type` pseudo-class relate to other selectors?

It functions similarly to <code>:nth-child(1)</code> but by type. Signup and view all the answers

What is the correct interpretation of the selector `tr:nth-last-child(-n+5)`?

It selects the last five rows of a table. Signup and view all the answers

What is a key characteristic of the negation pseudo-class `:not(X)`?

Only the argument is considered when determining specificity. Signup and view all the answers

Which selector is equivalent to `:last-child`?

:nth-last-child(1) Signup and view all the answers

How can the argument for `:nth-of-type()` be specified for odd elements?

as odd Signup and view all the answers

Which of these selectors would target every second row, starting from the first row?

tr:nth-child(2n-1) Signup and view all the answers

What file contains the default stylesheet for Firefox?

html.css Signup and view all the answers

What is the purpose of user stylesheets?

To specify style information for a specific document Signup and view all the answers

Which element in HTML directly embeds style rules in the document?

What is the function of the xml-stylesheet processing instruction in XML?

To associate an external stylesheet with the document Signup and view all the answers

How does the @import at-rule function in CSS?

It imports style rules from other stylesheets Signup and view all the answers

What is the purpose of the Stylish extension?

To provide functionality for user-defined styles Signup and view all the answers

What does the link element do in HTML concerning stylesheets?

It associates an external stylesheet with the HTML document Signup and view all the answers

Where should the xml-stylesheet processing instruction be placed in an XML document?

Before the root element Signup and view all the answers

What is the specificity of the selector `*`?

(a = 0, b = 0, c = 0) Signup and view all the answers

Which selector has a higher specificity: `div[class=nav]` or `div.nav`?

Both have the same specificity Signup and view all the answers

What is the order of specificity for the selector `#main *:lang(en)`?

(a = 1, b = 1, c = 0) Signup and view all the answers

Which of the following selectors has the highest specificity?

#main *:lang(en) Signup and view all the answers

What are the three origins of stylesheets mentioned?

User agent, User, Author Signup and view all the answers

How does the specificity of `div` compare to `p::first-letter`?

<code>p::first-letter</code> has higher specificity than <code>div</code> Signup and view all the answers

What is the default stylesheet provided by user agents for the `em` element?

Italic font Signup and view all the answers

Which of these selectors contains both class and type selectors?

div[class=nav] Signup and view all the answers

Study Notes

Cascading Style Sheets (CSS)

CSS is a style sheet language used for describing the rendering of structured documents like HTML and XML.
It supports rendering on various devices including screens, printers, and Braille devices.
CSS separates presentation style from document content, simplifying web authoring and maintenance.
Website example: https://www.w3.org/Style/CSS/

History

CSS was proposed by Håkon Wium Lie in 1994 while working with Tim Berners-Lee at CERN.
Website example: https://www.wiumlie.no/
Further Information: 20 Years of CSS (W3C)
A brief history of CSS until 2016

Development

Developed by the CSS Working Group of W3C.

Levels

CSS has levels instead of traditional versions.
CSS Level 1, 2, and 3.
Each level builds on the previous one, refining definitions and adding features.
Example: Levels, snapshots, modules... (W3C)

CSS Level 1

Cascading Style Sheets, level 1 (Superseded W3C Recommendation.)
Considered obsolete.

CSS Level 2

Defined by the CSS2.1 specification (single document).
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation, 7 June 2011)
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (W3C First Public Working Draft, 12 April 2016)

CSS Level 3 (1)

Currently under development.
Has a modular structure, broken into modules.
Each module adds functionality or replaces part of the CSS2.1 specification.
Modules have levels.
Modules with no CSS Level 2 equivalent start at Level 1.
Modules updating features from CSS Level 2 start at Level 3.

CSS Level 3 (2)

Different CSS modules have varying stability levels.
List of all CSS specifications: http://www.w3.org/Style/CSS/current-work.en.html
Examples of modules : Selectors Level 3, CSS Values and Units Module Level 3, CSS Transforms Module Level 1, CSS Transforms Module Level 2

CSS Level 3 (3)

CSS Snapshot 2023 (W3C Group Note, 7 December 2023)
Collects all specifications for the current state of CSS.
Primary audience is CSS implementers.

CSS Level 4 and Beyond

There is no CSS Level 4.
Independent modules can advance beyond Level 3, but the CSS language itself doesn't have levels.
"CSS Level 3" differentiates it from earlier monolithic versions.

Browser Support

Modern web browsers support most CSS 2.1 features.
They support some CSS3 features.
Example websites: https://caniuse.com/?search=CSS3, https://github.com/LeaVerou/css3test

Coding Styles

Google HTML/CSS Style Guide
Nicolas Gallagher: Principles of writing consistent, idiomatic CSS.

Editors (1)

Visual Studio Code (Free and open source software, platforms: Linux, macOS, Windows; license MIT)
Link: https://code.visualstudio.com/
Link example: https://github.com/Microsoft/vscode, https://code.visualstudio.com/docs/languages/css

Editors (2)

WebStorm (Non-free software, platforms: Linux, macOS, Windows)
Link: https://www.jetbrains.com/webstorm/
Documentation example: https://www.jetbrains.com/help/webstorm/style-sheets.html

Editors (3)

Emmet (written in JavaScript; license: MIT)
A set of text editor plugins for boosting HTML and CSS code writing.
Available for various text editors (Eclipse, NetBeans, Notepad++, Visual Studio Code, IntelliJ IDEA).
Documentation example: https://emmet.io/download/, https://docs.emmet.io/customization/, https://github.com/emmetio/emmet

Editors (4)

Examples of Emmet abbreviations (bd, bdt, bgc, and more)
Their expanded equivalents.

CSS Frameworks

Minimalistic CSS frameworks (Milligram, Pico CSS, Simple.css)
Links to websites, examples, and repositories.
Website Example: https://github.com/troxler/awesome-css-frameworks

Other Tools

Minifier tools (cssnano, CSSO)
Tools for minifying CSS.
Links to repositories or relevant websites.
Visual Studio Code tool: MinifyAll (written in TypeScript; license: GPLv3)

Online CSS Sandboxes

CodePen, JSFiddle, Liveweave.

File Properties

File extension: .css
IANA media type: text/css

Characters

CSS uses the Unicode character set

Escape Sequences (1)

Unicode characters are specified with escape sequences.
\hhhhhh sequences, where each 'h' is a hexadecimal digit, represent Unicode code points.
Whitespace after an escape sequence is ignored.

Escape Sequences (2)

Escaping special characters () is essential when selectors contain characters like periods.

Character Encoding

Character encoding is determined by BOM (byte order mark), charset parameter in Content-Type HTTP headers or @charset "encoding", followed by the stylesheet.
Default is UTF-8.

Comments

Comments are delimited using /* */,
Example: /* Style sheet for index.html */
Can exist anywhere except inside tokens and cannot be nested.

Box Model (1)

Relevant Specification: CSS Display Module Level 3 (W3C Candidate Recommendation snapshot, 30 March 2023)

Box Model (2)

CSS renders a source document into a box tree (intermediary).
Each box in the box tree represents an element in the document on a canvas.
CSS generates zero or more boxes for each element.
Elements can usually create one single box.

Properties (1)

Parameters to control document rendering.
Properties have names and values.
List of CSS properties: (W3C) - The total distinct property count is 602.

Properties (2)

Shorthand property: allows specifying multiple properties simultaneously.
For example : margin property sets margin-top, margin-right, margin-bottom, and margin-left.

Declaration Blocks

Start with '{' and end with '}'.
Inside, declarations follow the form name: value;
Whitespace is allowed before and after tokens (separated by ':').

Rule Sets (Style Rules)

Consist of a selector(s) followed by a declaration block.

At-rules

Define special processing rules.
Initiated with @ and an identifier.
Examples: @charset, @import, @namespace, @media.

Values (1)

Relevant specification: CSS Values and Units Module Level 3 (W3C Candidate Recommendation Draft, 22 March 2024)
Refers to more details (MDN).

Values (2)

Property values comprise multiple components (identifiers, strings, URLs, numbers, percentages, dimensions, colors).

Values (3)

Each CSS property's allowed component types, number, and order are detailed in its related specifications. Examples: text-transform, letter-spacing, border-color

Identifiers

Keywords are ASCII case-insensitive except components not under CSS control.
Used in counter names.
Identifiers are case-sensitive.
See: https://www.w3.org/TR/css-syntax-3/#ident-token-diagram

Strings

Character sequences delimited by ' or ".
Delimiters cannot appear inside strings (require escaping).
Example: 'It's So Cool', ""Good Morning, Frank," said Hal."

URL-s

Specifying URLs for elements like list-style-image (e.g., relative or absolute references for resolving against stylesheet URLs / @import).
url() function handling in cases like @import (bare strings used instead).

Numbers

Two types: integers (optional sign and one or more decimal digits) and real numbers (optional sign/digits/dot/e/E).
Properties may constrain numeric ranges and exclude negative numbers.

Percentages (1)

Consists of an integer/real number followed by '%'.
Values are relative to another quantity.

Percentages (2)

Examples provided, such as font-size: 75%;, width: 40%;

Dimensions

Consist of an integer/real number followed by an ASCII case-insensitive unit.
Represents quantities like length or angle.
For zero lengths, the unit can be omitted.

Lengths (1)

Lengths can be relative or absolute.
Relative examples are em, ex, ch, rem, vw, vh, vmin, and vmax.
Absolute examples include cm, mm, Q, in, pc, pt, and px.

Lengths (2)

Relative units (em, ex): relate to the font-size of the current/parent element.

Colors (1)

Relevant specification: CSS Color Module Level 3.

Colors (2)

Sixteen basic color keywords (aqua, black, blue, fuchsia...).
Modern browsers support more keywords.

Colors (3)

RGB color examples.

Colors (4)

The rgb notation accepts percentages for color values.

Selectors (1)

Relevant Specification: Selectors Level 3 (W3C Recommendation, 6 November 2018).
Selectors are used for pattern matching and applying style rules.

Selectors (2)

Selectors are generally case-insensitive within ASCII range, but exceptions exist.

Selectors (3)

Simple selectors: include type, universal, attribute, class, and pseudo-class selectors.

Selectors (4)

Combinators involve characters for relationships between selectors, like whitespace, >, +, ~

Selectors (5)

Sequences of simple selectors (separated by a combinator).
Begin with either a type or universal selector.

Selectors (6)

Selectors are chains of one or more simple selector sequences separated by combinators.
One pseudo-element could be appended to the final simple selector sequence.

Selectors (7)

Examples of selector usage (p, a img, h1 ~ table, div #main > h1, div > h1 + p, q::before).

Type Selector

CSS qualified name (often identifier).
Selects elements of the corresponding name.

Universal Selector

Written as '*'.
Matches all elements.
Omitting '*' might improve readability, but in most cases it is not recommended.

Attribute Selectors (1)

[att]: matches elements with an attribute named 'att'.
[att=val]: matches when att attribute's value equals 'val' exactly.
[att~=val]: matches when att attribute's contain 'val' as a whitespace-separated word.

Attribute Selectors (2)

[att|=val]: elements with attribute 'att', value is exactly val or starts with val- (common for language tags).
Example use with xml:lang and HTML lang.

Attribute Selectors (3)

[att^=val], [att$=val], [att*=val]: match elements with the 'att' attribute based on prefix, suffix, or substring matching.

Attribute Selectors (4)

In attribute selectors, the 'val' must be a CSS identifier or a string.

Attribute Selectors (5)

Selector examples for several attribute selectors (style[type=italic], style[type=bold], style[type = normal, a[hreflang=en])

Class Selector

For HTML, [class=val], .val are equivalent and used to select elements with a particular class.

ID Selector (1)

Selectors with the form #identifier match the element with the corresponding ID.
IDs are associated with the id attribute.

ID Selector (2)

Example selectors (div#main, #footer).

Pseudo-classes (1)

Selectors are case-insensitive and might use identifiers/values.
Pseudo-classes often refine selections.
Example : :visited, :link.

Pseudo-classes (2)

Link pseudo-classes (:link and visited) focus on whether a link has been visited.
For privacy reasons, there's a limitation using :visited on styling.

Pseudo-classes (3)

User action pseudo-classes (e.g., :hover, :active, :focus) describe behaviors related to user interaction with an element.

Pseudo-classes (4)

Example usage of dynamic pseudo-classes on  elements (such as :hover, :link, and :visited).

Pseudo-classes (5)

The :target pseudo-class deals with fragment identifiers in a URI reference.

Pseudo-classes (6)

:lang(C) (pseudo-class) represents elements in a particular language code (C).
Example use cases are specified.

Pseudo-classes (7)

Example use case for :lang pseudo-class with Hungarian quotations.

Pseudo-classes (8)

UI element state pseudo-classes: :enabled, :disabled, and :checked relate to button, checkbox states in user interfaces.

Pseudo-classes (9)

Structural pseudo-classes count elements when calculating position within a sibilng list, ignoring text & comment nodes.

Pseudo-classes (10)

Structural pseudo-classes (:root, :only-child, :only-of-type, :empty) help describe elements in the HTML structure.

Pseudo-classes (11) and (12)

:nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type pseudo-classes are structural and specify element position within a parent. These describe positioning as a function of siblings. The an + b notation is explained.

Pseudo-classes (13)

Examples usage of :nth-child and related classes on table rows (even/odd rows, nth row).

Pseudo-classes (14)

Structural selectors (:first-child, :last-child, :first-of-type, :last-of-type) are equivalent to simpler :nth-child and :nth-of-type forms.

Pseudo-classes (15)

The :not() pseudo-class is a negation pseudo-class that matches elements not matching the selector inside it.

Pseudo-classes (16)

:not() calculation specificity - the argument only is important in determining specificity, not the negation itself.

Pseudo-elements (1)

Pseudo-elements (::first-letter, ::first-line, ::before, ::after) are used to access and style content that doesn't directly exist as child elements.
Only one of them per selector.

Pseudo-elements (2)

Example styling :first-line elements (underlining the first line).

Pseudo-elements (3)

:first-letter affects the very first character (or punctuation around it) within an element's formatted line.

Pseudo-elements (4)

::before and ::after insert generated content before or after an element's content.

Combinators (1)

Descendant combinator (whitespace): selects elements that are descendants of one matching selector.

Combinators (2)

Child combinator (>): selects elements that are direct children of one matching selector.

Combinators (3)

Next-sibling combinator (+): selects elements that immediately follow another matching selector. Elements must share the same parent. Non-element nodes are ignored.

Combinators (4)

Subsequent sibling combinator (~): selects elements that are siblings of one matching selector, but aren't immediately following it.

Grouping Rules (1)

Grouping rules combine multiple selectors with the same declarations (using ',' separators).

Grouping Rules (2)

Example illustration of multiple equivalent rules being joined.

Selectors Level 4 (1)

Specification: Selectors Level 4 (W3C Working Draft, 11 November 2022).
:any-link and :local-link, :has(), :is() pseudo-classes as novelties/expansion.

Selectors Level 4 (2)

:is() pseudo-class matches an element that matches any selector from the list it was given.
This is useful for compact representation of selectors. Pseudo elements are not valid within :is().

Selectors Level 4 (3)

Example that showcases how :is() is used to express equivalent selector forms.

Other Uses of CSS Selectors

Web scraping: uses selectors to extract content from web pages
Example software: Scrapy, Parsel.

Specificity (1)

Calculation of specificity is based on a vector (a,b,c) - where a, b, and c are integers.

Specificity (2)

Specificity calculation explanation: details how a, b, and c are derived from the selector's components. Note: Negation pseudo-classes are treated normally when it comes to specificity.

Specificity (3)

Declaring specificity is calculated per style rule. Declarations not within style rules (such as HTML style attributes) are considered to have higher specificity than selectors.

Calculating a Selector's Specificity (1)

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

Calculating a Selector's Specificity (2)

The calculated specificity from examples including div[class=nav], div.nav, #main *:lang(en).

Calculating a Selector's Specificity (3)

Examples of selectors in increasing specificity order: *, div, p::first-letter, img + h1 + p, div[class=nav], div.nav, #main *:lang(en).

Stylesheets of Different Origins

Multiple stylesheets with varied origins (user agent, user, author) can apply.
Listed in increasing precedence (Order: User Agent, User, Author).

User agent stylesheets (1)

User agents use default stylesheets for presenting elements' content.

User agent stylesheets (2)

Example access methods to default stylesheets for Firefox, Chromium.

User Stylesheets

Users can create their custom style sheets for specific use (for example, people with disabilities).
Example using extensions.

Author Stylesheets (1)

HTML uses link elements to connect external style sheets.
Example link elements.
HTML uses the style element to embed style sheets directly in content.
Example of usage.

Author Stylesheets (2)

XML uses xml-stylesheet processing directives to reference external CSS sheets.
Examples of use.

Importing Stylesheets

Importing style sheets using @import rules (allowing rules to be imported from other style sheets).

Important Declarations (1)

!important keyword adds overriding declarations.
If rules are conflicting, the !important declaration takes precedence.

Important Declarations (2)

By default, style sheets have precedence over user stylesheets or user-agent stylesheets.
!important declarations always override author or user declarations by adding a higher priority to the statement.

Important Declarations (3)

Example that shows how user-agent and author style sheets with !important declarations are handled in the cascaded calculation.

Important Declarations (4)

Example of practical implementation with table CSS declarations, even/odd-row color variations, :hover interactions.

Calculating Property Values

Cascaded, specified, computed, used, and actual values: details the order and steps for calculating the final value of CSS properties. Steps include processing of cascade, defaulting, transforming values.

Cascading, Inheritance, and Initialization

Mechanisms for processing different declarations, handling inheritance, and finding initial values when no explicit rule applies. Specifications define this.

Cascade (1)

Various declarations associated with a variable (property) may be of differing origin (user-agent/author/user or other).

Cascade (2)

Declarations are ordered by origin (user-agent/author/user), then by decreasing specificity, and lastly by the order in which they appear in the document. The first-found applicable declaration determines the property value.

Rule Ordering (1)

Order of style rules might matter for when multiple of equal specificity are detected. The order in which the rules appear in the document usually decide the outcome.

Rule Ordering (2)

Example of various rules with differing specificity values, showing when order determines the final result.

Specified Value

The specified value refers to the value that was initially intended by the authoring person. It is obtained by applying the cascaded order and defaulting rules.

Defaulting

If no explicit declaration is found during cascading, the specified value is established via the defaulting process.

Computed Value (1)

Computed value transforms relative values to absolute ones. Example: percentages are transformed based on layout of the document.

Computed Value (2)

Example illustrating the transformation from relative 1.5em to a computed 18px font size in HTML for an element.

Used Value

Used values are calculated based on the document's layout for properties whose values might be affected by the layout. Otherwise, it's the same (computed).

Actual Value

Transforms the used value to an appropriate format for display, accounting for display constraints (like font availability).

Inheritance(1)

Propagation of property values from parent to child CSS elements. Some properties do inherit from parent elements, others do not (e.g color vs. font-family). Rules specify this behavior.

Inheritance(2)

Example illustrates when inheritance is used to determine property values when no rules apply to the current element.

Inheritance(3)

Example showing a :visited a:link with color: inherit.

Initial Value

Each CSS property has a defined initial value. Initial values can depend on the user agent type or specifications. If the cascade or inheritance do not provide any value, the initial value takes effect. inherit declaration will result in taking the parent's value

Assignment(1)

Example style rules & associated HTML structure for an assignment question to calculate property values to an element (p) with cascading rules in place.

Assignment(2)

Second CSS assignment example to demonstrate styling elements using various selectors & combinators.

Error Handling (1)

Details about sections in CSS Syntax Level 3 regarding error handling.

Error Handling (2) - (3)

Content in these slides was presented orally in the lecture.

Error Handling (4)

An example of when invalid style rules are not completely ignored, using examples to demonstrate their impact on the cascade rules.

Vendor Prefix (1)

Proprietary/experimental extensions are denoted by vendor prefixes.
CSS2.1 specification reserved prefix syntax.

Vendor Prefix (2)

Keywords/properties with - or _ are reserved for vendor-specific extensions.
Initial dashes/underscores will not be used in future CSS property names in order to avoid conflict.

Vendor Prefix (3)

Vendor-prefixed syntax removal is typical when unstable CSS properties are stabilized (Candidate Recommendation stage).

Vendor Prefix (4)

Notable vendor prefixes example: -moz-, -ms-, -webkit- from Mozilla/Microsoft/Apple, respectively.

Vendor Prefix (5)

The content is communicated verbally during the lecture.

Vendor Prefix (6)

Chromium does not use prefixes.
Browser settings provide control over experimental features.
Example link.

Vendor Prefix (7) - (8)

Examples of vendor-specific properties (:-moz-list-number).

Vendor Prefix (9)

Example of formerly unstable features (fit-content).

Vendor Prefix (10)

Example of using fit-content (with vendor prefix -moz) in combination with an unprefixed form as well for browser consistency.

CSS Object Model (CSSOM)

CSSOM gives JavaScript access to and manipulation of presentation styles.
It has an object model resembling the DOM.
Example of CSSOM usage (log methods) inside JavaScript code.

CSS Houdini (1) - (2) - (3)

Houdini is a set of low-level APIs for extending CSS's styling/layout.
Specification links and status/support links.
Listing of support/reference documentation websites.

Further Resources (1) - (2) - (3)

Listing of various types of reference/survey documentation websites.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.