Table of Contents
IntroductionJen 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 Elements VocabularyJen 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 ListsJen 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 Reset box-sizingJen 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 TerminologyJen spends a few minutes explaining some common CSS terms, including rules, selectors, and declaration blocks.
Class, ID, & Descendant SelectorsJen 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 SelectorsJen 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 SelectorsJen 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 ExerciseStudents 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 SolutionJen demonstrates the solution to the Attribute Selector exercise.
Ordered & Unordered List StylingJen 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 MarkersJen 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 StylingJen demonstrates how to change the list-style-type property of ordered lists. Preset values are available like upper-roman or lower-Latin.
Description Lists & FlexboxJen 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 GridJen 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.
Lists ExerciseStudents are instructed to add semantic markup to an ice cream recipe. Once the markup is added, CSS styling should be applied.
Lists SolutionJen codes the solution to the Lists exercise.
Semantic HTML ElementsJen 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 SectioningJen 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 ExerciseStudents are instructed to section the provided HTML using semantic elements.
Content Sectioning SolutionJen demonstrates the solution to the Content Sectioning exercise.
Level 4 Pseudo-Class SelectorsJen 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 ExerciseStudents are instructed to style a web page without using any CSS classes.
Styling Without Classes SolutionJen demonstrates one possible solution to the Styling Without Classes exercise.
What Inherits in CSSJen 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 DemoJen 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 DemoJen 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.
CSS Specificity OverviewJen 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 DemoJen 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 QuizJen shares a specificity quiz that challenges students to calculate the correct specificity.
Combining Inheritance & SpecificityJen 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 ExerciseStudents are instructed to explain the CSS rules and calculate the specificity of each rule.
Specificity & Inheritance SolutionJen explains the solution to the Specificity & Inheritance exercise.
Understanding the CascadeJen explains the cascade is responsible for identifying all the relevant styles to apply to the selection. This includes media queries and @supports statements.
Cascade OverviewJen breaks down how the cascade determines the relevant styles based on the style's origin and the level of importance.
Cascade Code DemoJen 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 ToolsJen 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.
Layer & The CascadeJen 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 LayersJen 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 LayersJen 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.