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.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all

elements will be center-aligned, with a red text color:

Example
p {
    color: red;
    text-align: center;
}
»
CSS Selectors
CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector
The element selector selects elements based on the element name.

You can select all

elements on a page like this (in this case, all

elements will be center-aligned, with a red text color):

Example
p {
    text-align: center;
    color: red;
}
»
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id=”para1″:

Example
#para1 {
    text-align: center;
    color: red;
}
»
Note: An id name cannot start with a number!

The class Selector
The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class=”center” will be red and center-aligned:

Example
.center {
    text-align: center;
    color: red;
}
»
You can also specify that only specific HTML elements should be affected by a class.

In the example below, only

elements with class=”center” will be center-aligned:

Example
p.center {
    text-align: center;
    color: red;
}
»
HTML elements can also refer to more than one class.

In the example below, the

element will be styled according to class=”center” and to class=”large”:

Example

This paragraph refers to two classes.

»
Note: A class name cannot start with a number!

Grouping Selectors
If you have elements with the same style definitions, like this:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example
h1, h2, p {
    text-align: center;
    color: red;
}
»
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example
p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */
»
Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

❮ Previous Next ❯

Three Ways to Insert CSS
There are three ways of inserting a style sheet:

External style sheet
Internal style sheet
Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the element. The element goes inside the section:

Example

»
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “mystyle.css” looks:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the element, inside the section of an HTML page:

Example

body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}

»
Inline Styles
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a

element:

Example
<h1 style="color:blue;margin-left:30px;”>This is a heading

»
Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

Example
Assume that an external style sheet has the following style for the

element:

h1 {
    color: navy;
}
then, assume that an internal style sheet also has the following style for the

element:

h1 {
    color: orange;   
}
If the internal style is defined after the link to the external style sheet, the

elements will be “orange”:

Example

h1 {
    color: orange;
}

»
However, if the internal style is defined before the link to the external style sheet, the

elements will be “navy”:

Example

h1 {
    color: orange;
}

»
Cascading Order
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or a browser default value.

»

Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

❮ Previous Next ❯

a valid color name – like “red”
an RGB value – like “rgb(255, 0, 0)”
a HEX value – like “#ff0000”
Color Names
Colors set by using color names:

Example
Color Name
Red
Green
Blue
Orange
Yellow
Cyan
Black
»
Note: Color names are case-insensitive: “Red” is the same as “red” or “RED”.

HTML and CSS supports 140 standard color names.

RGB (Red, Green, Blue)
RGB color values can be specified using this formula: rgb(red, green, blue).

Each parameter (red, green, blue) defines the intensity of the color between 0 and 255.

For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. Experiment by mixing the RGB values below:

Red Green Blue
255 0 0



rgb(255, 0, 0)
Example
Color RGB
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,165,0)
rgb(255,255,0)
rgb(0,255,255)
»
Shades of grey are often defined using equal values for all the 3 light sources:

Example
Color RGB
rgb(0,0,0)
rgb(128,128,128)
rgb(255,255,255)
»
Hexadecimal Colors
RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00). Note: HEX values are case-insensitive: “#ff0000” is the same as “FF0000”.

Example
Color HEX
#FF0000
#00FF00
#0000FF
#FFA500
#FFFF00
#00FFFF
»
Shades of grey are often defined using equal values for all the 3 light sources:

Example
Color HEX
#000000
#808080
#FFFFFF
»
Advanced colors: In our CSS3 Colors Tutorial, you will learn about HSL and RGBa colors.

❮ Previous Next ❯

The CSS background properties are used to define the background effects for elements.

CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example
body {
    background-color: lightblue;
}
»
With CSS, a color is most often specified by:

a valid color name – like “red”
a HEX value – like “#ff0000”
an RGB value – like “rgb(255,0,0)”
Look at CSS Color Values for a complete list of possible color values.

In the example below, the

,

, and

elements have different background colors:

Example
h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
»
Background Image
The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example
body {
    background-image: url(“paper.gif”);
}
»
Below is an example of a bad  combination of text and background image. The text is hardly readable:

Example
body {
    background-image: url(“bgdesert.jpg”);
}
»
Note: When using a background image, use an image that does not disturb the text.

Background Image – Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example
body {
    background-image: url(“gradient_bg.png”);
}
»
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example
body {
    background-image: url(“gradient_bg.png”);
    background-repeat: repeat-x;
}
»
Tip: To repeat an image vertically, set background-repeat: repeat-y;

Background Image – Set position and no-repeat
Showing the background image only once is also specified by the background-repeat property:

Example
body {
    background-image: url(“img_tree.png”);
    background-repeat: no-repeat;
}
»
In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:

Example
body {
    background-image: url(“img_tree.png”);
    background-repeat: no-repeat;
    background-position: right top;
}
»
Background Image – Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example
body {
    background-image: url(“img_tree.png”);
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
»
Background – Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

Example
body {
    background: #ffffff url(“img_tree.png”) no-repeat right top;
}
»
When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the other ones are in this order.

Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

All CSS Background Properties
Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

❮ Previous Next ❯

I have borders on all sides.

I have a red bottom border

I have rounded borders.

I have a blue left border.

Border Style
The border-style property specifies what kind of border to display.

The following values are allowed:

dotted – Defines a dotted border
dashed – Defines a dashed border
solid – Defines a solid border
double – Defines a double border
groove – Defines a 3D grooved border. The effect depends on the border-color value
ridge – Defines a 3D ridged border. The effect depends on the border-color value
inset – Defines a 3D inset border. The effect depends on the border-color value
outset – Defines a 3D outset border. The effect depends on the border-color value
none – Defines no border
hidden – Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

»
Note: None of the OTHER CSS border properties described below will have ANY effect unless the border-style property is set!

Border Width
The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

5px border-width
Example
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
»
Border Color
The border-color property is used to set the color of the four borders.

The color can be set by:

name – specify a color name, like “red”
Hex – specify a hex value, like “#ff0000”
RGB – specify a RGB value, like “rgb(255,0,0)”
transparent
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Red border
Example
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
»
Border – Individual Sides
From the examples above you have seen that it is possible to specify a different border for each side.

In CSS, there is also properties for specifying each of the borders (top, right, bottom, and left):

Different Border Styles
Example
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
»
The example above gives the same result as this:

Example
p {
    border-style: dotted solid;
}
»
So, here is how it works:

If the border-style property has four values:

border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
If the border-style property has three values:

border-style: dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
If the border-style property has two values:

border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid
If the border-style property has one value:

border-style: dotted;
all four borders are dotted
The border-style property is used in the example above. However, it also works with border-width and border-color.

Border – Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color
Example
p {
    border: 5px solid red;
}
Result:

Some text

»
You can also specify all the individual border properties for just one side:

Left Border
p {
    border-left: 6px solid red;
    background-color: lightgrey;
}
Result:

Some text

»
Bottom Border
p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}
Result:

Some text

»
Rounded Borders
The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example
p {
    border: 2px solid red;
    border-radius: 5px;
}
»
Note: The border-radius property is not supported in IE8 and earlier versions.

More Examples
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.

Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.

Set the width of the left border
This example demonstrates how to set the width of the left border.

Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.

Set the color of the right border
This example demonstrates how to set the color of the right border.

Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

All CSS Border Properties
Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

❮ Previous Next ❯

CSS Margins
The CSS margin properties are used to generate space around elements.

The margin properties set the size of the white space outside the border.

With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin – Individual Sides
CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:

auto – the browser calculates the margin
length – specifies a margin in px, pt, cm, etc.
% – specifies a margin in % of the width of the containing element
inherit – specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.

The following example sets different margins for all four sides of a

element:

Example
p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
»
Margin – Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

margin-top
margin-right
margin-bottom
margin-left
Example
p {
    margin: 100px 150px 100px 80px;
}
»
So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
If the margin property has three values:

margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
If the margin property has two values:

margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
If the margin property has one value:

margin: 25px;
all four margins are 25px
The auto Value
You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Example
div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
»
The inherit Value
This example lets the left margin be inherited from the parent element:

Example
div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
»
Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example
h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}
»
In the example above, the

element has a bottom margin of 50px. The

element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the

and the

would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends up being 50px.

Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

All CSS Margin Properties
Property Description
margin A shorthand property for setting the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

❮ Previous Next ❯

CSS Padding
The CSS padding properties are used to generate space around content.

The padding clears an area around the content (inside the border) of an element.

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding – Individual Sides
CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:

length – specifies a padding in px, pt, cm, etc.
% – specifies a padding in % of the width of the containing element
inherit – specifies that the padding should be inherited from the parent element
The following example sets different padding for all four sides of a

element:

Example
p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
»
Padding – Shorthand Property
To shorten the code, it is possible to specify all the padding properties in one property.

The padding property is a shorthand property for the following individual padding properties:

padding-top
padding-right
padding-bottom
padding-left
Example
p {
    padding: 50px 30px 50px 80px;
}
»
So, here is how it works:

If the padding property has four values:

padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
If the padding property has three values:

padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
If the padding property has two values:

padding: 25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
If the padding property has one value:

padding: 25px;
all four paddings are 25px
Example
div.ex1 {
    padding: 25px 50px 75px 100px;
}

div.ex2 {
    padding: 25px 50px 75px;
}

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}
»
More Examples
All the padding properties in one declaration
This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.

Set the left padding
This example demonstrates how to set the left padding of a

element.

Set the right padding
This example demonstrates how to set the right padding of a

element.

Set the top padding
This example demonstrates how to set the top padding of a

element.

Set the bottom padding
This example demonstrates how to set the bottom padding of a

element.

Test Yourself with Exercises!
Exercise 1 »  Exercise 2 »  Exercise 3 »

All CSS Padding Properties
Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

❮ Previous Next ❯

Setting height and width
The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

This element has a height of 200 pixels and a width of 50%
Example
div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}
»

This element has a height of 100 pixels and a width of 500 pixels.
Example
div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}
»

Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!

Setting max-width
The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the