Table of Contents
Introduction
HTML Overview
HTML Elements Vocabulary
Jen explains HTML identifies the elements of the web page and is not responsible for the display of the page. CSS styling will control the presentation of the HTML content. The MDN web docs are a valuable reference guide for viewing information about each element.
HTML Elements Q&A
Jen answers questions about the history of HTML, benefits of semantic markup, JavaScript dependencies, and accessibility.
HTML Lists
Jen demonstrates ordered and unordered lists. They are two of the four list types in HTML. The other two lists types are description lists for name-value pairing and interactive lists for button groups.
CSS Overview
CSS Reset box-sizing
Jen introduces the box-sizing CSS property and explains why most CSS frameworks reset the value from content-box to border-box. When box-sizing is set to border-box, an element's overall width will include the element's content, padding, and border. This makes element sizing and layout more predictable. The ::before and ::after pseudo-elements are also introduced in this segment.
CSS Terminology
Jen spends a few minutes explaining some common CSS terms, including rules, selectors, and declaration blocks.
Class, ID, & Descendant Selectors
Jen reviews common CSS selectors, including selecting by class, id, and descendant. When styles are applied, they will be inherited by any nested elements unless a more specific rule is applied.
Parent-Child & Siblings Selectors
Jen explains parent-child selectors, general sibling selectors, and adjacent sibling selectors. The first sibling isn't selected with sibling selectors because it does not have a previous sibling. Only sibling elements that follow a sibling are selected.
Attribute Selectors
Jen introduces attribute selectors, which provide options for selecting elements based on an attribute text value. There are selectors for specifying an exact match or partial match based on the text's beginning, ending, or a substring it may contain.
Attribute Selectors Exercise
Students are instructed to style any link to a PDF file by adding the string "(PDF)" to the end of the link's text.
Attribute Selectors Solution
Jen demonstrates the solution to the Attribute Selector exercise.
Styling Elements
Ordered & Unordered List Styling
Jen explains how to use the :first-child, :last-child, :nth-child, and :nth-last-child pseudo selectors. These selectors will style elements based on their position within a parent. It can be a fixed position, like the 6th element, or a pattern like every 3rd element.
Styling List Item Markers
Jen styles unordered lists with both the list-style-type property and the ::marker pseudo-element. The list-style-type property can be set to any string value, including symbols or emojis. The ::marker pseudo-element helps utilize SVG graphics as the list element marker.
Ordered List Styling
Jen demonstrates how to change the list-style-type property of ordered lists. Preset values are available like upper-roman or lower-Latin.
Description Lists & Flexbox
Jen introduces description lists and styles them using flexbox. Descriptions lists can have a one-to-one or many-to-many relationship between the description term and the description definition elements.
Description Lists & CSS Grid
Jen uses CSS grid to fix the layout issues with description definition elements wrapping to a second row. The <dd> elements can be constrained to the second column with CSS grid.
Menu Lists
Jen explains that menu lists contain a group of interactive list items. Typically these items carry out an in-page task programmed with JavaScript. The menu element is the parent element for a list item, just like a ul or ol element.
Lists Exercise
Students are instructed to add semantic markup to an ice cream recipe. Once the markup is added, CSS styling should be applied.
Lists Solution
Jen codes the solution to the Lists exercise.
Semantic HTML
Semantic HTML Elements
Jen introduces the semantic elements used when sectioning off content on a page. Elements like header, footer, and section might appear multiple times throughout a page, depending on its architecture. Other elements like main should only appear once because they specify an area of focus.
Content Sectioning
Jen walks through how to apply semantic HTML to a page. A header and footer are applied. The links at the top are wrapped with a nav element. The figure and figcapture are used with the img element.
Content Sectioning Exercise
Students are instructed to section the provided HTML using semantic elements.
Content Sectioning Solution
Jen demonstrates the solution to the Content Sectioning exercise.
Pseudo-Classes
Level 4 Pseudo-Class Selectors
Jen introduces the :is(), :where(), :has(), and :not() pseudo-class selectors. Unlike older pseudo-classes like :hover or :before, these new level 4 selectors evaluate a condition to apply CSS styling. The condition is another CSS selector placed inside the parentheses.
Styling Without Classes Exercise
Students are instructed to style a web page without using any CSS classes.
Styling Without Classes Solution
Jen demonstrates one possible solution to the Styling Without Classes exercise.
Inheritance
What Inherits in CSS
Jen outlines the major components of CSS, which include inheritance, specificity, and the cascade. Inheritance allows styling applied to a parent element to be passed down to descendants unless specifically overridden.
CSS Inheritance Demo
Jen demonstrates CSS inheritance and how some properties are inherited while others are not. The :root selector, the difference between display:none; and visibility:hidden:, and the :any-link pseudo-class are also discussed in this segment.
Inheritance property & Values Demo
Jen demonstrates that properties with no inheritance can be forced to inherit using the "inherit" value. For example, setting border: inherit; will cause the element to inherit the border value from its parent. Canceling inheritance with the revert, initial, and unset keywords are also demonstrated in this segment.
Specificity
CSS Specificity Overview
Jen explains how specificity is calculated. The formula counts the number of IDs, classes, and type selectors. A rule with a higher specificity will override less specific rules.
CSS Specificity Demo
Jen uses a CodePen demo to gradually add more specificity to a CSS selector. This demonstrates how class selectors override element selectors and ID selectors override class selectors. This segment also briefly discusses inheritance and the cascade's effects on specificity.
CSS Specificity Quiz
Jen shares a specificity quiz that challenges students to calculate the correct specificity.
Combining Inheritance & Specificity
Jen demonstrates how specificity alone may not be enough to override some rules. Leveraging both specificity and inheritance is sometimes necessary to properly style descendant elements.
Specificity & Inheritance Exercise
Students are instructed to explain the CSS rules and calculate the specificity of each rule.
Specificity & Inheritance Solution
Jen explains the solution to the Specificity & Inheritance exercise.
Cascade
Understanding the Cascade
Jen explains the cascade is responsible for identifying all the relevant styles to apply to the selection. This includes media queries and @supports statements.
Cascade Overview
Jen breaks down how the cascade determines the relevant styles based on the style's origin and the level of importance.
Cascade Code Demo
Jen demonstrates how the cascade is affected by external stylesheets. External stylesheets have the same level of importance as CSS in a style block as long as the selectors have equal specificity. The !important keyword is also demonstrated in this segment.
CSS Cascade in Dev Tools
Jen uses the browser developer tools to inspect the CSS styling applied to a specific element on the page. Browser developer tools organize the style in order of specificity and will visually indicate which styles are overridden by more specific rules.
Layers
Layer & The Cascade
Jen explains the @layer CSS rule is used to declare a cascade layer and can also define the order of precedence when multiple cascade layers are present. Layers represent a way to group a set of styles and treat them with a specific level of importance.
Working with Layers
Jen demonstrates how to import an external CSS file as a layer into another style sheet. When working with CSS layers, styling conflicts can occur. A few techniques to override specificity issues are covered in this segment.
Managing Multiple Layers
Jen demonstrates how to manage multiple layers within a CSS file. Regardless of where the layers are declared, layer priority can be established using the @layer rule and ordering the layer names from least important to most important.
