CSS Basics

Published on September 17, 2025

Welcome to the CSS Basics tutorial! In this post, we'll cover the fundamental concepts you need to start styling web pages.

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. It controls layout, colors, fonts, and more.

Applying CSS

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

Inline styles: using the style attribute directly on an element.
Internal stylesheet: placing CSS inside a <style> tag in the <head>.
External stylesheet: linking to a separate .css file using <link>.

Example: Inline vs External

// Inline style
<h1 style="color: #3b82f6;">Hello World</h1>

// External stylesheet (styles.css)
h1 {
    color: #3b82f6;
}

Selectors

Selectors target the HTML elements you want to style. Common selectors include:

element – selects all elements of that type (e.g., p).
.class – selects all elements with the specified class (e.g., .btn).
#id – selects the element with the specified ID (e.g., #header).
descendant – selects elements inside another element (e.g., nav a).

Box Model

Every element is a rectangular box consisting of:

Content – the actual text or image.
Padding – space around the content.
Border – the line surrounding the padding.
Margin – space outside the border.

Visualization

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

Next Steps

Now that you understand the basics, try experimenting with:

Flexbox and Grid for layout.
Responsive design with media queries.
CSS animations and transitions.

Happy styling!