Introduction to CSS

CSS, which stands for Cascading Style Sheets, is the language used to describe how HTML elements should look when displayed in a browser. While HTML provides the raw structure and meaning of a web page — headings, paragraphs, lists, links, images — CSS is what transforms that bare structure into a visually designed experience. Without CSS, every website would look like a plain document: black text on a white background, with the browser's own default font and spacing applied inconsistently across different browsers and devices.

The separation of content from presentation is one of CSS's most important contributions to web development. When structure (HTML) and style (CSS) are kept in separate layers, a developer can completely redesign the visual appearance of a website by editing only the CSS, without touching a single line of the underlying HTML content. This makes websites dramatically easier to maintain, update, and hand off between team members. A content writer can update text in the HTML without worrying about breaking the design, and a designer can restyle the layout without disrupting the content.

The word cascading in the name is not decorative — it describes a fundamental mechanism of how CSS works. When multiple CSS rules target the same HTML element, the browser must decide which rule wins. It does this through a defined order of priority that takes into account three factors: specificity (how precisely a rule targets an element), source order (rules that appear later in the stylesheet override earlier ones when specificity is equal), and origin (author styles, user styles, and browser default styles each have different levels of authority). Understanding the cascade is essential for predicting and controlling how your styles are applied.

CSS controls an enormous range of visual properties. Among the most commonly used are:

• Color and background — text color, background color, background images, gradients
• Typography — font family, font size, font weight, line height, letter spacing, text alignment
• Spacing — margin (space outside an element), padding (space inside an element), border
• Sizing — width, height, minimum and maximum dimensions
• Layout — how elements are positioned and arranged relative to one another, including Flexbox and Grid systems
• Visual effects — opacity, box shadows, border radius, transitions, and animations

To understand how CSS and HTML work together, it helps to look at the anatomy of a CSS rule. Every CSS rule is made up of two parts: a selector and a declaration block. The selector identifies which HTML element or elements the rule applies to. The declaration block, enclosed in curly braces, contains one or more declarations, each consisting of a property and a value separated by a colon. Multiple declarations are separated by semicolons.

p {
  color: navy;
  font-size: 16px;
  line-height: 1.6;
}

In this example, p is the selector — it targets every <p> paragraph element on the page. Inside the braces, color, font-size, and line-height are properties, and navy, 16px, and 1.6 are their respective values. When a browser loads the page, it reads both the HTML and the CSS, matches each rule to the elements it targets, and applies the declared styles when rendering the visual output on screen. Without any CSS, the browser falls back to its own built-in default stylesheet, which varies between browsers and produces a generic, unstyled appearance.

There are three distinct methods for attaching CSS to an HTML document, each with its own syntax, scope, and appropriate use case: inline CSS, internal CSS, and external CSS.

Inline CSS is written directly inside the style attribute of an individual HTML element. Instead of writing a selector, you place declarations directly as the attribute's value, because the element itself is implicitly the target.

<p style="color: darkred; font-weight: bold;">This paragraph has inline styles.</p>

Inline styles are applied immediately and exclusively to the single element on which they are written. They do not affect any other element on the page, even other elements of the same type. This extreme specificity is actually a double-edged sword: inline CSS carries the highest specificity of all three methods, meaning it will override rules defined in both internal and external stylesheets for that element. While this can occasionally be useful for a targeted, one-off override, it creates serious maintenance problems at scale. Imagine a site with 200 paragraph elements all styled inline — changing the font would require editing every single element individually. For this reason, inline CSS is generally discouraged in professional practice and is best reserved for rapid testing, debugging, or situations where styles must be applied programmatically (for example, via JavaScript).

Internal CSS (also called embedded CSS) is written inside a <style> element placed within the <head> section of an HTML document. Unlike inline styles, internal CSS uses full CSS syntax with selectors, meaning a single rule can target every matching element on the page simultaneously.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Georgia, serif;
      background-color: #f4f4f4;
    }

    h1 {
      color: #333333;
      text-align: center;
    }

    p {
      font-size: 15px;
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <h1>Welcome</h1>
  <p>This page uses internal CSS.</p>
</body>
</html>

Because the styles live inside the HTML file itself, no additional file needs to be downloaded for the page to render correctly. This can be convenient for standalone, single-page projects, email templates, or quick prototypes. However, internal CSS becomes a significant liability when the same styles need to appear on multiple pages. If your website has ten pages all sharing a common header style and you store those styles internally in each file, updating that style requires editing ten separate documents. Any inconsistency introduces visual bugs. Internal CSS is therefore best suited to genuinely single-page use cases.

External CSS is the method used in virtually all professional, multi-page web projects. Styles are written in a completely separate file with a .css extension, and that file is linked to one or more HTML documents using a <link> element placed in the <head> section.

<!-- Inside index.html -->
<head>
  <meta charset="UTF-8">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>

/* Inside styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

h1 {
  color: #0056b3;
}

p {
  color: #444444;
  font-size: 16px;
}

With an external stylesheet, every HTML page that includes that <link> tag instantly inherits all of the defined styles. Changing one rule in styles.css updates the appearance of every linked page simultaneously. This is the principle of centralized styling, and it is the cornerstone of maintainable web design. External stylesheets also offer a meaningful performance benefit: once a browser downloads and parses a CSS file, it stores it in its cache. On subsequent page visits or when navigating to other pages on the same site, the browser can use the cached file instead of downloading it again, resulting in faster load times.

The following table summarizes the key characteristics of each CSS method side by side to make the distinctions clear:

Choosing the right method comes down to the scope and purpose of the styles you are writing. Inline CSS should be used sparingly and deliberately — it is appropriate when you need to override a style for one specific element without affecting anything else, or when you are adding styles dynamically through JavaScript. It should never become the primary styling strategy for a page, as it scatters presentation logic throughout the HTML and makes global updates nearly impossible.

Internal CSS earns its place when you are building something that is genuinely self-contained: a single HTML file that will not share its visual language with other pages, such as a standalone landing page, a code demo, or a templated HTML email where external file references may not be supported by email clients.

External CSS is the industry standard for any real website and should be the default choice whenever you are building more than one page. By centralizing all styling in one or more dedicated files, you gain consistent design across pages, clean and readable HTML, easier team collaboration, and the performance advantage of browser caching. Most large-scale projects go further by organizing their external CSS into multiple files — for example, one file for layout, one for typography, and one for components — which are then combined or imported as needed.

Understanding these three methods and when to reach for each one is the foundational skill that all further CSS knowledge builds upon. Every technique you learn from this point forward — selectors, the box model, layout systems, responsive design — will be applied through one of these three delivery mechanisms, with external CSS being the vehicle you will use most of the time.