CSS Basics in HTML — Styling Your Web Pages

HTML + CSS: Structure Meets Style

HTML provides the structure (the skeleton), and CSS adds the visual style (the paint, furniture, and decor).

Three Ways to Add CSS

There are three ways to integrate CSS with HTML.

1. Inline CSS

Apply styles directly to an element using the style attribute.

<p style="color: blue; font-size: 18px;">
  This paragraph is blue and 18 pixels tall.
</p>

Pros	Cons
Quick for testing	Hard to maintain
Overrides other styles	Mixes content with presentation
Useful for dynamic styles	Not reusable

2. Internal CSS

Place a <style> block inside the <head> of your HTML document.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
    .highlight {
      background-color: yellow;
    }
    #main-title {
      font-size: 32px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 id="main-title">Welcome</h1>
  <p>This is a blue paragraph.</p>
  <p class="highlight">This one has a yellow background.</p>
</body>
</html>

Pros	Cons
Centralized styles for one page	Doesn't scale across multiple pages
No extra HTTP requests	Increases page size

3. External CSS

Link to a separate .css file using the <link> tag.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Styled from an external file</h1>
</body>
</html>

styles.css:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}
h1 {
  color: #333;
  text-align: center;
}

Pros	Cons
Reusable across entire site	Extra HTTP request (but cached)
Clean separation of concerns	Requires file management
Cached by browser for faster loads	—

CSS Integration Methods — Which to Choose?

Class and ID Attributes

These HTML attributes connect elements to CSS rules.

<!-- ID — unique, targeted with # -->
<div id="header">Site Header</div>

<!-- Class — reusable, targeted with . -->
<p class="warning">This is a warning message.</p>
<p class="warning">This is another warning.</p>

/* ID selector */
#header {
  background-color: navy;
  color: white;
}

/* Class selector */
.warning {
  color: red;
  font-weight: bold;
  border: 1px solid orange;
}

CSS Selectors Introduction

Selector	Example	Targets
Element	`p { }`	All `<p>` elements
Class	`.card { }`	All elements with `class="card"`
ID	`#logo { }`	The element with `id="logo"`
Descendant	`div p { }`	`<p>` inside a `<div>`
Group	`h1, h2, h3 { }`	All headings

Basic CSS Properties

/* Colors */
color: red;                 /* text color */
background-color: #f0f0f0;  /* background color */

/* Sizing and spacing */
font-size: 16px;            /* text size */
margin: 10px;               /* space outside element */
padding: 15px;              /* space inside element */

/* Layout */
width: 100%;                /* element width */
border: 1px solid black;    /* border shorthand */

The Box Model — A Quick Introduction

Every HTML element is a rectangular box with four layers:

Layer	Role
Content	The actual text or image
Padding	Space between content and border
Border	The edge around the element
Margin	Space outside the border, between elements

.box {
  width: 200px;
  padding: 20px;       /* inside space */
  border: 2px solid black;
  margin: 15px;        /* outside space */
}

Try It Yourself

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin: 20px auto;
      max-width: 400px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .card h2 {
      color: #333;
      margin-top: 0;
    }
    .btn {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .btn:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Hello, CSS!</h2>
    <p>This card is styled entirely with CSS.</p>
    <button class="btn">Click Me</button>
  </div>
</body>
</html>

JavaScript in HTML — Add interactivity alongside styles
HTML Attributes — Class and ID attributes for CSS selection
HTML Text Formatting — Style text content

Key Takeaways

Concept	Summary
Inline CSS	Quick, element‑specific, not reusable
Internal CSS	`<style>` block, good for single pages
External CSS	Best practice, cached, site‑wide reuse
Classes	Reusable (`.` in CSS)
IDs	Unique (`#` in CSS)
Box Model	Content → Padding → Border → Margin
Selectors	Element, class, ID, descendant, group

HTML + CSS: Structure Meets Style​

Three Ways to Add CSS​

1. Inline CSS​

2. Internal CSS​

3. External CSS​

CSS Integration Methods — Which to Choose?​

Class and ID Attributes​

CSS Selectors Introduction​

Basic CSS Properties​

The Box Model — A Quick Introduction​

Try It Yourself​

🔗 Related Topics​

Key Takeaways​