Skip to content

Basics

CSS (Cascading Style Sheets) is used to style HTML elements — controlling their layout, color, spacing, fonts, and more.

1. CSS Syntax

selector {
  property: value;
}

Example:

p {
  color: blue;
  font-size: 16px;
}

Output:

p {
  color: blue;
  font-size: 16px;
}

2. Adding CSS to HTML

There are 3 ways to apply CSS:

a) Inline CSS

<p style="color: red;">Inline styled paragraph</p>

b) Internal CSS (within <style> tag)

<head>
  <style>
    h1 {
      text-align: center;
      color: green;
    }
  </style>
</head>

c) External CSS (best practice)

Inside <head> in index.html

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

And in styles.css:

body {
  background-color: #f0f0f0;
}

3. Comments in CSS

/* This is a CSS comment */

4. Colors in CSS

You can use:

  • Named colors (red, blue, green)
  • Hex codes (#ff0000)
  • RGB (rgb(255, 0, 0))
  • HSL (hsl(0, 100%, 50%))
body {
  background-color: #121212;
  color: rgb(255, 255, 255);
}

5. Inheritance & Specificity

  • Some CSS properties (like color, font-family) are inherited by default
  • Specificity decides which rule wins if multiple styles apply
  • Inline > ID > Class > Element selector
<style>
  #heading { color: red; }
  .title { color: blue; }
  h1 { color: green; }
</style>

<h1 id="heading" class="title">Hello</h1>

Output color: Red (#heading wins)

6. Box Model

Every HTML element is a box made of:

+-----------------------------+
|        Margin               |
|   +---------------------+   |
|   |     Border          |   |
|   |  +-------------+    |   |
|   |  |  Padding    |    |   |
|   |  | +--------+  |    |   |
|   |  | | Content|  |    |   |
|   |  | +--------+  |    |   |
|   |  +-------------+    |   |
|   +---------------------+   |
+-----------------------------+