Introduction to CSS

Welcome to the CSS for Beginners tutorial series on Scriptly. By the end of these 17 chapters you will be able to style any web page from scratch: readable typography, tidy layouts with Flexbox and Grid, responsive designs that work on phones, and smooth animations — all with hand-written CSS and no frameworks. This first chapter explains what CSS is and how a browser turns your rules into pixels.

What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton and content of a page, CSS is the skin, the clothing, and the furniture arrangement — it controls how things look: colours, spacing, fonts, and layout.

• Cascading — when several rules target the same element, the browser follows a defined order to pick a winner. You will master this in the variables and specificity chapter.
• Style Sheets — plain text files of rules. A stylesheet is nothing more than a list of "for this element, use these styles".

Anatomy of a CSS rule

Every CSS rule has two parts: a selector that picks the elements, and a declaration block of property–value pairs.

/* selector */
p {
  color: navy;          /* property: value */
  font-size: 1.125rem;  /* another declaration */
  line-height: 1.6;
}

Expected output: every paragraph on the page becomes navy, slightly larger than normal, with comfortable line spacing.

How a browser applies CSS

When a page loads, the browser performs a small pipeline on every visit:

1. It parses the HTML into the DOM (Document Object Model).
2. It parses your CSS into the CSSOM (CSS Object Model).
3. It combines both into a render tree — the list of visible nodes and their styles.
4. It performs layout (calculates size and position), then paint (fills in pixels), then composites.

This is why an unstyled page flashes white before styles arrive — a topic you will fix properly in Adding CSS to HTML.

Why CSS matters

• One file, every page — change your brand colour once and it updates across the whole site.
• Responsive design — the same HTML can look right on a 360 px phone and a 27" monitor.
• Accessibility — good CSS respects user font-size settings, supports keyboard focus, and keeps contrast readable.
• Performance — a small cached stylesheet loads once and styles every page instantly.

A first complete example

Here is a full, tiny page. Save it as index.html and open it in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My styled page</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f4f6fb; }
    h1   { color: #4f46e5; letter-spacing: -0.02em; }
    .card {
      background: white;
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, CSS!</h1>
    <p>This card has padding, rounded corners and a soft shadow.</p>
  </div>
</body>
</html>

Expected output: a light blue-grey page containing a white card with rounded corners and a soft shadow; the heading is indigo and tight-looking.

Common mistakes

• Styling by tag only — styling every <div> makes future changes painful. Prefer classes; you will see why in CSS Selectors.
• Learning properties before the box model — spacing surprises come from misunderstanding the box model, so keep The Box Model on your shortlist.
• Skipping structure — real stylesheets are organised: base styles, components, utilities. Even a comment header helps.

Practice checklist

1. Create index.html with the example above and change the heading colour to a hex value you pick.
2. Add one more declaration to .card — try border: 2px dashed #4f46e5;.
3. Open your browser's developer tools (F12 or right-click → Inspect) and toggle a style off to see the page change live.

Next: learn the three ways to attach CSS to a page and which one you should always use — Adding CSS to HTML.