CSS Introduction & Syntax

What is CSS and how does styling work?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

The CSS Rule-set Syntax

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

CSS Rule Structure

Try It Yourself »

/* Selector targeting all h1 headers */
h1 {
  color: #04AA6D;
  font-size: 32px;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Class selector */
.highlight {
  background-color: #fef08a;
  padding: 4px 8px;
  border-radius: 4px;
}

This rule centers all <h1> elements and paints them in signature green.

Three Ways to Insert CSS

1External CSS: Defined in an external .css file and linked in <head> via <link rel="stylesheet" href="mystyle.css">. (Best practice!)

2Internal CSS: Defined within <style> tags in the <head> section of an HTML document.

3Inline CSS: Defined directly in an element using the style attribute: <h1 style="color:red;">.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

What does CSS stand for?

Next: CSS Selectors »