Introduction to CSS and How It Connects to HTML

🎨 Styling the web with Cascading Style Sheets

CSS (Cascading Style Sheets) is the language used to describe the presentation and design of a web page written in HTML. It controls layout, colors, fonts, spacing, and overall visual appearance, making web pages look attractive and user-friendly.

Here you’ll learn what CSS is, how it works alongside HTML, and the ways to connect CSS to HTML documents.

📁 What is CSS Used For?

Setting colors, fonts, and text styles
Creating layouts with grids, flexbox, and positioning
Adding spacing, margins, and padding
Styling responsive designs for different devices
Animating elements and transitions
Controlling the look of HTML elements consistently

🧱 CSS Basics

CSS consists of selectors and declarations. Selectors target HTML elements, and declarations define style properties and values.

Example CSS rule:

h1 {
  color: blue;
  font-size: 24px;
}

This targets all <h1> elements and sets their text color to blue and font size to 24 pixels.

🔹 How CSS Connects to HTML

There are three main ways to apply CSS to HTML:

Method	Description	Example
Inline CSS	Styles directly inside an HTML tag	`<p style="color: red;">Hello</p>`
Internal CSS	CSS inside `<style>` tags in the HTML `<head>`	`<style> p { color: red; } </style>`
External CSS	Separate `.css` file linked in HTML	`<link rel="stylesheet" href="styles.css">`

📌 Connecting CSS to HTML Example

External CSS File (styles.css):

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333333;
}

HTML File:

<!DOCTYPE html>
<html>
<head>
  <title>Styled Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>This page is styled with CSS.</p>
</body>
</html>

🔎 Important CSS Concepts

Concept	Description
Selectors	Target HTML elements (`h1`, `.class`, `#id`)
Properties	Style aspects like `color`, `margin`, `font-size`
Cascade	Rules for which styles apply when multiple rules conflict
Box Model	Model of element layout: content, padding, border, margin
Media Queries	Apply different styles based on screen size or device

🧩 Why Use CSS Separately from HTML?

Keeps structure (HTML) and style (CSS) cleanly separated
Enables reuse of styles across multiple pages
Easier to maintain and update website design
Improves page load performance by caching CSS files

💡 CSS Syntax Example

/* Select all paragraphs */
p {
  font-size: 16px;
  line-height: 1.5;
  color: #666666;
}

📚 Summary Table

Feature	Description
Language	Cascading Style Sheets (CSS)
Purpose	Style and layout of HTML content
Connection Methods	Inline, internal, external CSS
Key Concepts	Selectors, properties, cascade, box model
Benefits	Separation of concerns, maintainability

🔜 What’s Next?

Mastering CSS is essential for creating visually appealing and responsive websites. Explore layout techniques like Flexbox and Grid, and dive into animations and transitions in our HTML & CSS Essentials course!