Jen Kramer
AnnieCannons
Course Description
Discover new HTML elements and CSS Selectors that you might not know! Learn the hard parts of CSS, including inheritance, specificity, and the cascade. Plus, get hands-on with modern CSS selectors like :is(), :where(), and :has()! With this knowledge, you'll be able to create web pages with fewer classes and more concise and meaningful HTML.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 8 minutes
Jen Kramer begins the course by sharing a few misconceptions about HTML and CSS and outlining the benefits of writing clean, semantic code. The course will utilize CodePen for most of the exercises. Links to all examples and resources can be found on the course website.
HTML Overview
Section Duration: 22 minutes
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.
Jen answers questions about the history of HTML, benefits of semantic markup, JavaScript dependencies, and accessibility.
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
Section Duration: 45 minutes
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.
Jen spends a few minutes explaining some common CSS terms, including rules, selectors, and declaration blocks.
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.
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.
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.
Students are instructed to style any link to a PDF file by adding the string "(PDF)" to the end of the link's text.
Jen demonstrates the solution to the Attribute Selector exercise.
Styling Elements
Section Duration: 1 hour, 18 minutes
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.
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.
Jen demonstrates how to change the list-style-type property of ordered lists. Preset values are available like upper-roman or lower-Latin.
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.
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.
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.
Students are instructed to add semantic markup to an ice cream recipe. Once the markup is added, CSS styling should be applied.
Jen codes the solution to the Lists exercise.
Semantic HTML
Section Duration: 37 minutes
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.
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.
Students are instructed to section the provided HTML using semantic elements.
Jen demonstrates the solution to the Content Sectioning exercise.
Pseudo-Classes
Section Duration: 19 minutes
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.
Students are instructed to style a web page without using any CSS classes.
Jen demonstrates one possible solution to the Styling Without Classes exercise.
Inheritance
Section Duration: 39 minutes
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.
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.
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
Section Duration: 31 minutes
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.
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.
Jen shares a specificity quiz that challenges students to calculate the correct 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.
Students are instructed to explain the CSS rules and calculate the specificity of each rule.
Jen explains the solution to the Specificity & Inheritance exercise.
Cascade
Section Duration: 26 minutes
Jen explains the cascade is responsible for identifying all the relevant styles to apply to the selection. This includes media queries and @supports statements.
Jen breaks down how the cascade determines the relevant styles based on the style's origin and the level of importance.
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.
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
Section Duration: 24 minutes
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.
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.
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.
Wrapping Up
Section Duration: 3 minutes
Jen summarizes the course and provides a few resources for further reading.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops