Core Concepts of Modern CSS

Explore the fundamentals of CSS by selecting HTML elements, applying styling rules, and using properties like color to turn plain HTML into visually stunning web designs.

Combine html and css by applying inline styles, internal styles, or an external stylesheet, with a practical example that uses a styles.css file to separate content from presentation.

Explore color and text manipulation with named colors, rgb, and hex values; set font family and size; adjust alignment, decoration, and line height; learn css shorthands.

Master core CSS concepts instead of memorizing every property; this lecture guides you to explore properties like text, text-align, letter-spacing, and whitespace using mdn previews, emphasizing concept-first learning.

Create your first CSS exercise by styling a headline and paragraph with teal color, centered alignment, and an underline, then adjust line height and letter spacing for readability.

Explore CSS selectors, including element, class, and ID selectors, attribute selectors with starts with, ends with, and contains, the universal selector, and grouping rules to target elements efficiently.

Explore how CSS cascade and specificity decide which styles win when multiple rules target the same element, including inline styles, IDs, classes, and the order of rules.

Explore CSS combinators and combinations, including adjacent, general sibling, direct child, and descendant selectors, plus chaining with class selectors, and understand how specificity influences applied styles.

Master pseudo classes and pseudo elements to extend CSS selectors, enabling hover effects, nth-of-type patterns, and first-letter styling, with practical examples.

Style the sign-up form using selectors and pseudo-classes, decorate labels with text-decoration, apply a background color to required inputs, uppercase country options, and add hover effect to the submit button.

Explore CSS sizes and units, including absolute lengths such as pixels and viewport lengths, and learn how rem targets the root for scalable typography while em depends on the parent.

Inherit styles across elements by setting the body font; most elements inherit it, while inputs and buttons may not unless you use inherit to enforce consistency.

Explore CSS concepts by mastering selectors (element, class, and descendant), manipulating text and color with properties, and applying shorthands while understanding order and specificity determine styles, with highest specificity prevailing.

Explore the CSS box model by examining its four components: content, padding, border, and margin, and how each creates space around text, images, and elements on a webpage.

Explore how the content box holds text, images, and videos, and its size with width and height. Learn about units like pixels, em, rem, and percent.

Explore how borders define an element’s visible boundary by composing width, style, and color, and see how radius and shorthand syntax change the box, with developer tools.

Learn how padding creates space between content and border, using shorthand or individual values, and see how box-sizing affects element size and margin.

Master the CSS margin: apply top and side margins with shorthand, and center elements using auto. Explore margin collapsing and how flexbox or grid prevent it.

Explore how the CSS display property transforms block, inline, inline-block elements, using divs and spans to show height, width, and padding, and how display none or visibility hidden affect flow.

Create a fixed 500x500 teal parent and center a white, one-third child using calc, with 20px padding and margin and a 5px dotted red border; use border-box for exact sizing.

Master the CSS box model and its four components: content area, padding, margin, and border, to lay out pages with space efficiency and precise element control.

Learn how document flow and positioning context influence how CSS places elements, then master positioning techniques to control layout and element relationships across webpages.

Explore the five position properties—static, relative, absolute, fixed, and sticky—and how they affect document flow, positioning context, and element placement using top, left, right, and bottom.

Explore how percentage widths relate to containing blocks in CSS, showing fixed elements use the viewport, absolute elements use the closest positioned ancestor, and relative elements rely on their container.

Learn how the overflow property controls content that exceeds its container, using visible, hidden, or scroll behaviors. Explore axis-specific overflow with overflow-y and overflow-x, and understand fixed positioning effects.

Master stacking context, stacking order, and z-index to control overlap. Learn how non-static positions create contexts, how DOM order and z-index decide who appears on top, including negative values.

Create a fixed top navigation bar that spans the full viewport width, with an overlapping logo, and use z-index to keep the title under the nav as you scroll.

Explore the five CSS positioning properties: static, relative, absolute, fixed, and sticky, and how they interact with document flow, containing blocks, stacking context, and the viewport.

Explore how fonts go beyond selecting a family and size, including their loading in the browser, who hosts them, and theoretical considerations. Apply these ideas to your own projects today.

Learn how font-family declarations pick Montserrat, Verdana, or the generic sans serif, and how browsers fall back to available fonts when a font isn’t found.

Explore how browsers pick fonts from CSS font-family, local system fonts, and webfonts like Google Fonts, and see how Montserrat is loaded; note the drawbacks of third-party fonts.

Self-host web fonts to improve security and privacy by downloading a font family, organizing a fonts folder, and using @font-face to load Montserrat with a 400 weight.

Self-host Google fonts by downloading the font family, placing it in a local fonts folder, and using an @font-face rule to load Montserrat regular 400 in CSS.

Explore how browsers load fonts from standard fonts, generic families like serif, installed local fonts, and fallbacks; learn to import fonts with font-face declarations, including Google Fonts.

Explore background images and the full background property, including when to use color versus shorthand. Learn how to resize and position images and apply best practices.

Use the background-image property to place images behind text and remove image tags. Manage sizing and repetition with background-size, cover, contain, and background-repeat to avoid cropping and preserve quality.

Position backgrounds with background-position using x and y values, including pixels, percentages, and center, ensuring the focal point stays visible when cropped, and chain backgrounds with comma separation.

Explore css filters such as blur and grayscale and apply drop shadows to images using the filter property. Create linear and radial gradients to enhance backgrounds with multiple colors.

Center the dog image with no-repeat and place a repeating flower pattern behind the stunning headline. Use background-size contain for the dog and shift the pattern vertically for readability.

Explore the core concepts of CSS for background images, gradients, and filters, and master practical techniques using background-image, background-size, background-position, background-repeat, and multiple images with fallbacks.

Explore responsive design with media queries to make websites look and function across mobile to desktop, hiding elements on small screens, rearranging content, and tweaking fonts and spacing for readability.

Master how the viewport meta tag sets the device width and initial scale to enable responsive behavior, then use media queries and Chrome's device toolbar to test at different breakpoints.

Learn to use CSS media queries with min-width, max-width, and orientation to tailor styles across viewports, and place queries last to honor the rule that the last declaration wins.

Apply responsive design with media queries to adjust a content card at 500px and 700px breakpoints, shrinking fonts, setting width to 300px, and doubling the text-to-button margin.

Apply a viewport meta tag and use media queries with min-width, max-width, and orientation for responsive design, placing them at bottom of stylesheet to keep breakpoints a handful and maintainable.

Explore flexbox to design flexible, responsive layouts such as navigation menus or card based layouts. Master container properties: flex direction, flex wrap, justify content, flex grow, flex shrink, and order.

Explore the flex container by using display flex, flex-direction (row, column, row-reverse, column-reverse) to shape the main axis, and align-items with justify-content for cross-axis alignment, plus flex-wrap, align-content, and gap.

Tune flex items by adjusting flex-grow, flex-shrink, and flex-basis to control how they fill or shrink along the main axis. Use the flex shorthand for a concise, combined setting.

Explore how order and align-self control item placement in a flex container, moving the last item to the front with negative order values while the dom order remains unchanged.

Center the main section with flexbox. Layout the form as a column flexbox, align items flex-start, and push the login button right with align-self flex-end.

Master flexbox fundamentals by configuring a flex container with direction, justify-content, align-items, flex wrap, align-content, and gap, then control order and align-self using the flex shorthand.

Explore the CSS grid, a powerful layout system for flexible, responsive web designs. Learn grid containers, grid items, grid lines, and properties like named template areas and automatic grid.

Explore creating a basic grid with display grid, define grid-template-rows and grid-template-columns, and use repeat with fr units to distribute space. Place items with grid-area and apply grid-gap.

Learn to use named template areas with grid-template-areas to layout header, main, and side regions across grid rows and columns, and reference them with grid-area.

Position grid items with justify-items and align-items, override with justify-self and align-self, and control overall placement using justify-content and align-content.

Discover how the implicit grid extends the explicit grid, with automatic rows and columns and grid-auto-rows, grid-auto-columns, and grid-auto-flow. Use auto-fit with minmax(200px, 1fr) for responsive layouts.

Practice using CSS grid to turn a simple shopping list into a responsive grid; define a three-column layout for item, amount, and price, and customize alignment, spacing, and header styling.

Master the css grid toolkit: define grids with display grid, set rows and columns, gaps, and areas, and control alignment with justify and align properties, auto flow, and auto fit.

Explore dynamic motions to create captivating user experiences by transforming elements, applying transitions and keyframe animations in two and three dimensional space.

Explore how to transform elements with CSS by rotating, translating, and scaling along x, y, and z axes, while learning about transform-origin and the shift to standalone transform properties.

Explore transitions in css by centering a box with flexbox and applying hover-driven transforms, and use the transition property for duration and timing functions like ease-in and ease-out.

Convert transitions to keyframe animations with @keyframes, set transform rotate from 0 to 45 degrees and background from teal to gold on hover, and apply duration and delay.

Create a looping css animation that moves a teal box through the corners of a 250x250 container using keyframes and translate transforms, starting after a 2-second delay.

Explore the core CSS concepts: transform for rotate, translate, and scale, transitions with duration and timing function, and keyframe animations with iteration count and fill mode.