What is CSS? — CSS Styling

ANALOGY

HTML is the skeleton, CSS is everything else. If HTML is the bones of a building — walls, floors, windows — CSS is the paint, the furniture, the lighting, and the landscaping. The structure stays the same; CSS changes how it all looks and feels.

How you write CSS

CSS is made of rules. Each rule targets one or more HTML elements (the selector) and defines a list of declarations — property/value pairs that change how those elements look.

A CSS rule

css

/* Selector  Declaration block */
   h1        {
     color: #EDE8DC;      /* property: value */
     font-size: 2.5rem;
     font-weight: 700;
   }

Three ways to apply CSS

Inline, internal, and external CSS

html

<!-- 1. Inline — directly on the element. Avoid for anything but quick tests -->
<p style="color: red; font-size: 18px;">Red text</p>

<!-- 2. Internal — in a <style> tag in the <head>. OK for small single pages -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>

<!-- 3. External — a separate .css file linked in the <head>. Always use this -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>

TIP

Always use external stylesheets. Keeping CSS in a separate file means you can style multiple HTML pages from one place. Change the file once, update every page. This is how every real website works.