CSS3 Masterclass: Your Complete Beginner to Advanced Class

Discover CSS3, the latest style sheet language for web development, and learn how CSS3 decorates web pages, creates responsive layouts, and adds motion across devices and apps.

Set up the css3 environment with offline editors (Atom, Sublime Text, Brackets, Visual Studio Code) or online editors (Ben, Jess Ben, James Friedel, stack balloons) and test in Chrome or Firefox.

Explore how to apply inline styling with the style attribute to color text and adjust font size, with live preview. Master how inline styling uses semicolons to separate properties.

Learn internal or embedded styling with the style tag to target elements by tag, class, and id, create declaration blocks, and apply properties like color and text-align without inline styles.

Link a separate style.css file with a link tag and rel=stylesheet, apply selectors like h1 to change color and font-size, and reuse the same css across multiple pages for consistency.

Explore inline, internal, and external styling, learn selectors and declaration blocks, and understand properties and units in CSS, with exercises and resources.

Master CSS color formats from named colors and hex (three- and six-digit) to rgb() and hsl() with hue in degrees and saturation and lightness in percentages. Explore opacity and transparency options.

Explore how CSS handles transparency and opacity through hex values, rgba, hsla, named colors, and inheritance, including currentColor and the opacity property.

Explore color formats, including alpha transparency, and learn about the inheritance and current color property while applying colors to paragraphs or headings and answering brand-hunting questions.

Experiment with writing mode, unicode bidi direction, and text orientation to control inline and block text flow, including left-to-right and right-to-left layouts.

Explore CSS text-decoration concepts, applying underline, line-through, and overline with color and position options, and use writing-mode and direction to control how underlines render.

Learn to apply CSS text emphasis to characters, choosing style (circle, triangle, or a custom symbol), color, and position (over or under), with -webkit prefixes for browser support.

Explore the text-transform property in CSS by applying capitalize, lowercase, uppercase, and none to a paragraph, observing how each value changes letter casing.

Learn how the CSS whitespace property controls text wrapping and spaces with keywords normal, pre, no wrap, pre wrap, and pre line, illustrated by a paragraph example and browser behavior.

Explore the word-break property in CSS, including break-all, keep-all, hyphens none, and auto, and how the browser applies hyphenation to long paragraphs.

learn to use text-align to align headings and paragraphs with left, right, center, and justify, and apply word-spacing, letter-spacing, and text-indent for typography control.

Import a Google font into your project and apply font family, font size, font weight, font style, and line height, then learn how to upload a custom font.

Learn to work with font styles, including italic and oblique, and import custom fonts with @font-face, applying font-family and size to create typography in CSS3, including Google fonts.

Explore using line-height to control line spacing, reset margins and padding with the universal selector, and set font size using absolute and relative units in CSS paragraphs.

Learn to import Google fonts, set font-family, font-size, font-weight, and line height, and import custom fonts, with an exercise applying a Google font to an element.

Explore CSS selectors from universal and type selectors to class and id selectors, and learn descendant, child, and sibling combinators, plus attribute selectors, with hands-on examples.

Explore CSS selectors from the descendant selector to next and subsequent sibling combinators, practicing targeted styling of paragraphs, headings, and classes inside sections and divisions.

Learn how to use css attribute selectors to target elements by attributes such as title and lang, with exact, contains, starts with, ends with, and pattern matching conditions.

Explore how attribute value selectors work and how case sensitivity affects selection, using the title attribute and suffixes to enable case-insensitive matching.

Explore universal, type, class, and id selectors, and the descendant, child, adjacent sibling, and general sibling combinators, plus attribute selectors, with browser support and CSS level 4 references.

Explore how anchor elements respond to the link and visited pseudo-classes, using color changes to illustrate default blue, then green and purple as links are visited.

Learn how CSS3 pseudo-classes such as active, hover, and focus style anchor elements, and how default, visited, and interaction colors change, with keyboard navigation via the tab key.

Explains structural pseudo classes, focusing on the root keyword and the empty pseudo class, and demonstrates using variables defined with double hyphens and applying styles to empty elements.

Master the second part of css pseudo classes, including first-child, last-child, only-child, nth-child, and nth-last-child, with examples of immediate and descendant selectors inside the body and even and odd patterns.

Explore the first-of-type, last-of-type, and only-of-type selectors, plus even, odd, and nth variants, and learn to combine them with descendant, child, and sibling combinators to target elements precisely.

Explore CSS pseudo class patterns, including the a n pattern and the a n plus b format, and from last selectors to target alternating, even, and every nth paragraph.

Explore input pseudo classes in CSS, including enabled, disabled, read-only, and read-write; observe aquamarine, blue, and brown background changes and how elements can be edited or not.

Learn how the placeholder shown pseudo class works with an input element, using CSS to toggle placeholder visibility with opacity transitions, without JavaScript.

Learn how to use indeterminate, valid, and invalid pseudo-classes on radio and checkbox inputs, and validate an email field with required attribute and color cues.

Learn to style form inputs with CSS3 pseudo-classes by using in-range and out-of-range to validate number inputs, and optional and required to reflect field presence with color cues.

Learn to use the not pseudo class and other logical combinations to selectively style elements, with examples using paragraphs, first-child, and Safari versus Chrome support.

Learn how to use the lang pseudo class in css to target elements by language attribute, with en-us and en-gb examples that show color changes.

Learn to apply the first-letter, first-line, selection, and placeholder pseudo elements to style paragraph text, selection colors, and input placeholders, including drop cap sizing, blue first line, and 20-pixel indent.

Discover how to use before and after pseudo elements with the content property, create runtime content, and apply the target pseudo class to style elements on interaction.

Recap covers css pseudo classes and pseudo elements, and practice with type selectors and id selectors using # for ids, with hands-on exercises and a related article.

Explore generated content in CSS using before and after pseudo elements to insert text and images with the content property, including unicode entities.

Discover how to use counter and attribute with before and after pseudo elements. Reset and increment counters, and apply title and data-content attributes to paragraphs, including hover-driven content.

Master using unicode character entities in CSS with before and after pseudo elements, adding symbols such as rupee, alpha, and omega via the content property and referenced unicode codes.

Explore generated content for before/after elements, counters, and Unicode symbols; practice emoji entities and hex-based CSS content, and use resources to insert symbols and images.

Learn class and id naming conventions, starting with an alphabet and allowing underscores or hyphens, understand case sensitivity, and explore selector specificity and overriding with !important.

Explore how CSS specificity determines which styles apply by comparing type selectors, class selectors, ID selectors, and inline styles, and learn how the last winning rule overrides earlier ones.

Learn how CSS specificity and cascading determine which styles win, by counting IDs, classes, attributes, elements, and pseudo classes/elements, with examples using list items, title attributes, and the important flag.

Explore CSS specificity by analyzing how element, class, and pseudo class selectors—including negation and first-child—affect color and determine which rules win, while noting which selectors are ignored.

Learn the BEM design pattern for block element modifier, review its documentation, and organize CSS in a reusable, elegant way to make code easier to understand and apply.

Explore naming conventions, selector specificity and cascading in CSS, including the important keyword, a specificity hack, and a design pattern; then review related articles and tools in the resources section.

Explore values and units in CSS, distinguishing absolute units (px, pt, pc, q, mm, cm, in) and relative units, and learn when to apply them for web versus print.

Explore font relative units, focusing on em and rem, how base and root font sizes drive nested elements, and how 1em and 1rem scale with inheritance and root values.

Explore the ch and x units as font-relative measurements. See how their values rely on the width of character zero and the font's x-height, using CSS pseudo classes.

Explore viewport units in css, including vw, vh, vmin, and vmax, and learn how they scale with the viewport—min and max behavior guide responsive layouts.

Explore how percent heights and font sizes cascade from viewport to body to child elements, using 100% and 50% examples to show inheritance and percent-based sizing.

Explore angle units with transform and rotate to manipulate a div, and learn about degrees, radians, gradients, and turns, noting that frequencies are not covered.

Explore CSS duration units, including seconds and milliseconds, and apply smooth background color transitions on hover using the transition property, with timing like 2 seconds, 1 second, and 500 milliseconds.

Explore functional notation in CSS to build responsive elements using viewport height and width percentages, and set a minimum font size with viewport-based calculations.

Explore the difference between percentage and viewport units, and learn to use relative and absolute CSS units with practical calculators and conversion tools.