CSS defines the look-and-feel of HTML elements. This is called styling.
A style is written as a rule-set which consists of a selector and a declaration block.
A selector defines which HTML elements are selected.
A declaration block lists properties, such as color or border, and their values.
In this example a single rule-set is defined with the name my-style
.
It is applied to a <div> element.
<style>
.my-style {
padding: 20px;
color: darkred;
background-color: gold;
}
</style>
<div class="my-style">
This element is styled with a CSS rule-set.
</div>
Here's a visual overview of a rule-set.
A selector references the HTML elements to which the style applies.
A declaration block consists of one or more declarations separated by semicolons.
A property is the characteristic that will be styled (e.g. color, border).
The value is the value for the property (e.g. color property can have blue
as value).
Declarations end with a semicolon, and declaration blocks are surrounded by curly braces.
This entire description represents a single rule-set.
The basic CSS syntax.
selector { property: value }
Below is an example.
An element styled with CSS
<style>
.selector {
background-color: pink;
color: firebrick;
font-style: italic;
padding:20px;
}
</style>
<p class="selector">
An element styled with CSS
</p>
The .selector
is a CSS selector. This is a class selector because it is prefixed with a dot.
It specifies values for three properties: background-color, font-size, font-style, and padding-style.
The class attribute in the paragraph references the selector.
The property values of the selector are then applied to the parts in the paragraph.
For details on CSS properties, see our CSS reference guide.
There are 3 ways to add styles to a page:
With an external stylesheet, styles are defined in an external file.
This file is brought into the page with a <link> tag in the <head> section.
A style from an external stylesheet is applied to the paragraph.
An element styled with an external style.
<head>
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
</head>
<p class="aliceblue">
An element styled with an external style.
</p>
The <link> element loads the style.css file into the page.
The paragraph references a style with the <class> attribute.
Below is th style as it appears in the external stylesheet file.
.aliceblue { background-color:aliceblue; color:steelblue; padding:10px; }
An internal stylesheet defines styles for a single page.
The <style> tag encloses all CSS rule-sets.
A style from an internal stylesheet is applied to the paragraph.
An element styled with an internal style.
<style>
.internal-style {
padding: 15px;
background: moccasin;
}
</style>
<p class="internal-style">
An element styled with an internal style.
</p>
An inline style only applies to a single element.
A style attribute on the element defines the style.
A paragraph styled with an inline style attribute.
An element styled with an inline style.
<p style="background-color:lavender; padding:10px;">
An element styled with an inline style.
</p>
CSS stands for Cascading Style Sheets. Why Cascading?
When a page includes multiple external, internal, and inline styles, the question is which style takes precedence? To answer this, each browser implements a CSS cascade algorithm that applies the cascading rules.
One of the rules is that when two styles have the same name, for example from an external stylesheet and an internal stylesheet, then the value from the last read sheet will be applied.
If an element references multiple styles from different stylesheets, the styles will cascade into a new virtual stylesheet by the following rules, where number one has the highest priority:
In this example, the element has 3 sources of background color: external, internal, and inline styles. The inline style takes precedence, i.e. wins.
The inline background-color takes precedence.
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
<style>
.blue {
background-color: blue;
}
</style>
<p class="blue"
style="background-color:lightsalmon;">
The inline background-color takes precedence.
</p>