Home / CSS / Introduction

CSS Introduction

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Why Use CSS?

CSS is used to:

CSS Syntax

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

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

The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

How to Add CSS

1. Inline CSS

Use the style attribute inside HTML elements:

Example
<p style="color: blue;">This is a blue paragraph.</p>

2. Internal CSS

Use a <style> element in the <head> section:

Example
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

3. External CSS

Link to an external CSS file using the <link> element:

Example
<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS Selectors

CSS selectors are used to find (or select) HTML elements you want to style:

Example
/* Element selector */
p {
    color: red;
}

/* ID selector */
#header {
    background-color: blue;
}

/* Class selector */
.intro {
    font-size: 18px;
}

CSS Comments

Comments are used to explain code and are ignored by browsers:

Example
/* This is a single-line comment */

/*
This is a
multi-line comment
*/

CSS Cascading Order

When multiple CSS rules apply to the same element, the following order of priority applies:

  1. Inline styles (highest priority)
  2. External and internal style sheets
  3. Browser default

Next Steps

Now that you understand the basics of CSS, you're ready to learn about CSS Selectors in more detail.

← CSS Home CSS Selectors →