CSS For Beginners

Explore CSS selector types, including element type, descendant, child, id, class, universal, general and adjacent sibling, and pseudo selectors and pseudo elements, with practical examples and order notes.

Explore the main CSS selector types, including universal, element, descendant, child, id, class, and sibling selectors. Learn about pseudo selectors and pseudo elements with practical examples.

Explore how specificity in CSS decides which rule wins when multiple selectors target the same element, using the calculation: ID 100, class 10, element 1, and inline style 1000.

Learn how CSS specificity decides which styles apply, comparing element, class, id, and inline selectors, and why prefer classes over ids and inline styles.

Learn to apply fonts in CSS by setting font-family to Arial with Helvetica as a fallback, and adjust font-weight, font-style, and font-size.

Explore the CSS box model, including content, padding, border, and margin, with shorthand properties and the box-sizing distinction between content-box and border-box to control element width and height.

Learn the css box model and box sizing to control element dimensions with width, height, padding, margin, and border, including content-box versus border-box and margin collapse.

Explore how to define colors in CSS using named colors, hex, rgb, and hsl, and learn to implement each approach in CSS.

Learn how to apply colors in CSS using named, hex, RGB, and HSL methods, targeting elements to display red and compare values.

Explore how CSS position types—static, relative, absolute, fixed, and sticky—affect layout, offsets, and overlapping with practical examples of top, left, width, height, and viewport references.

Explore how the CSS float property positions elements to the left or right, how floats interact with the document flow, and that the float is ignored when position is absolute.

Demonstrates floats in CSS, comparing float left with absolute positioning and how floated boxes interact with text. Also covers nth-child spacing to separate elements.

Explore how the CSS display property works, comparing common values like inline, block, and none. Analyze the differences between these display values and their effects on page layout using CSS.

Explore the CSS display property by demonstrating inline, inline-block, block, and none with spans, links, and divs; apply padding, margins, background colors, and text color to visualize behavior.

Explore CSS units, from absolute lengths like px to relative units such as em, rem, percentage, vh, and vw, and learn how each is defined in CSS.

Demonstrate absolute and relative CSS units, showing how 12px font size and 2rem scale to 32px and 64px, and how 100%, 50%, 300px, vw, and vh shape layouts.