Learn CSS - For Beginners

Discover how cascading style sheets simplify web styling with reusable style rules, replacing table-based layouts, and enable site-wide updates by linking a single stylesheet to all pages.

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 the three types of css styles—internal, inline, and external—and learn to implement internal styles in the head, switch to external css, and prefer external styles over inline for efficiency.

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.

Learn how to create and apply CSS classes using the class selector in a style sheet, then use span tags to apply multiple classes to inline text.

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 to use CSS margins to create spacing around a div, applying top, right, bottom, and left margins with 10px, 30px, and 50px examples.

Learn how to use padding to create space between text and a div's edge, applying padding on all sides or on the top and left.

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.

Learn to place text on a background image using css with nested divs and id selectors. Configure width and height, padding, opacity, and white text in background and text box.

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 CSS static positioning works as the default in normal page flow, and observe how the position property governs a div example across static, relative, absolute, and fixed.

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.

Explore how absolute positioning fixes an element to an exact position, disregarding page flow during browser resize, while nested divs stay relative to their parent.

See how fixed positioning keeps an element stationary as the page scrolls, unlike absolute positioning. Observe the example with a large text block to show the scrolling behavior.

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.

Explore how the z-index property controls the stacking order of absolutely positioned elements, using a blue and yellow div example to show how higher z-index places a div on top.

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.

Create a three-column responsive web page in CSS, with a top navigation featuring hover effects and an active link, nested in a header, and stackable content areas with a footer.

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.

Create responsive CSS with media queries at 840px to stack the right column under the left and content columns, then at 600px stack left and right beneath the main content.

Build a page with a container, header navigation as an unordered list, a content wrapper with left and right columns, and inner text divs for padding, plus a responsive footer.