The Complete CSS Course

Explore the background-color property by using color names, hex values, and rgba values; adjust opacity and visibility to control how the background appears on the page.

Learn how background images serve as an element’s background, how images repeat, and how larger images can cover the entire page, whether sourced from the web or your computer.

Learn to add a background image and control its repetition with background-repeat (horizontal, vertical, no-repeat), and use background-position to set the image location, such as right top.

Explore the outline-offset property to define the distance between an element’s border and its outline, adjusting pixel values to control the gap on a web page.

Explore how text spacing controls typography in CSS, including first-line indentation, letter spacing, word spacing, and line spacing, with pixel-based examples.

Explore the word-wrap property and related rules, including word-break and break-all, and learn how horizontal and vertical writing directions, such as left-to-right and right-to-left, affect text layout.

Explore font-style, font-weight, and font-variant options to control text appearance, including normal and italic styles, bold weights, and small-caps capitalization in CSS.

Explore how the CSS visibility property toggles elements between visible and hidden while preserving layout space, enabling use in complex menus, messages, and staged quiz answers.

Explore the box model that wraps every element with content, padding, borders, and margins, and learn how each part shapes the content area and surrounding space.

Explore the CSS padding property to control space around content by setting top, right, bottom, and left padding in pixels or percentages, and inspect padding versus margins.

Explore how width and height define an element’s size within the CSS box model, and how padding, borders, and margins shape the box using pixels and percentages.

Set and compare the max-width property for block-level elements to prevent them from stretching to the container edges, using a 700px example to control text wrapping.

Explore responsive design principles that make web pages look good and easy to use on desktops, tablets, and phones by adapting layout and content to fit any screen size.

Master the grid system by defining columns with grid template columns and setting widths like 100px or 200px, and adjust alignment with justify content and space between or around.

Learn how to create css animations with keyframes to transition styles—from red to green, or other colors—by defining frames, durations, delays, iteration counts, directions, and timing functions.

Learn how to create linear gradients with multiple color stops, control direction (top-to-bottom, left-to-right, diagonal, or angle), and apply transparency and repeating gradients with rgba.

Learn how the object-fit property makes images and videos fill or fit their containers, either preserving aspect ratio or stretching to occupy available space.