Home > Chapter Review and Exercises > Chapter 11 - Intro to CSS
This chapter kicks off the Cascading Style Sheets (CSS) section of the book by introducing the basics of CSS. It is chock-full of essential information, including rule syntax, how styles are attached to the HTML document, and foundational concepts such as inheritance, the cascade (priority, specificity, and rule order), the box model, as well as the CSS units of measurement. Element selectors and grouped selectors are also introduced in this chapter.
In Chapter 11, you will learn the following:
• The benefits of using CSS for controlling presentation.
• The basics of how style sheets work in tandem with HTML markup.
• The parts of a style rule (selector, declaration, property, and value).
• The three methods for attaching style rules to HTML:
—— external style sheets (link and @import)
—— embedded style sheets (the style element in the head of the document)
—— inline styles (the style attribute applied directly to the element).
• How to write comments in style sheets (/* … */). NOTES
• How some elements inherit certain properties from the element in which they are contained (their parents).
• How the cascade determines which style rule applies when conflicting styles are applied to an element.
• The priority of style rule sources, from lowest to highest (browser default style sheet, user style sheet, author style sheet, styles marked !important by the author, styles marked !important by the user).
• How the specificity of the selector is used to settle conflicts in rules applying to a given element. More specific rules have more “weight” and override less specific rules.
• How the cascade uses rule order to determine which style rule wins when they have equal weight. The style listed last will be applied.
• The box model is part of the visual formatting system that assigns an implied rectangular box around all elements.
• A basic familiarity with the units of measurement in CSS, including the difference between absolute and relative units.
• Knowledge of extremely useful developer tools that are built into major browsers.
presentation (also presentation layer)
How the document is delivered to the user, whether rendered on a computer or mobile device screen, printed on paper, or read aloud by a screen reader.
style rule
Instructions for how certain elements should be displayed.
selector
The part of a style rule that identifies the element or elements to be affected.
declaration
The part of a style rule with the rendering instructions. It is made up of one or more properties and values.
declaration block
The curly brackets in a style rule and all the declarations they contain.
property
A characteristic of the element, such as size, color, thickness, and so on.
value
The specific setting for a property.
element type selector
Selects all the elements in a document of a given element type.
grouped selector
Provides a list of elements to be selected, separated by commas.
inline style
A style rule added with the style attribute right in the opening tag of the element it is affecting.
inheritance (in CSS)
Certain style properties are passed down from elements to the elements they contain (their descendents).
descendents
All elements contained within a given element.
child
The element(s) contained directly within a given element (with no intervening hierarchical levels).
parent
The element that directly contains a given element.
ancestors
All the elements higher than a particular element in the hierarchy.
siblings
Two elements that share the same parent.
cascade
A system for determining which style rule applies when there are conflicting rules applied to the same element.
user agent style sheet
The default style sheet that comes built into the browser (user agent).
user style sheet
Style rules created in the browser by the user.
author style sheet
Styles created by the developer of the website.
specificity
The concept that some selectors have more “weight” and therefore override rules with less specific selectors.
rule order
In the cascade, if there are conflicting style rules of equal weight, whichever rule comes last will apply.
box model
In CSS, all elements are contained in an implied rectangular box to which you can apply backgrounds, borders, padding, and margins.
grouped selectors
Selectors combined in a comma-separated list so you can apply the same properties to them all.
absolute units
Units of measurement that have predefined meanings in the real world, such as inches or picas.
relative units
Units that are based on the size of something else, such as ems and viewport units.
11-1: A first look
Readers will have the opportunity to create a simple style sheet in exercises throughout this chapter. In this first exercise, they simply take a look at the unstyled document in the browser to see the starting point.
11-2: Your first style sheet
This basic introduction to writing style rules includes rules for changing the appearance of h1 and h2 headings, paragraphs, and image position.
11-3: Applying an inline style
This exercise shows how adding an inline style overrides the styles applied with the style element.