Getting Started

What is CSS?

CSS (Cascading Style Sheets) is the language used to style HTML documents. It controls the layout, colors, fonts, and overall visual appearance of a web page.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
}

Example

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

Tip: Always end each declaration with a semicolon. Missing semicolons are a common cause of broken styles.

Types of CSS

Inline CSS

Applied directly to an element using the style attribute.

<p style="color: red;">This is red text.</p>

Internal CSS

Written inside a <style> tag in the <head> section.

<style>
  p { color: red; }
</style>

External CSS

Linked via a .css file using the <link> tag. This is the recommended approach.

<link rel="stylesheet" href="styles.css">

CSS Selectors

Element Selector

p {
  color: green;
}

Class Selector

.highlight {
  background: yellow;
}

ID Selector

#header {
  font-size: 2rem;
}

Universal Selector

* {
  margin: 0;
  padding: 0;
}

CSS Comments

Comments are ignored by the browser and help document your code:

/* This is a CSS comment */
h1 {
  color: navy;
}

Common Errors

Missing closing curly braces or semicolons.
Misspelled property names.
Using incorrect selector syntax.
Forgetting to link the external stylesheet.

Practice Task

Create an HTML page with an external stylesheet. Style a <h1> with a color of your choice and a <p> with a class of intro that has a larger font size.