HTML CSS

Inline CSS Styles

Inline CSS is applied directly inside your HTML tags using the style attribute. It lets you target a single element and change its styles instantly.

Because inline styles are applied directly to the tag, they have the highest specificity ranking and will override external stylesheets.

Example: Inline CSS Styles

<p style="color: blue;">Styled directly on the tag</p>

Internal CSS Stylesheets

Internal CSS collects your style rules into a single style block inside the head section of your page. This organizes your rules, keeps your layout code clean, and allows you to style multiple elements at once on a single webpage.

Example: Internal CSS Stylesheets

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

External CSS Stylesheets

External CSS is the industry standard for layout design. You write your style rules inside a separate .css text file and link it to your HTML documents using the link element.

This allows you to manage the design of thousands of distinct web pages from one single stylesheet file.

Example: External CSS Stylesheets

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Heading</h1>
  <p>This paragraph is styled by styles.css</p>
</body>

Understanding the CSS Box Model

Every element on a web page is treated as a rectangular box.

The CSS Box Model governs how these boxes are calculated, stacking four layers from the inside out: Content, Padding (blank space inside the border), Border (the frame outline), and Margin (blank space outside the border separating elements).

Example: Understanding the CSS Box Model

<div style="width: 200px; padding: 10px; border: 1px solid black; margin: 20px;">
  Content
</div>

CSS Cascading and Override Specificity

The C in CSS stands for Cascading. This means style rules cascade downward.

When multiple contradictory rules target the same element, the browser determines which rule wins based on three factors: Source Order (later rules override earlier rules), Specificity (ids beat classes, which beat tags), and Inline Override.

Example: CSS Cascading and Override Specificity

<style>
  p { color: blue; }
  p { color: red; }
</style>
<p>This text is red because the later rule wins.</p>

Why Inline Styles Are Bad Practice

Inline styles written directly on an element with the style attribute might feel quick, but they mix your content and your design together, making a site harder to maintain.

If you want to change one color across a hundred pages, you would have to edit every single element instead of one CSS rule.

Example: Why Inline Styles Are Bad Practice

<p style="color: red;">Page 1</p>
<p style="color: red;">Page 2</p>
<p style="color: red;">Page 3</p>

Class vs ID Selectors

A class selector (written with a dot, like .card) can be applied to as many elements as you want and is the standard way to style repeated components.

An ID selector (written with a hash, like #header) must be unique on the page and is meant for one specific element, like a page's main navigation bar.

Example: Class vs ID Selectors

<style>
  .card { border: 1px solid gray; }
  #header { font-weight: bold; }
</style>
<div class="card">Card 1</div>
<div id="header">Main Header</div>

Comparing the Three CSS Methods

Inline CSS is written directly on an element and only affects that one element. Internal CSS lives inside a style tag in the document head and affects the whole page it is written in.

External CSS lives in a separate .css file linked with a link tag and can be shared across every page of an entire website.

Example: Comparing the Three CSS Methods

<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    p { color: green; }
  </style>
</head>
<body>
  <p style="color: blue;">Inline wins here</p>
</body>