CSS Essentials

discover how cascading style sheets control the display of HTML elements, set background colors, fonts, and alignment to create cohesive web pages.

Explore CSS syntax by learning how a selector targets elements, how a declaration block contains property/value pairs separated by colons, and how curly braces and semicolons structure styles.

Learn five CSS selectors—element, ID, class, universal, and grouping—and how selectors decide which elements to style, with class selectors most commonly used.

Explore element selectors that target HTML elements by their element name, such as body, h1, p, h3 and span, and see how color styles apply to each tag.

Explore how the ID selector uses the id attribute to target a single unique element, demonstrated with a blue, centered div, and why IDs must be unique on a page.

Learn how ID selectors target a single element with the hash, and why multiple elements with the same ID break styling and validation rules. Use unique IDs for correct CSS.

Learn how to use class selectors to target elements with a specific class by writing a period followed by the class name, and apply styling to the main block div.

select the universal selector, using an asterisk to target all html elements, then apply center text alignment and blue color to every element on the page.

Apply the grouping selector to apply the same styles to multiple HTML elements, such as h1, h2, and p, reducing duplicated CSS and ensuring consistent styling.

Learn three ways to add CSS to HTML: external CSS via a linked style sheet, internal CSS in the head, and inline CSS on HTML elements.

Learn to apply background colors in CSS using predefined names and formats like RGB, hex, and HSL. See inline CSS examples using background-color with Dodger blue and tomato.

Apply the color property to text in CSS by setting values like white or dodger blue, using semicolons, and refreshing the page to see the changes.

Learn to apply border color with the border property by declaring a 5px solid red border and refreshing to see the result, with an additional example of a black border.

Explore color values in css, including color names, rgb, hex, and hsl, and learn how rgba and hsla add transparency to html elements.

Learn to apply background images with background-image, control repeats with background-repeat (repeat-x, repeat-y, no-repeat), and position images using background-position.

Learn how the background attachment property controls whether the background image scrolls with the page or stays fixed, and how to set it.

Learn how to use the background shorthand in CSS to combine color, image, repeat, attachment, and position into one line, with examples showing fixed and scroll behaviors.

Learn how margins create space around elements by setting a 70-pixel margin on all sides with a div and a 1px solid black border, then inspect the result.

Set individual margins for top, right, bottom, and left in CSS and then apply a common margin for all sides with a practical example.

Learn how to condense css margin properties using shorthand notation, applying one, two, or three values to control top, right, bottom, and left margins.

Learn how padding creates space inside an element's borders in CSS, and how it differs from margins. Set padding for each side, as shown with a 70-pixel example.

Set individual paddings in css by defining top, right, bottom, and left values, and verify changes in the page inspector to apply distinct paddings to each side.

Learn how padding shorthand lets you define top, right, bottom, and left paddings in one line, using three-value and two-value forms for equivalent results.

Set height and width in CSS to define the element's content area, noting that padding, borders, and margins are excluded. Practice with a 100px tall, 500px wide box.