CSS3 Selectors, Cascade, Specificity, Basics Ultimate Guide

Explore what HTML is, including its role as a hypertext markup language, how browsers render it, and its history from HTML 1.0 to HTML5.

Explore the basic structure of an HTML document by outlining the doctype, html element, head and body, and show how the title and visible content are defined.

Explore how HTML elements, tags, and attributes form the structure of a document. Identify void elements and opening and closing tags and attributes like class appear in div and h1.

Explore block level versus inline level elements in HTML, including how they occupy space and lines. See divs, spans, and common inline tags like a, img, and input.

Explore HTML5, the latest version of HTML, with semantic elements that boost accessibility, plus SVG, Canvas, and built-in APIs like geolocation and localStorage.

Understand how css separates styling from html and serves as the web's styling language. Trace css evolution from css1 to css3, now modular with level 4 and no css4.

Learn the basics of CSS syntax by selecting an HTML element with a selector and applying styles within a ruleset's declaration block.

Explore how vendor prefixes enable experimental CSS features across browsers, using -webkit-, -moz-, -o-, and -ms- prefixes, and honor the cascade by letting the last understood declaration win.

Create a base project by building a simple code base with index.html and style.css, linking CSS in the HTML5 head, and applying a CSS rule to h1 on localhost.

Learn how to add comments in HTML and CSS, using correct syntax to explain complex selectors, comment out declarations, and improve readability and maintainability.

Apply inline styles directly to HTML elements using the style attribute to color headings from level 1 to 6 and control display without external CSS.

Learn how to use internal CSS styles with a style tag in the header to style page elements, replace inline styling, and improve maintainability for single-page designs.

Learn how to add external CSS styles with a link tag, create and link an external stylesheet, and apply rules to HTML elements for maintainable, centralized styling.

Learn how to add CSS styles to HTML pages using the @import rule, organize styles with multiple CSS files, and create a main container stylesheet that imports others.

Discover how JavaScript styles HTML elements by selecting them with methods like getElementsByTagName and getElementsByClassName, then applying the style property to change colors.

Learn how the element selector targets all HTML elements by tag name, overrides default browser styles, and applies styles like color and bold across multiple elements.

Master the class selector in CSS by targeting elements with a specific class attribute using the dot notation, overriding default browser styles to apply precise styling.

Group selectors with commas to apply the same rules to multiple elements, reducing CSS size. See practical examples with headings and paragraphs to demonstrate grouping of class and element selectors.

Master the id selector by styling element with a hash followed by its id name. Use ids once per page, as selector, with classes, and see element turn red.

This lesson explains the descendant selector in CSS, matching all elements that are descendants of a given ancestor, and demonstrates styling paragraphs inside a div while excluding siblings outside it.

Master how to combine element, class, and id selectors to target h1 elements with precision, and explore how multiple classes and ids influence styling and specificity.

Discover how the universal selector uses an asterisk to select every element on a page, enabling global styles. See its browser support and its roots in CSS2.1.

Explore the universal selector and its context in CSS, from selecting all elements to targeting only those inside a div, coloring them red with nested and descendant patterns.

Explore how CSS combinators connect selectors to define relationships, covering the four types: descendant (space), child (greater than sign), adjacent sibling (plus sign), and general sibling (tilde sign).

Master the child combinator in CSS, using the greater-than sign to select only direct children of a parent. Compare it with the descendant selector to style all descendants.

Master the adjacent sibling combinator (A + B) and how it selects an element immediately following another with the same parent. Use B + C to target consecutive siblings.

Explore how the general sibling combinator, denoted by the tilde, selects all siblings after a given selector within the same parent, and contrast it with the adjacent sibling combinator.

Apply all css combinators on a page by targeting paragraph elements inside a div, using descendant, child, adjacent sibling, and general sibling selectors, observing red and brown colors.

Learn how the css attribute selector and attribute presence selector target elements with specific attributes, like href and target, to style anchor tags and demonstrate practical examples.

Master the attribute equals selector to target elements by a specific attribute value, expanding on the presence selector. See anchors with href and target attributes styled by value.

Discover how to target h1 elements by id and class with the attribute equals selector in css, applying styles to first-heading id and heading2 classes.

Learn to use the attribute spaced selector to target elements by whitespace-separated attribute values, such as class and relation attributes, with the ~= operator.

Explore the attribute hyphenated selector to target hyphen-separated class values, like js-heading-one and js-heading-two, using the [class|='js-'] pattern to style grouped elements.

Discover how the attribute begins with selector targets anchor tags by href values starting with https or http, using the circumflex accent to demonstrate prefix-based styling.

Explore the attribute ends with selector in CSS3, using the dollar sign to target anchor href values ending with html or php, with color changes illustrating matches.

learn how the css attribute contains selector matches elements whose class attribute values include a specific string, using the asterisk wildcard to find partial matches.

Explore selecting elements with multiple attributes using CSS attribute selectors, including starts with, exact value, and contains, and combine them to apply styles.

Explore dynamic pseudo classes in CSS, including :active, :hover, and :focus, and learn how focusable elements and dev tools reveal interactive state changes in real time.

Improve links styling with CSS3 pseudo classes such as :link, :visited, :hover, :focus, and :active, and learn the crucial order that governs cascade and specificity.

Explore the :focus-within pseudo class and how it highlights a form's container when a child receives focus, improving user experience. Learn browser compatibility and see practical examples illustrating focus-within behavior.

Learn how the :target pseudo class styles the current fragment identifier identified by a URL hash with an id, enabling dynamic state styling of the targeted element.

Learn how to use the language pseudo class to style HTML elements by their language attribute in CSS, with a hands-on demonstration using dummy lipsum paragraphs.

Learn to use UI element states pseudo classes enabled, disabled, and checked to style inputs, radios, and checkboxes with visual cues like blue, red, and orange shadows.

Discover structural pseudo classes like :root and :empty that target elements by their place in the document tree. These selectors enable more precise selections beyond simple selectors or combinators.

Learn the :root pseudo class, which selects the root element, has higher specificity than the html selector, and enables global variables, styles, and definitions (including svg roots).

Explore how the :empty pseudo class selects elements that contain nothing or only an HTML comment, and how spaces around the comment affect this behavior.

Explore css3 selectors and cascade basics by mastering child element selection with :first-child, :last-child, :nth-child, and :nth-last-child, including :only-child and practical examples on lists.

Practice a simple rating system using the :nth-child() pseudo class, exploring exact, odd/even, and expression-based selectors, and compare first-child and last-child behaviors to highlight CSS specificity in action.

Discover how to select specific type child elements with type-specific CSS selectors like nth-of-type and nth-last-of-type, overcoming index-based limitations and clarifying the use of only-of-type and first-of-type and last-of-type.

Explore type-specific child selectors in css3, including :first-of-type, :last-of-type, :nth-of-type, and :nth-child. See how they select elements by type within a parent rather than by overall index.

Master the negation pseudo class in CSS3, using :not() to exclude elements by id, class, or other selectors. Learn practical examples with paragraphs, nth-child, and chaining for precise styling.

Explore chaining not pseudo-classes to apply an and-condition, styling paragraphs that lack both 'one' and 'two' classes with red while others stay green.

Explore how to combine multiple CSS pseudo classes to style elements, using :nth-child, :hover, :empty, and :not to target odd and even paragraphs with color changes.

Understand what pseudo elements are, how to style parts of elements like the first letter and first line, and add content before or after with the double colon syntax.

Discover how to style the first line with the ::first-line pseudo element, apply color and other text-related properties to block-level paragraphs, and combine it with pseudo-classes like :nth-child(odd).

Explore the ::first-letter and ::first-line pseudo elements and how they style the first letter or line of block-level text, including use with pseudo classes and inline-element limitations.

Explore styling techniques with the ::first-line and ::first-letter pseudo elements in CSS3, enabling readable, attention-grabbing paragraph typography through a step-by-step lab.

Style the selected text using the ::selection pseudo element. Define global selection styles and per-heading options (h1–h6) to customize backgrounds and text colors.

Learn how to generate content before and after an element using ::before and ::after, injecting text or images with the content property and inspecting their DOM impact.

Style the first line and first letter of generated content with ::first-line and ::first-letter, using before or after content and separate pseudo elements to apply bold, font size, and italic.

Explore enhancing links with CSS pseudo elements and attribute selectors to add emoji indicators, remove underlines, adjust color and size, and distinguish FTP, mail, and PDF links.

This lab demonstrates combining CSS pseudo elements with pseudo classes, using selectors like ::after, ::first-letter, and ::first-line, with chaining and hover to style non-empty list items.

Learn how CSS inheritance passes color and inheritable properties from a parent to its children, enabling global styles on HTML and body, with limits like borders and user-agent styles.

Learn to force inheritance in css using the inherit keyword to propagate color and font-size from a parent to child elements like anchor, span, and div.

Discover how CSS specificity assigns weights to selectors: id (100), class (10), element (1), and inline styles (1000); and how declaration order decides ties when weights are equal.

This lesson explains how the !important rule breaks the normal specificity order by adding 10000 points, altering element, class, id, and inline weights, and why this exception should be avoided.

Learn how the cascade resolves CSS conflicts by weighing weight, origins, and order. Observe inline styles and origins—user agent, author, and user—determine the final color.