CSS Basics

CSS Introduction

Learn what CSS is, how it works with HTML, and why it is essential for web design.

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work — it can control the layout of multiple web pages all at once.

How CSS Works

CSS applies styles to HTML using selectors and declarations. A CSS rule consists of a selector and a declaration block:

selector { property: value; }

Three Ways to Apply CSS

  1. External — Link a separate .css file (recommended)
  2. Internal — Use <style> in <head>
  3. Inline — Use the style attribute on an element

The Cascade

"Cascading" refers to how CSS rules are applied in order of specificity and source order. When multiple rules apply to the same element, the more specific rule wins.

Example

css
/* External CSS (styles.css) */

/* Selectors */
h1 { color: #6C5CE7; }
.card { background: #111118; }
#hero { min-height: 100vh; }

/* The cascade - specificity order */
p { color: gray; }          /* 0-0-1 specificity */
.text { color: blue; }      /* 0-1-0 specificity */
#main p { color: green; }   /* 1-0-1 specificity */
p { color: red !important; } /* override everything (avoid!) */

/* CSS Variables */
:root {
  --primary: #6C5CE7;
  --bg: #0A0A0F;
  --text: #F0F0F5;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
Try it yourself — CSS