Master CSS: Understand How To Manipulate CSS Properties

Explore practical css projects covering text properties, icons (font awesome and google icons), gradients, parallax, forms, tables, and advanced selectors to manipulate css properties.

Learn to create responsive layouts using CSS floats, insert content, and embed YouTube videos, building complex layouts from start to finish.

Learn border-box sizing to keep padding and borders from affecting width or height, and create equal one third, one fourth, one fifth, and one sixth layouts with floats, including galleries.

Master CSS animation through projects like a spinning image album and 3d cube, using transform, rotate, and transform-origin. Explore timing functions such as cubic bezier, ease, and step, plus direction.

Explore transition timing functions, including ease, ease in, ease out, and cubic bezier, and master 2D/3D transforms to build flipping pricing plans with linear gradients and font awesome icons.

Discover text editors for this CSS course, including Visual Studio Code, Notepad Plus Plus, Sublime Text, and Brackets, and note that Visual Studio Code is used with Google Chrome.

Explore Visual Studio Code basics, including color themes, keyboard shortcuts, font size, and settings to customize your workflow. Install essential extensions, especially Live Server, to enable live reload during development.

Import the all web lesson folder into Visual Studio Code, create your own folder, copy the files folder into it, and scaffold a basic HTML structure with lifesaver for auto-reload.

Learn the basics of CSS, including what cascading style sheets are, how they shape the visual representation of a website, and how selectors like type, class, and universal target elements.

Master CSS styling by understanding the trade-off between one-line minification and the best practice of placing each property on its own line, with examples like font size and color.

Master CSS teaches inline and internal CSS styling, showing how to apply color and font size using style attributes and a style element with selectors and properties.

Learn how to apply external styling with linked CSS files, internal and embedded styles, and the @import method, including proper link attributes, selectors, and properties like color.

Explore CSS colors, including web colors, hex codes, opacity, and rgb(a) or hsl(a) functions, and learn clean, aligned declarations for best practice.

Master CSS shows how to style text and backgrounds with keyword colors and hex values, using color and background-color properties; hex colors use codes, 0-9 and a-f, prefixed by #.

Learn how color values work in CSS using hex codes, web-safe colors, and opacity; explore the 216 web-safe colors, setting background and text colors, and using opacity for transparency.

Explore using the rgb(a) function to set color and background color in css, with rgb values from 0 to 255 and rgba alpha for opacity.

Explore how the hsl() function defines color using hue in degrees, saturation and lightness in percent, and observe black at l=0 and white at l=100 while experimenting with values.

Explore how to manipulate colors with the HSL function, control saturation and lightness to create grayscale, greens, and other hues, and apply opacity in CSS background color tweaks.

Learn how to use the HWB color function in CSS, including hue values (0–360), whiteness and blackness (percent), and optional alpha after a forward slash, with spacing and no commas.

Explore basic font properties—font size, style, variant, weight, and family—and learn to apply font property values, including Google font and CSS keywords like initial and inherit.

Explore how to manipulate typography in CSS using font-size, font-style, and font-variant. Learn to use length units, keywords, and caps variants like small caps, petite caps, and all caps.

Explains font size and font weight, including bold, lighter, and numeric 100–900, plus initial and inherit, font-style, font-variant, and line-height's effect on vertical spacing with practical examples.

Explore how to set font-family in CSS, choosing a primary font and fallbacks, handling single and multi-word names with quotes, and understanding browser defaults.

Discover how to use the shorthand font property in CSS to set font style, variant, weight, size, line height, and family, with guidance on one primary font and fallbacks.

Explore Google Fonts on fonts.google.com, browse fonts, and choose weights to tailor typography. Copy embed or import code, apply font-family in CSS, and understand fallback and offline download options.

Explore how CSS properties inherit from parent elements, distinguish initial browser defaults, and see how unset or on set values can behave like inherits or initial for font and color.

Explore absolute length units such as inches, centimeters, millimeters, points, picas, and pixels. Learn how to apply percentages, viewport width/height, viewport min/max, and em and rem in CSS.

Learn how CSS absolute length units work, including inches, centimeters, points, picas, and pixels, and apply them to font sizes and other length properties.

Explore CSS rem units, which multiply the root font size. By default 1 rem is 16 px, and changing the root font size scales all rem measurements.

Explain how em scales with the parent's font size, contrast it with rem which uses the root HTML font size, and show nested sections driving inheritance of computed sizes.

Explore css relative length units ex and ch; ex equals the height of the lowercase x, about half an em, while ch equals the width of the zero character.

Ex and ch depend on their own font size, while rem depends on the root font size and em depends on the parent. Learn absolute versus relative sizing.

Explore how percentage length units are relative to the parent's length properties, not only font size, through inheritance, affecting width, height, margins, border, and padding.

Explore how viewport length units vw and vh relate to the device viewport, compare them with percentages, and show that vw/vh are independent of the parent element.

Explore CSS viewport length units—vw, vh, vmin, and vmax—and how they size elements relative to width and height.

Explore CSS text properties, including text transform, letter spacing, text decoration, text shadow, box shadow, whitespace, word wrap, and text emphasis.

css teaches how to manipulate text with text-transform and text-align, showing how to apply uppercase, lowercase, capitalize, and inherit values, and align text left, right, center, justify, and last line.

Learn to use text-indent, letter-spacing, and word-spacing to control text, and explore rem and em units relative to root and parent font sizes, including percentage limits.

Explore how to use text-decoration in CSS to apply underline, overline, and line-through, and combine line types with styles, colors, and thickness for anchors.

Explore text-shadow and box-shadow in css, including offsets, blur, spread, color, and inset versus outside shadows, with quick notes on matching text decorations like double or dotted.

Explore CSS text emphasis by using text emphasis style and color, control position, and apply strings inside quotes with open shapes like sesame, triangle, circle, dot, and double circle.

Learn the CSS text-stroke property to outline text with a width and color, use -webkit prefixes for compatibility, and adjust thickness with examples like 6px.

Explore how word-wrap and word-break control long words and overflow in CSS. Learn values like break-all, break-word, keep-all, and normal to fit content inside a container.

Master CSS white-space property to control text flow inside containers, comparing normal, wrap, no wrap, pre wrap, pre, pre line, and break spaces for precise overflow handling.

Explore CSS inheritance and the cascading rule, and how styles apply across inline, internal, and external styles while learning best practices.

Explore how CSS inheritance cascades styles from parents to children through appearance, and learn to break inheritance by styling specific elements like HTML, body, section, or article.

Learn the css cascade rule, where styles cascade from top to bottom and the bottom-most rule among the same element, class, or id takes precedence.

Master css cascade rule part 2 shows that the next style takes preeminence, cascading left-to-right and top-to-bottom to determine font size, color, and text alignment.

Understand how the CSS cascade selects between inline, internal, and external styling for the same element, with the bottom-most style taking precedence.

Learn how to break the CSS cascade using !important to override bottom-up styles, applying it to font size, color, and text alignment across cascading rules.

Explore CSS selectors, compare id, class, and type specificity, and learn descendant and direct child selectors along with pseudo-class, pseudo-element, and universal selector usage.

Discover the three basic selectors in CSS—type selectors, class selectors, and ID selectors—and how inheritance and specificity levels (001, 010, 100) determine styling.

Compare id, class, and type selectors, noting id has the highest specificity (100) and can override class (010) and type (001). See cascading resolve which rule applies on same element.

Group and combine CSS selectors by using commas to target multiple selectors and by combining a selector with a type, then observe inheritance and specificity effects across elements.

Master grouping and combining CSS selectors by using a parent preselector with a child selector, and learn how inheritance, specificity, and nesting affect font size, color, and layout.

Explore how to merge selectors in CSS, balancing type, class, and ID specificity to override styles and create precise, maintainable rules.

Explore relational selectors to target descendants in CSS, including direct children, grandchildren, and great-grandchildren, by understanding parent-child relationships and nested elements.

Master CSS demonstrates direct child selectors with the > symbol, explains not a direct child to select non-descendants, and covers grandchild and specificity concepts with practical examples.

Master CSS relational selectors by learning adjacent and general sibling selectors, selecting elements that come directly after each other or share the same parent, including direct-child concepts.

Explore structural child pseudo classes in CSS, including first child, last child, and only child, and learn how to target inline and block elements and avoid repetition with grouping.

Explains end child and nth-child pseudo-classes, including last-child, even/odd patterns, and offsets via n plus b, showing how to target elements by position and by descendant type selectors.

Understand end-child and last-child selectors, using nth-child patterns like two n plus one, a n plus b, or a n minus b to count odd, even, or multiples.

Learn the structural type pseudo class, including first of type, last of type, and only of type, and how it combines with the first child, last child, and nth-child selectors.

Demonstrate the structural type pseudo class concepts, including end of type, first/last/only, and odd/even with offsets and the cascading rule.

Explore link pseudo-class selectors in CSS, including link, visited, hover, and active states for anchors, and understand class-based styling, text-decoration, and target='_blank'.

Discover how to style forms with enabled and focus pseudo selectors, link labels to inputs, and use place order and checked to control text, color, and shadows.

Explore CSS content property with after and before pseudo elements, including textual selectors like first letter and first line, and style color and font size.

Explore specialized selectors in CSS, including universal selectors, class selectors, negation selectors, and the selection pseudo-element, with notes on specificity and practical styling implications.

Learn how to disable text selection on your site using the CSS user-select property with the value none, preventing users from selecting specific elements or the entire page.

Master CSS attribute selectors by learning present, equals, and contains variants, using square brackets to target elements by attribute name and value, with attention to case sensitivity.

Learn how attribute selectors target elements by their attribute values using begins with, ends with, and contains patterns, using square brackets and exact equals syntax.

Explore attribute selectors in CSS, focusing on includes and hyphenated selectors, using attribute name and value, case sensitivity, and practical examples with title, class, and type, and contains selectors.

Master the :has() pseudo class selector to target divs by their descendants, such as p, h2, or img, and apply precise styling like color and font size.

Learn to use the :has() and :root selectors to change the page background based on checked options, with root as the body and direct children under site team.

Explore nested selectors in CSS using the ampersand, nesting ul, li, and a, to style list structures, control inheritance, override colors, and switch to inline block.