CSS (Cascading Style Sheets)

This guide provides an introduction to CSS (Cascading Style Sheets), the language used to style and lay out web pages. It covers fundamental concepts, layout techniques, and practical examples designed to help you build structured and visually consistent websites.

1. What is CSS?

CSS stands for Cascading Style Sheets. While HTML provides the structural blueprint of a webpage (like headings, paragraphs, and buttons), CSS controls the visual presentation (colors, fonts, spacing, and layouts).

The term Cascading refers to the way CSS resolves conflicts when multiple rules apply to the same element. It uses a hierarchy based on specificity, inheritance, and source order to determine which style takes precedence.

2. How to Add CSS to HTML

There are three ways to apply CSS to an HTML document.

A. Inline CSS

Styles are applied directly to individual HTML elements using the style attribute. This is generally discouraged for larger projects because it mixes structure with presentation, making maintenance difficult.

<p style="color: blue; font-size: 16px;">This is inline styled text.</p>

B. Internal (Embedded) CSS

Styles are placed within a <style> element inside the <head> section of an HTML document. This is useful for single-page websites.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: darkblue;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

C. External CSS (Recommended)

Styles are written in a separate .css file and linked to the HTML document using the <link> tag in the <head>. This is the industry standard because it separates content from design and allows you to style multiple pages with one file.

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

CSS (styles.css):

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

h1 {
    color: darkblue;
}

3. CSS Syntax & Selectors

The Anatomy of a CSS Rule

A CSS rule-set consists of a selector and a declaration block.

selector {
  property: value;
}
  • Selector: Points to the HTML element you want to style (e.g., h1).
  • Declaration Block: Contains one or more declarations separated by semicolons.
  • Property: The style attribute you want to change (e.g., color).
  • Value: The setting you want to apply (e.g., red).

Common Selectors

1. Element Selector

Targets all elements of a specific type.

p {
  line-height: 1.5;
}

2. Class Selector

Targets elements with a specific class attribute. Class names are prefixed with a dot (.). You can use the same class on multiple elements.

/* CSS */
.highlight {
  background-color: yellow;
}

<!-- HTML -->
<p class="highlight">This paragraph has a yellow background.</p>

3. ID Selector

Targets a single element with a unique id attribute. ID names are prefixed with a hash (#). Each ID should only be used once per page.

/* CSS */
#main-header {
  text-align: center;
}

<!-- HTML -->
<h1 id="main-header">Main Title</h1>

4. Grouping Selector

Apply the same styles to multiple selectors by separating them with a comma.

h1, h2, h3 {
  font-family: sans-serif;
  color: #333;
}

4. The CSS Box Model

Every element on a web page is treated as a rectangular box. The CSS Box Model dictates how the size of these elements is calculated.

+-------------------------------------------+
|                  Margin                   |
|   +-----------------------------------+   |
|   |              Border               |   |
|   |   +---------------------------+   |   |
|   |   |          Padding          |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |   |      Content      |   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   +---------------------------+   |   |
|   +-----------------------------------+   |
+-------------------------------------------+
  • Content: The actual text, image, or media inside the element.
  • Padding: Transparent space around the content, inside the border.
  • Border: A line that wraps around the padding and content.
  • Margin: Space outside the border, separating the element from other elements.

Example Code:

.box {
  width: 300px;         /* Width of the content area */
  padding: 20px;        /* 20px space on all four sides of content */
  border: 5px solid black; /* 5px solid border around padding */
  margin: 15px;         /* 15px space outside the border */
}

box-sizing: border-box

By default, the browser calculates element width as:
$$\text{Width} = \text{declared width} + \text{padding-left} + \text{padding-right} + \text{border-left} + \text{border-right}$$

This often makes layout sizing unpredictable. To make sizing easier, you can apply box-sizing: border-box. This forces the padding and border to be included inside the declared width.

* {
  box-sizing: border-box; /* Applied globally to all elements */
}

5. Colors and Typography

Colors

Colors can be defined in multiple formats:

  • Color Names: red, blue, tomato
  • HEX Values: #ff0000 (Red), #ffffff (White)
  • RGB/RGBA: rgb(255, 0, 0) or rgba(255, 0, 0, 0.5) (The a represents opacity, ranging from 0 to 1)
  • HSL: hsl(0, 100%, 50%) (Hue, Saturation, Lightness)
body {
  background-color: #f4f4f4;
  color: rgb(50, 50, 50);
}

Typography

You can control the appearance of text using various font properties.

p {
  font-family: "Helvetica Neue", Arial, sans-serif; /* Fallback fonts are listed in order */
  font-size: 16px;                                  /* Size of text */
  font-weight: bold;                                /* Boldness */
  line-height: 1.6;                                 /* Spacing between lines */
  text-align: justify;                              /* Alignment */
  text-decoration: none;                            /* Removes underlines from links */
}

6. Layout Techniques

Modern CSS relies heavily on Flexbox (for one-dimensional layouts) and CSS Grid (for two-dimensional layouts) instead of older methods like floats or tables.

A. Flexbox (Flexible Box Layout)

Flexbox alignment is ideal for laying out elements in a single row or column.

To use Flexbox, set the display property of the parent container to flex.

HTML:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: space-between; /* Aligns items along the main horizontal axis */
  align-items: center;            /* Aligns items along the cross vertical axis */
  flex-direction: row;            /* 'row' (default) or 'column' */
}
  • justify-content values: flex-start, flex-end, center, space-between, space-around, space-evenly
  • align-items values: stretch, center, flex-start, flex-end

B. CSS Grid

Grid is designed for two-dimensional layouts, allowing you to control both columns and rows simultaneously.

HTML:

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 columns of equal fraction width */
  grid-gap: 10px;                         /* Spacing between rows and columns */
}

7. Positioning Elements

The position property specifies the type of positioning method used for an element.

  • static (Default): Elements render in order as they appear in the document flow.
  • relative: Positioned relative to its normal position. Using top, bottom, left, or right shifts it without affecting surrounding elements.
  • absolute: Positioned relative to its closest positioned (non-static) ancestor. It is removed from the normal document flow.
  • fixed: Positioned relative to the viewport. It stays in the exact same place even when the page is scrolled.
  • sticky: Toggles between relative and fixed depending on the user's scroll position.

Example of Relative vs. Absolute:

.parent-container {
  position: relative; /* Acts as the anchor point for the absolute child */
  width: 400px;
  height: 400px;
}

.child-element {
  position: absolute;
  top: 20px;
  right: 20px;        /* Positioned 20px from the top-right of the parent */
}

8. Responsive Design & Media Queries

Responsive web design ensures that a web page looks readable on all devices (desktops, tablets, and phones).

This is achieved using Media Queries, which apply different blocks of CSS code depending on the screen size or device characteristics.

/* Base styles for mobile devices (Default) */
body {
  font-size: 14px;
}

.sidebar {
  display: none; /* Hide sidebar on mobile screens */
}

/* Styles applied only when the viewport width is 768px or wider (Tablets and Desktops) */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
  
  .sidebar {
    display: block; /* Show sidebar on larger screens */
  }
}

The guide was created in June 2026.