Learn how to build and design websites with our tutorials.

Introduction to CSS and CSS3

View Tutorial Contents


What Is CSS?

Before learning CSS, you should have a basic understanding of HTML.

HTML is meant to define the parts of a web page, which are called HTML elements. CSS (cascading style sheets) allows you to add styles to your web pages and to be able to place the parts of a web page where you would like them to appear on a web page.


CSS Syntax


selector{ property: value; }

The syntax for CSS is a selector and declaration block. Together these is called a CSS rule.

The selector matches the HTML element that you want to apply the CSS styles to.

The declaration block is everything that is within the curly braces ({...}). It is made up one or more than one set of property and value pairs. Properties and values are separated by a colon (:). Each property and value pair is called a declaration.

Each declaration must end with a semicolon (;), except for the last one. Putting a semicolon at the end of the last declaration is not required but is a good practice.

CSS Example

The CSS below will give the level 1 headings of a web page a color of red.


h1{ color: red; }

The CSS below will make both the level 1 headings and paragraphs have a color of red.


h1, p{ color: red; }

CSS Spacing

You can space out your CSS to make it easier to read.

You can also make the CSS a little more readable by placing each declaration on different lines. Both examples below do the same and will work.


h1, p{
color: red;
}


h1, p { color: red; }


CSS Comments

You can add comments to your CSS that will be ignored by web browsers. A CSS comment starts with a forward slash immediately followed by an asterisk (/*) and ends with an asterisk immediately followed by a forward slash (*/).

Comments can span one or multiple lines. Adding comments to your CSS can be used to help explain certain CSS rules and styles. Below are some examples with CSS comments.


h1, p{
color: red;
/* this comment will be ignored by web browsers */
}


h1, p{
color: red;
/*
this comment will be ignored by web browsers
this comment will also be ignored by web browsers
*/
}


h1, p{
color: red; /* this comment will be ignored by web browsers */
}


CSS Selectors

A CSS selector is the part of a CSS rule that selects the HTML element(s) that you want to apply styles to.

The available CSS selectors are listed below.

You can also group selectors together.

This tutorial will only go over a few CSS selectors: universal selector, element type selector, ID selector and the class selector. I will go more go over every CSS selector and go more in depth on every one in another tutorial dedicated to CSS selectors.


CSS Universal Selector

The universal selector is an asterisk (*). When it is used alone, it selects all of the HTML elements on a web page. You can also use the universal selector in combination with other selectors.

The CSS below will apply a blue background to every HTML element in the web page.


*{
background: blue;
}


CSS Element (Type) Selector

The element selector, more commonly called the type selector, selects HTML elements based on the element name.

In the CSS example below, the element type selector p matches all paragraphs (<p>) within that web page.


p{
color: red;
}

In the CSS example below, the element type selector ul matches all lists (<ul>) within that web page.


ul{
list-style: none;
}


CSS ID Selector

An ID selector is meant to be unique. A particular ID selector should only be used once per web page. The CSS ID selector matches HTML elements that have the id attribute as part of the opening tag. To reference an id, precede the id name with a hash tag (#), also called a pound sign.

The ID selector name should include only letters, numbers and underscores (-)and hyphens (#) ok also. However, DO NOT begin an ID attribute name with a number.

For example, an HTML element with an id attribute and value of id="test" should have a corresponding CSS id selector of #test.


#red{
background: red;
}

The styles above will be applied only to the HTML element with an id attribute with a value of red shown below.


<p id="red">
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>


CSS Class Selectors

The class selector selects HTML elements with a corresponding class attribute. To select a class, begin by using the period (.), followed by the name of the class.

The rules for naming class selectors are the same as naming ID selectors

The class selector name should include only letters, numbers and underscores (-)and hyphens (#) ok also. However, DO NOT begin a class attribute name with a number.


.red{
background: red;
}

The styles above will be applied only to the HTML elements that have a class name of ".red" shown below.


<p class="red">
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p class="red">
This is a paragraph.
</p>


How To Insert Styles

There are three ways to insert CSS into your web pages.


External Style Sheets

It is best to use external style sheets when the styles are applied to more than one page, and even when applying the styles to only one page, it may be best to use an external style sheet.

An external style sheet must include only CSS styles, like the example shown below.


*{
color: black;
}
h1{
font-size: 1.5em;
}
p{
font-size: 1em;
}
.box{
background: gray;
}

An external style sheet must end with a .css extension, for example, my_styles.css.

Once the style sheet is created, it must be included within your web page (HTML document). To do this, you must include the <link> element within the <head> element. The <link> element is a self-enclosing element. You must include the attribute rel with a value of stylesheet and an attribute of href with the name and location of the corresponding style sheet.

The HTML code below shows you an example of what the <link> element should look like.


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

The example below shows you what a web page with an external style sheet should look like.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

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

</head>
<body>

<h1>
Level 1 Heading
</h1>

<p>
This is a paragraph.
</p>

<p class="box">
This paragraph has a class with a name of ".box".
</p>

</body>
</html>


Internal Styles

Internal styles, also called embedded styles, are styles that are embedded within the <head> section of a web page. The style element is used to include the styles.

Only CSS rules should be included within the <style> element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

*{
color: black;
}
h1{
font-size: 1.5em;
}
p{
font-size: 1em;
}
.box{
background: gray;
}

</style>

</head>
<body>

<h1>
Level 1 Heading
</h1>

<p>
This is a paragraph.
</p>

<p class="box">
This paragraph has a class with a name of ".box".
</p>

</body>
</html>


Inline Styles

The style attribute allows you to style a specific HTML element, however, it is not recommended that you use inline styles.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

</head>
<body>

<h1 style="color: blue; background: red;">
This is a Heading
</h1>

</body>
</html>