← Back to tutorials

CSS Introduction

Learn the basics of Cascading Style Sheets (CSS) and how to style your web pages.

What is CSS? CSS Syntax CSS Selectors Adding CSS to HTML Common CSS Properties CSS Box Model Interactive Demo

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS is one of the cornerstone technologies of the World Wide Web, alongside HTML and JavaScript. It enables the separation of presentation and content, including layout, colors, and fonts.

Example:

Without CSS, web pages would be plain text on white background. With CSS, you can control colors, fonts, spacing, layout, and much more.

Key Benefits of CSS:
  • Separation of Concerns: Content (HTML) and presentation (CSS) are separated
  • Consistency: Apply consistent styling across multiple pages
  • Efficiency: Change the look of an entire website by modifying one CSS file
  • Accessibility: Create different styles for different devices (responsive design)
  • Maintainability: Easier to maintain and update styling

CSS Syntax

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

selector {
property: value;
}
  • Selector: Points to the HTML element you want to style
  • Declaration: Contains property-value pairs that define the styling
  • Property: The style attribute you want to change (e.g., color, font-size)
  • Value: The value for the property (e.g., red, 16px)
Example:
h1 {
color: blue;
font-size: 24px;
}

This CSS rule will make all <h1> elements blue with a font size of 24 pixels.

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

Basic Selectors:
Selector Example Description
Element p Selects all <p> elements
ID #header Selects the element with id="header"
Class .intro Selects all elements with class="intro"
Universal * Selects all elements
Grouping h1, h2, p Selects all <h1>, <h2> and <p> elements
Examples:
/* Element selector */
p {
color: red;
}

/* ID selector */
#main-content {
background-color: #f0f0f0;
}

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

/* Grouping selector */
h1, h2, h3 {
font-family: Arial, sans-serif;
}

Adding CSS to HTML

There are three ways to add CSS to HTML documents:

Inline CSS is applied directly to an HTML element using the style attribute.


<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Note: Inline CSS is not recommended for large projects as it mixes content with presentation and is difficult to maintain.

Internal CSS is defined within the <style> element in the <head> section of an HTML page.


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Tip: Internal CSS is useful for single-page websites or when you have styles specific to one page.

External CSS is defined in a separate .css file and linked to the HTML document using the <link> element.

First, create a CSS file (e.g., styles.css):


body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Then, link it in your HTML file:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Best Practice: External CSS is the recommended method as it allows you to change the look of an entire website by changing just one file.

Common CSS Properties

Here are some of the most commonly used CSS properties:

Property Description Example Values
color Sets the text color red, #FF0000, rgb(255,0,0)
background-color Sets the background color blue, #0000FF, rgba(0,0,255,0.5)
font-size Sets the text size 16px, 1.2em, 120%
font-family Sets the font family Arial, "Times New Roman", sans-serif
margin Sets the space outside an element 10px, 5% 10px, auto
padding Sets the space inside an element 15px, 10px 20px
border Sets the border around an element 1px solid black, 2px dotted red
width Sets the width of an element 100px, 50%, auto
height Sets the height of an element 200px, 100%, auto
text-align Sets the horizontal alignment of text left, center, right, justify
Example using multiple properties:

.box {
width: 300px;
height: 200px;
background-color: lightblue;
border: 2px solid navy;
padding: 20px;
margin: 10px auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: darkblue;
}

CSS Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of:

Content
The actual content of the box
Padding
Clears an area around the content
Border
A border that goes around the padding
Margin
Clears an area outside the border
Box Model Example:

div {
width: 300px;
padding: 20px;
border: 5px solid gray;
margin: 10px;
}

In this example, the total width of the element would be:

width + left padding + right padding + left border + right border + left margin + right margin

300px + 20px + 20px + 5px + 5px + 10px + 10px = 370px

Interactive CSS Demo

Try adjusting the CSS properties below to see how they affect the element:

16px
20px
4px

This is a demo element

Change the properties above to see how CSS affects this element.

Generated CSS Code:

#demoElement {
background-color: #e9ecef;
color: #212529;
font-size: 16px;
padding: 20px;
border-radius: 4px;
}
Next: CSS Linking Methods