CSS Introduction

April 3, 2026
#css #web-development #selectors #styling

Table of Contents

If you’ve already built a basic HTML page (like in our HTML Hello World tutorial), you’ve probably noticed that it looks pretty plain. That’s because HTML only defines the structure of a page — headings, paragraphs, links — but it doesn’t say anything about how those elements should look. That’s where CSS comes in.

CSS (Cascading Style Sheets) is the language that controls the visual presentation of web pages. It lets you change colors, fonts, spacing, layout, and much more. Every website you visit that looks polished and well-designed is using CSS under the hood.

In this tutorial, you’ll learn the fundamentals of CSS: how to add it to your HTML, how selectors work, and how to use common properties to style a page. By the end, you’ll build a fully styled web page from scratch.

How to Add CSS to HTML

There are three ways to apply CSS to an HTML document. Let’s look at each one.

Inline styles are applied directly to an HTML element using the style attribute. This is useful for quick, one-off changes but becomes hard to manage as your page grows.

<p style="color: blue; font-size: 18px;">This text is blue and 18px.</p>

Internal CSS is written inside a <style> element in the <head> of your HTML document. This keeps your styles in one place and is a good approach for single-page projects.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Internal CSS</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This text is blue and 18px.</p>
</body>
</html>

External CSS is written in a separate .css file and linked to your HTML using a <link> element. This is the recommended approach for most projects because it keeps your HTML and CSS separate, making both easier to maintain.

styles.css

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

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This text is blue and 18px.</p>
</body>
</html>

CSS Selectors

A CSS rule has two parts: a selector (which elements to style) and a declaration block (how to style them). The declaration block contains one or more property-value pairs wrapped in curly braces.

selector {
    property: value;
}

Let’s look at the three most common types of selectors.

Element Selectors

An element selector targets every instance of a given HTML tag. For example, this rule makes all <h2> elements dark green:

h2 {
    color: darkgreen;
}

Class Selectors

A class selector targets elements that have a specific class attribute. Class names are prefixed with a dot (.) in CSS. Classes are reusable — you can apply the same class to as many elements as you want.

<p class="highlight">This paragraph is highlighted.</p>
<p>This one is not.</p>

.highlight {
    background-color: yellow;
    font-weight: bold;
}

ID Selectors

An ID selector targets a single element with a specific id attribute. IDs are prefixed with a hash (#) in CSS. Each ID should be unique on the page — use it when you need to style one specific element.

<h2 id="main-title">Welcome</h2>

#main-title {
    font-size: 32px;
    text-align: center;
}

Common CSS Properties

Now that you know how to target elements, let’s explore the properties you’ll use most often.

Color and Background

The color property sets the text color, and background-color sets the background. CSS accepts named colors (like red), hex codes (like #ff0000), and rgb() values.

body {
    color: #333333;
    background-color: #f5f5f5;
}

a {
    color: rgb(0, 102, 204);
}

Font and Text

You can control typography with properties like font-family, font-size, font-weight, line-height, and text-align.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h2 {
    font-weight: bold;
    text-align: center;
}

Margin and Padding

margin controls the space outside an element (between it and its neighbors), while padding controls the space inside an element (between its border and its content).

Think of it like a picture frame: the padding is the matting between the photo and the frame, and the margin is the wall space between the frame and the next frame.

.card {
    margin: 20px;
    padding: 16px;
}

You can also set each side individually:

.card {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 16px;
    padding-right: 16px;
}

The Box Model

Every HTML element is rendered as a rectangular box. The CSS box model describes how the size of that box is calculated. From the inside out, the layers are:

  1. Content — the actual text, image, or other content
  2. Padding — space between the content and the border
  3. Border — a line around the padding (can be visible or invisible)
  4. Margin — space between the border and neighboring elements
.box {
    width: 200px;
    padding: 16px;
    border: 2px solid #333;
    margin: 12px;
}

In this example, the total horizontal space the element occupies is: 12px (margin-left) + 2px (border-left) + 16px (padding-left) + 200px (content) + 16px (padding-right) + 2px (border-right) + 12px (margin-right) = 260px.

To apply border-box sizing to all elements, add this at the top of your stylesheet:

*, *::before, *::after {
    box-sizing: border-box;
}

Putting It All Together

Let’s build a styled page using everything we’ve covered. Create two files in the same folder:

styles.css

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}

#page-header {
    text-align: center;
    padding: 24px;
    background-color: #2c3e50;
    color: white;
    margin-bottom: 24px;
}

.card {
    background-color: white;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 16px;
}

.card h3 {
    color: #2c3e50;
    margin-top: 0;
}

.highlight {
    background-color: #fff3cd;
    padding: 12px;
    border-left: 4px solid #ffc107;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Styled Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="page-header">
        <h2>My First Styled Page</h2>
        <p>Built with HTML and CSS</p>
    </div>

    <div class="card">
        <h3>What is CSS?</h3>
        <p>CSS controls how HTML elements look in the browser — colors, fonts, spacing, and layout.</p>
    </div>

    <div class="card">
        <h3>Why Learn CSS?</h3>
        <p>Every website uses CSS. Learning it gives you the power to turn plain HTML into something visually appealing.</p>
    </div>

    <p class="highlight">Tip: Use your browser's developer tools (F12) to inspect elements and experiment with CSS in real time.</p>
</body>
</html>

Save both files, then open index.html in your browser. You should see a dark header, two white cards with subtle borders, and a highlighted tip at the bottom — all styled with the CSS techniques from this tutorial.

What’s Next

You now know how to add CSS to a page, target elements with selectors, and use properties for color, typography, spacing, and borders. You also understand the box model, which is the foundation for all CSS layout.

From here, the natural next steps are learning the box model in greater depth, and then tackling layout techniques like Flexbox and CSS Grid that let you build more complex page structures.

Thanks for visiting
We are actively updating content to this site. Thanks for visiting! Please bookmark this page and visit again soon.
Sponsor