Learn CSS - For Beginners

Explore the three parts of a css rule—selector, property, and value—and apply style rules to page elements, changing background color and typography for headings and body.

Explore how CSS uses RGB colors with color names, hex codes, and RGB values, and apply them to h1, h2, and h3 in a browser.

Explore divs in css, using div tags to replace table cells for flexible formatting, positioning, and styling like rounded corners and transparency; create and preview a basic div.

Learn how CSS ids differ from classes and apply an id to a div to control width, border, background, and text color, plus using a class for underlined text.

Learn how to use css text properties to format text, including color with web color code and rgb color code, plus letter spacing, word spacing, alignment, decoration, and transform.

Learn to use CSS font properties by creating a text style class that sets font family, size, style, and line height for a paragraph, and preview the results.

Explore adding borders around an element with a class, setting pixel thickness, choosing sides (top, bottom, left, right or all), choosing color, and applying a dashed border to a paragraph.

Learn how to apply backgrounds to a div using the CSS background property, including colors, images, repeat options, and center positioning in a style sheet and browser preview.

Set up a basic html structure and stylesheet, insert an image in a div, and use the opacity declaration to adjust transparency from 40% to 100% with a hover effect.

Learn how to control a div's size using width, height, min-width, max-width, min-height, max-height, and the viewport height (vh) unit to create responsive layouts.

Explore how the CSS display property controls visibility and positioning. View a hands-on demo with container and nested divs, using inline-block to align and display: none to hide one.

Learn how relative positioning uses top and left to move a static element, and how a nested div shifts 80 pixels from the top and left relative to its parent.

Learn how the css float property wraps images around text by creating a simple html page, applying float right or left with margins, and previewing the result in a browser.

Learn how the css clear property controls floating elements, preventing wrap-around, illustrated by a blue left-floated div, a red div's text that wraps, and a clear-declared yellow div.

Learn to style links in CSS by defining four states: unvisited, visited, hover, and active, using the a property and rules for color, text-decoration, and background color.

Explore how CSS tables enhance styling and responsiveness by applying borders, border-collapse, padding, and left alignment to table elements, and add a hover effect for improved interactivity.

Build a basic CSS page with body and header rules and a fluid three-column layout, including fixed side columns, a content wrapper, inner text styling, and a footer.

Style a horizontal navigation menu by floating list items, adding borders, and hover colors; make links display as blocks with centered white text and padding, highlighting the active link blue.