CSS Tutorial: Examples in Each Chapter

CSS Tutorial
W3Schools Home
Next Chapter
CSS is a stylesheet language that describes the presentation of an HTML

(or XML) document.
CSS describes how elements must be rendered on screen, on paper, or in

other media.
This tutorial will teach you CSS from basic to advanced.
Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.
With our online editor, you can edit the CSS, and click on a button to view
the result.
CSS Example
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
Try it yourself
CSS Introduction
Previous
Next Chapter
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
External stylesheets are stored in CSS files
CSS Demo - One HTML Page - Multiple

Styles!
Here we will show one HTML page displayed with four different stylesheets. Click on the
"Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different
styles:
Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and
color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing
just one file!
Previous
CSS Syntax and Selectors

Previous
Next Chapter
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
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 <p> elements will be center-aligned, with a red
text color:
Example
p {
color: red;
text-align: center;
}
Try it yourself
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 */
Try it yourself
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 <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):
Example
p {
text-align: center;
color: red;
}
Try it yourself
The id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
An id should be unique within a page, so the id selector is used if you want to
select a single, 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;
}
Try it yourself
Do NOT start an ID name 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;
}
Try it yourself
You can also specify that only specific HTML elements should be affected by a
class.
In the example below, all <p> elements with class="center" will be center-
aligned:
Example
p.center {
text-align: center;
color: red;
}
Try it yourself
Do NOT start a class name 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;
}
you can 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;
}
Try it yourself
Test Yourself with Exercises!

Exercise 1 Exercise 2 Exercise 3 Exercise
CSS How To...

Previous
Next Chapter
When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.
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
<link> element. The <link> element goes inside the <head> section:
Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it yourself
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;
}
Do not add a space between the property value and the unit (such as margin-left:20
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 <style> element, inside the <head>
section of an HTML page:
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Try it yourself
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
<h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Try it yourself
An inline style loses many of the advantages of a style sheet (by mixing content with
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 <h1>
element:
h1 {
color: navy;
}
then, assume that an internal style sheet also has the following style for the
<h1> element:
h1 {
color: orange;
}
If the internal style is defined after the link to the external style sheet, the
<h1> elements will be "orange":
Example
<head>
<style>
h1 {
color: orange;
}
</style>
</head>
Try it yourself
However, if the internal style is defined before the link to the external style
sheet, the <h1> elements will be "navy":
Example
<head>
<style>
h1 {
color: orange;
}
</style>
</head>
Try it yourself
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:
1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. 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 <head> tag, or in
an external style sheet, or a browser default value.
Try it yourself

Exercise 1 Exercise 2 Exercise 3 Exercise 4
CSS Backgrounds
Previous
Next Chapter
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 {
}
Try it yourself
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"
a valid color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
In the example below, the <h1>, <p>, and <div> elements have different
background colors:
Example
h1 {
background-color: green;
}
div {
}
p {
background-color: yellow;
}
Try it yourself
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");
}
Try it yourself
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");
}
Try it yourself
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");
}
Try it yourself
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;
}
Try it yourself
Note: To repeat an image vertically set background-repeat: repeat-y;
Background Image - Set position and no-

repeat
Showing the backgound image only once is also specified by
the background-repeat property:
Example
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Try it yourself
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-position: right top;
}
Try it yourself
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-position: right top;
background-attachment: fixed;
}
Try it yourself
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;
}
Try it yourself
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.

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 wit
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
CSS Borders
Previous
Next Chapter
CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of
an element's border.
This element has a groove border that is 15px wide and green.
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.
Try it yourself
Note: None of the OTHER CSS border properties described below will have ANY effec
styleproperty 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
Example
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 2px 10px 4px 20px;
}
Try it yourself
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"

RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
transparent
The border-color property can have from one to four values (for the top
If border-color is not set, it inherits the color of the element.
Example
p.one {
border-color: red;
}
p.two {
border-color: green;
}
p.three {
border-color: red green blue yellow;
}
Try it yourself
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):
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Try it yourself
The example above gives the same result as this:
Example
p {
border-style: dotted solid;
}
Try it yourself
So, here is how it works:
If the border-style property has four values:
border-style: dotted solid double dashed;

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

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

o top and bottom borders are dotted
o right and left borders are solid
If the border-style property has one value:
border-style: dotted;
o 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;
}
Try it yourself
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.

All CSS Border Properties
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-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
CSS Margins
Previous
Next Chapter
CSS Margin Properties

The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space OUTSIDE the border.
This element has a margin of 80px.
CSS Margins
The CSS margin properties set the size of the white space OUTSIDE the
border.
Note: The margins are completely transparent - and cannot have a background colo
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
Note: It is also possible to use negative values for margins; to overlap content.
The following example sets different margins for all four sides of a <p>
element:
Example
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Try it yourself
The following example lets the left margin be inherited from the parent
element:
Example
div.container {
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
Try it yourself
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;
}
Try it yourself
If the margin property has four values:
margin: 25px 50px 75px 100px;

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

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

o top and bottom margins are 25px
o right and left margins are 50px
If the margin property has one value:
margin: 25px;
o all four margins are 25px
Use of 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;
}
Try it yourself

Exercise 1 Exercise 2 Exercise 3
All CSS Margin Properties
margin A shorthand property for setting the margin properties in one decla
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
CSS Padding
Previous
Next Chapter
CSS Padding Properties

The CSS padding properties are used to generate space around content.
The padding properties set the size of the white space between the element
content and the element border.
This element has a padding of 50px.
CSS Padding
The CSS padding properties define the white space between the element
content and the element border.
The padding clears an area around the content (inside the border) of an
element.
Note: The padding is affected by the background color of the 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 <p>
element:
Example
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Try it yourself
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;
}
Try it yourself
If the padding property has four values:
padding: 25px 50px 75px 100px;

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

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

o top and bottom paddings are 25px
o right and left paddings are 50px
If the padding property has one value:
padding: 25px;
o all four paddings are 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 <p> element.
Set the right padding

This example demonstrates how to set the right padding of a <p> element.
Set the top padding

This example demonstrates how to set the top padding of a <p> element.
Set the bottom padding

This example demonstrates how to set the bottom padding of a <p>
element.

All CSS Padding Properties
padding A shorthand property for setting all the padding properties in one d
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

CSS Height and Width Dimensions
Previous
Next Chapter
CSS Dimension Properties

The CSS dimension properties allow you to control the height and width of an
element.
This element has a width of 100%.
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 <div> element has a height of 100 pixels and a width of 500 pixels.
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!
The following example shows a <div> element with a height of 100 pixels and
a width of 500 pixels:
Example
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
Try it yourself
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 <div> above occurs when the browser window is
smaller than the width of the element (500px). The browser then adds a
horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling
of small windows.
Tip: Drag the browser window to smaller than 500px wide, to see the
difference between the two divs!
This <div> element has a height of 100 pixels and a max-width of 500
pixels.
Note: The value of the max-width property overrides width.
The following example shows a <div> element with a height of 100 pixels and
a max-width of 500 pixels:
Example
div {
max-width: 500px;
height: 100px;
}
Try it yourself
Try it Yourself - Examples

Set the height and width of elements
This example demonstrates how to set the height and width of different
elements.
Set the height an width of an image using percent

This example demonstrates how to set the height and width of an image
using a percent value.
Set min-width and max-width of an element

This example demonstrates how to set a minimum width and a maximum
width of an element using a pixel value.
Set min-height and max-height of an element

This example demonstrates how to set a minimum height and a maximum
height of an element using a pixel value.

Exercise 1 Exercise 2
All CSS Dimension Properties
height Sets the height of an element

max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
CSS Text
Previous
Next Chapter
TEXT FORMATTING
This text is styled with some of the text formatting
properties. The heading uses the text-align, text-
transform, and color properties. The paragraph is
indented, aligned, and the space between characters is
specified. The underline is removed from this "Try it
yourself" link.
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
The default text color for a page is defined in the body selector.
Example
body {
color: blue;
}
h1 {
color: green;
}
Try it yourself
Note: For W3C compliant CSS: If you define the color property, you must also defin
colorproperty.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text
(left alignment is default if text direction is left-to-right, and right alignment
is default if text direction is right-to-left):
Example
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Try it yourself
When the text-align property is set to "justify", each line is stretched so

that every line has equal width, and the left and right margins are straight
(like in magazines and newspapers):
Example
div {
text-align: justify;
}
Try it yourself
Text Decoration
The text-decoration property is used to set or remove decorations from
text.
The value text-decoration: none; is often used to remove underlines

from links:
Example
a {
text-decoration: none;
}
Try it yourself
The other text-decoration values are used to decorate text:
Example
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Try it yourself
Note: It is not recommended to underline text that is not a link, as this often confus
Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or

capitalize the first letter of each word:
Example
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Try it yourself
Text Indentation
The text-indent property is used to specify the indentation of the first line
of a text:
Example
p {
text-indent: 50px;
}
Try it yourself
Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.
The following example demonstrates how to increase or decrease the space

between characters:
Example
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Try it yourself
Line Height
The line-height property is used to specify the space between lines:
Example
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
Try it yourself
Text Direction
The direction property is used to change the text direction of an element:
Example
div {
direction: rtl;
}
Try it yourself
Word Spacing
The word-spacing property is used to specify the space between the words
in a text.
The following example demonstrates how to increase or decrease the space

between words:
Example
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Try it yourself
More Examples
Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.
Vertical alignment of an image

This example demonstrates how to set the vertical align of an image in a
text.
Add shadow to text

This example demonstrates how to add shadow to text.

All CSS Text Properties
color Sets the color of text
direction Specifies the text direction/writing direction
letter- Increases or decreases the space between characters in a text

spacing
line- Sets the line height
height
text-align Specifies the horizontal alignment of text
text- Specifies the decoration added to text

decoratio
n
text- Specifies the indentation of the first line in a text-block

indent
text- Specifies the shadow effect added to text

shadow
text- Controls the capitalization of text

transform
unicode- Used together with the direction property to set or return whether the text sho
bidi
vertical- Sets the vertical alignment of an element

align
white- Specifies how white-space inside an element is handled

space
word- Increases or decreases the space between words in a text

spacing
CSS Fonts
Previous
The CSS font properties define the font family, boldness, size, and the style
Difference Between Serif and Sans-serif Fonts
CSS Font Families

In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif"
font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description
Serif Times New Roman Serif fonts have sm

Georgia characters
Sans-serif Arial "Sans" means with

Verdana lines at the ends of
Monospace Courier New All monospace cha

Lucida Console
Note: On computer screens, sans-serif fonts are considered easier to re
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" syst
Start with the font you want, and end with a generic family, to let the browser
Note: If the name of a font family is more than one word, it must be in quotat
More than one font family is specified in a comma-separated list:
Example
p {
font-family: "Times New Roman", Times, serif;
}
Try it yourself
For commonly used font combinations, look at our Web Safe Font Combination
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally

italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less s
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Try it yourself
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you s
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
The font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for acc
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements

Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text,
Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:
Example
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Try it yourself
Tip: If you use pixels, you can still use the zoom tool to resize the entire page
Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Try it yourself
In the example above, the text size in em is the same as the previous example
Unfortunately, there is still a problem with older versions of IE. The text becom
Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent
Example
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Try it yourself
Our code now works great! It shows the same text size in all browsers, and all
Font Weight
The font-weight property specifies the weight of a font:
Example
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Try it yourself
Font Variant
The font-variant property specifies whether or not a text should be displaye
In a small-caps font, all lowercase letters are converted to uppercase letters. H
Example
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Try it yourself
More Examples
All the font properties in one declaration
This example demonstrates how to use the shorthand property for setting all o

All CSS Font Properties
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be display
font-weight Specifies the weight of a font

CSS Links
Previous
With CSS, links can be styled in different ways.
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, backgr
Example
a {
color: hotpink;
}
Try it yourself
In addition, links can be styled differently depending on what state they are in
The four links states are:
a:link - a normal, unvisited link

a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */

a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Try it yourself
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover
Text Decoration
The text-decoration property is mostly used to remove underlines from link
Example
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
Try it yourself
Background Color
The background-color property can be used to specify a background color fo
Example
a:link {
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Try it yourself
More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Advanced - Create link boxes

This example demonstrates a more advanced example where we combine seve

CSS Lists
Previous
1. Coffee
2. Tea
3. Coca Cola
Coffee
Tea
Coca Cola
HTML Lists and CSS List Properties

In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists

Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
Different List Item Markers

The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
Example
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Try it yourself
Note: Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
Try it yourself
Position The List Item Markers

The list-style-position property specifies whether the list-item markers s
Example
ul {
list-style-position: inside;
}
Try it yourself
List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list
Example
ul {
list-style: square inside url("sqpurple.gif");
}
Try it yourself
When using the shorthand property, the order of the property values are:
list-style-type (if a list-style-image is specified, the value of this pro

list-style-position (specifies whether the list-item markers should
list-style-image (specifies an image as the list item marker)
If one of the property values above are missing, the default value for the miss
Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while propertie
Example
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
Result:
1. Coffee
2. Tea
3. Coca Cola
Coffee
Tea
Coca Cola
Try it yourself
More Examples
Full-width bordered list
This example demonstrates how to create a bordered list without bullets.
All the different list-item markers for lists

This example demonstrates all the different list-item markers in CSS.

All CSS List Properties
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside

list-style-type Specifies the type of list-item marker
CSS Tables
Previous
The look of an HTML table can be greatly improved with CSS:
Company Contact
Alfreds Futterkiste Maria Anders
Berglunds snabbkp Christina Berglund
Centro comercial Moctezuma Francisco Chang
Ernst Handel Roland Mendel
Island Trading Helen Bennett

Kniglich Essen Philip Cramer
Laughing Bacchus Winecellars Yoshi Tannamuri
Magazzini Alimentari Riuniti Giovanni Rovelli
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for <table>, <th>, and <td> elem
Example
table, th, td {
border: 1px solid black;
}
Try it yourself
Notice that the table in the example above has double borders. This is because
Collapse Table Borders

The border-collapse property sets whether the table borders should be collaps
Example
table {
border-collapse: collapse;
}
table, th, td {
}
Try it yourself
If you only want a border around the table, only specify the border property fo
Example
table {
}
Try it yourself
Table Width and Height

Width and height of a table are defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the
Example
table {
width: 100%;
}
th {
height: 50px;
}
Try it yourself
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or cente
By default, the content of <th> elements are center-aligned and the content o
The following example left-aligns the text in <th> elements:
Example
th {
text-align: left;
}
Try it yourself
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or m
By default, the vertical alignment of the content in a table is middle (for both <
The following example sets the vertical text alignment to bottom for <td> elem
Example
td {
height: 50px;
vertical-align: bottom;
}
Try it yourself
Table Padding
To control the space between the border and the content in a table, use the pa
Example
th, td {
padding: 15px;
text-align: left;
}
Try it yourself
Horizontal Dividers
First Name Last Name
Peter Griffin
Lois Griffin
Joe Swanson
Add the border-bottom property to <th> and <td> for horizontal dividers:
Example
th, td {
border-bottom: 1px solid #ddd;
}
Try it Yourself
Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:

Peter Griffin
Lois Griffin
Joe Swanson
Example
tr:hover {background-color: #f5f5f5}
Try it Yourself
Striped Tables
Peter Griffin
Lois Griffin
Joe Swanson
For zebra-striped tables, use the nth-child() selector and add a background-co
Example
tr:nth-child(even) {background-color: #f2f2f2}
Try it Yourself
Table Color
The example below specifies the background color and text color of <th> elem
Peter Griffin
Lois Griffin
Joe Swanson
Example
th {
background-color: #4CAF50;
color: white;
}
Try it Yourself
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small t
First Name Last Name Points Points Points Points Points Points P
Jill Smith 50 50 50 50 50 50 5
Eve Jackson 94 94 94 94 94 94 9
Adam Johnson 67 67 67 67 67 67 6
Add a container element (like <div>) with overflow-x:auto around the <table>
Example
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Try it Yourself
More Examples
Make a fancy table
This example demonstrates how to create a fancy table.
Set the position of the table caption

This example demonstrates how to position the table caption.

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6
CSS Table Properties
border Sets all the border properties in one declaration
border-collapse Specifies whether or not table borders should be colla
border-spacing Specifies the distance between the borders of adjacen
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and backg
table-layout Sets the layout algorithm to be used for a table

CSS Box Model
Previous
The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model"
The CSS box model is essentially a box that wraps around every HTML elemen
The image below illustrates the box model:
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparen
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
Example
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Try it yourself
Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, yo
Important: When you set the width and height properties of an elemen
and height of the content area. To calculate the full size of an element
and margins.
Assume we want to style a <div> element to have a total width of 350px:
Example
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Try it yourself
Here is the math:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + rig
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border +
Note for old IE: Internet Explorer 8 and earlier versions, include padd
To fix this problem, add a <!DOCTYPE html> to the HTML page.

CSS Outline
Previous
CSS Outline Properties

An outline is a line drawn around an element - outside the border. This can be
The CSS outline properties specify the style, color, and width of an outline.
This element has a thin black border and a double outline that is 10px wide an
CSS Outline
An outline is a line that is drawn around elements (outside the borders) to mak
However, the outline property is different from the border property - The outlin
Outline Style
The outline-style property specifies the style of the outline.
The outline-style property can have one of the following values:
dotted - Defines a dotted outline

dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline. The effect depends on the outlin
ridge - Defines a 3D ridged outline. The effect depends on the outline-c
inset - Defines a 3D inset outline. The effect depends on the outline-co
outset - Defines a 3D outset outline. The effect depends on the outline-
none - Defines no outline
hidden - Defines a hidden outline
The following example first sets a thin black border around each <p> element
Example
p {
outline-color: red;
}
p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Try it yourself
Note: None of the OTHER CSS outline properties described below will h
styleproperty is set!
Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
name - specify a color name, like "red"

RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
invert - performs a color inversion (which ensures that the outline is visi
Example
p {
outline-style: double;
outline-color: red;
}
Result:
A colored outline.
Try it yourself
Outline Width
The outline-width property specifies the width of the outline.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one
Example
p {border: 1px solid black;}
p.one {
outline-color: red;
outline-width: thick;
}
p.two {
outline-color: green;
outline-width: 3px;
}
Result:
A thick outline.
A thinner outline.
Try it yourself
Outline - Shorthand property

To shorten the code, it is also possible to specify all the individual outline prop
The outline property is a shorthand property for the following individual outli
outline-width
outline-style (required)
outline-color
Example
p {
outline: 5px dotted red;
}
Result:
An outline.
Try it yourself
All CSS Outline Properties
outline Sets all the outline properties in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge o
outline-style Sets the style of an outline
outline-width Sets the width of an outline

CSS Layout - The display Property
Previous
The display property is the most important CSS property for controlling la
The display Property

The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of ele
Block-level Elements
A block-level element always starts on a new line and takes up the full width a
The <div> element is a block-level element.
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
Inline Elements
An inline element does not start on a new line and only takes up as much widt
This is an inline <span> element inside a paragraph.
Examples of inline elements:
<span>
<a>
<img>
Display: none;
display: none; is commonly used with JavaScript to hide and show elements w
The <script> element use display: none; as its default.
Override The Default Display Value

As mentioned, every element has a default display value. However, you can ov
Changing an inline element to a block element, or vice versa, can be useful for
A common example is making inline <li> elements for horizontal menus:
Example
li {
display: inline;
}
Try it yourself
Note: Setting the display property of an element only changes how th

kind of element it is. So, an inline element with display: block; is not a
inside it.
The following example displays <span> elements as block elements:

Example
span {
display: block;
}
Try it yourself
Hide an Element - display:none or visibility:hid

Hiding an element can be done by setting the display property to none. The ele
Example
h1.hidden {
display: none;
}
Try it yourself
visibility:hidden; also hides an element.
However, the element will still take up the same space as before. The element
Example
h1.hidden {
visibility: hidden;
}
Try it yourself
More Examples
display: none; versus visibility: hidden;
This example demonstrates display: none; versus visibility: hidden;
CSS Display/Visibility Properties
display Specifies how an element should be displaye
visibility Specifies whether or not an element should b
CSS Layout - width and max-width

Previous
Using width, max-width and margin: auto;
As mentioned in the previous chapter; a block-level element always takes up t
Setting the width of a block-level element will prevent it from stretching out to
remaining space will be split equally between the two margins:
This <div> element has a width of 500px, and margin set to auto.
Note: The problem with the <div> above occurs when the browser window is s
Using max-width instead, in this situation, will improve the browser's handling o
This <div> element has a max-width of 500px, and margin set to auto.
Tip: Drag the browser window to smaller than 500px wide, to see the differen
Here is an example of the two divs above:
Example
div.ex1 {
width: 500px;
margin: auto;
}
div.ex2 {
max-width: 500px;
margin: auto;
}
CSS Layout - width and max-width
Previous
Using width, max-width and margin: auto;

As mentioned in the previous chapter; a block-level element always takes up t
remaining space will be split equally between the two margins:
This <div> element has a width of 500px, and margin set to auto.
Note: The problem with the <div> above occurs when the browser window is s
Using max-width instead, in this situation, will improve the browser's handling o
This <div> element has a max-width of 500px, and margin set to auto.
Tip: Drag the browser window to smaller than 500px wide, to see the differen
Here is an example of the two divs above:
Example
div.ex1 {
width: 500px;
margin: auto;
}
div.ex2 {
max-width: 500px;
margin: auto;
}
CSS Layout - The position Property

Previous
The position property specifies the type of positioning method used for an
The position Property

The position property specifies the type of positioning method used for an elem
There are four different position values:
static
relative
fixed
absolute
Elements are then positioned using the top, bottom, left, and right properties.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
An element with position: static; is not positioned in any special way; it is al
This <div> element has position: static;
Here is the CSS that is used:
Example
div.static {
position: static;
}
Try it yourself
position: relative;
An element with position: relative; is positioned relative to its normal positio
Setting the top, right, bottom, and left properties of a relatively-positioned ele
This <div> element has position: relative;
Example
div.relative {
position: relative;
left: 30px;
}
Try it yourself
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
A fixed element does not leave a gap in the page where it would normally have
Notice the fixed element in the lower-right corner of the page. Here is the CSS
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
Try it yourself
This <div> element has position: fixed;
position: absolute;
An element with position: absolute; is positioned relative to the nearest posit
However; if an absolute positioned element has no positioned ancestors, it use
Note: A "positioned" element is one whose position is anything except static.
Here is a simple example:
This <div> element has position: relative;

This <div> element has position: absolute;
Example
div.relative {
position: relative;
width: 400px;
height: 200px;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
Try it yourself
Overlapping Elements
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element sh
An element can have a positive or negative stack order:
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Try it yourself
An element with greater stack order is always in front of an element with a low
Note: If two positioned elements overlap without a z-index specified, th
code will be shown on top.
More Examples
Set the shape of an element
This example demonstrates how to set the shape of an element. The element
How to show overflow in an element using scroll

This example demonstrates how to set the overflow property to create a scroll
How to set the browser to automatically handle overflow

This example demonstrates how to set the browser to automatically handle ov
Change the cursor

This example demonstrates how to change the cursor.

All CSS Positioning Properties
bottom Sets the bottom margin edge for a positioned box

clip Clips an absolutely positioned element
cursor Specifies the type of cursor to be displayed
left Sets the left margin edge for a positioned box
overflow Specifies what happens if content overflows an ele
overflow-x Specifies what to do with the left/right edges of th

element's content area
overflow-y Specifies what to do with the top/bottom edges of

element's content area
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box
z-index Sets the stack order of an element

CSS Layout - float and clear
Previous
The float property specifies whether or not an element should float.
The clear property is used to control the behavior of floating elements.
The float Property

In its simplest use, the float property can be used to wrap text around images
The following example specifies that an image should float to the right in a tex
Example
img {
float: right;
margin: 0 0 10px 10px;
}
Try it yourself
The clear Property

The clear property is used to control the behavior of floating elements.
Elements after a floating element will flow around it. To avoid this, use the cle
The clear property specifies on which sides of an element floating elements ar
Example
div {
clear: left;
}
Try it yourself
The clearfix Hack - overflow: auto;

If an element is taller than the element containing it, and it is floated, it will ov
Then we can add overflow: auto; to the containing element to fix this problem
Example
.clearfix {
overflow: auto;
}
Try it yourself
Web Layout Example

It is common to do entire web layouts using the float property:
Example
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
}
section {
margin-left: 206px;
}
Try it yourself
More Examples
An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the
An image with a caption that floats to the right

Let an image with a caption float to the right.
Let the first letter of a paragraph float to the left

Let the first letter of a paragraph float to the left and style the letter.
Creating a horizontal menu

Use float with a list of hyperlinks to create a horizontal menu.
Creating a homepage without tables

Use float to create a homepage with a header, footer, left content and main co
All CSS Float Properties

clear Specifies on which sides of an element where floating
float Specifies whether or not an element should float
overflow Specifies what happens if content overflows an elemen
overflow-x Specifies what to do with the left/right edges of the co

content area
overflow-y Specifies what to do with the top/bottom edges of the

content area
CSS Layout - inline-block

Previous
The inline-block Value
It has been possible for a long time to create a grid of boxes that fills the brow
However, the inline-block value of the display property makes this even easie
inline-block elements are like inline elements but they can have a width and a
Examples
The old way - using float (notice that we also need to specify a clear property
Example
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
}
.after-box {
clear: left;
}
Try it yourself
The same effect can be achieved by using the inline-block value of the displa
Example
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
}
CSS Layout - Horizontal Align
Previous
In CSS, several properties can be used to align
Center Align - Using margin

The element will then take up the specified width, and the remaining space wil
Example
.center {
margin: auto;
width: 60%;
border:3px solid #73AD21;
padding: 10px;
}
Try it yourself
Tip: Center aligning has no effect if the width property is not set (or set to 100
Tip: For aligning text, see the CSS Text chapter.
Left and Right Align - Using position

One method for aligning elements is to use position: absolute;:
Example
.right {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
Try it yourself
Note: Absolute positioned elements are removed from the normal flow, and ca
Tip: When aligning elements with position, always define margin and padding f
There is also a problem with IE8 and earlier, when using position. If a contain
This seems to be space reserved for a scrollbar. So, always set the !DOCTYPE
Example
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Try it yourself
Left and Right Align - Using float

Another method for aligning elements is to use the float property:
Example
.right {
float: right;
width: 300px;
padding: 10px;
}
Try it yourself
Tip: When aligning elements with float, always define margin and padding for t
There is also a problem with IE8 and earlier, when using float. If the !DOCTYP
when using float:
Example
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
Try it yourself
CSS Combinators
Previous
CSS Combinators
A combinator is something that explains the relationship between the se
A CSS selector can contain more than one simple selector. Between the simple
There are four different combinators in CSS3:
descendant selector (space)

child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a specif
The following example selects all <p> elements inside <div> elements:
Example
div p {
}
Try it yourself
Child Selector
The child selector selects all elements that are the immediate children of a spe
The following example selects all <p> elements that are immediate children of
Example
div > p {
}
Try it yourself
Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings
Sibling elements must have the same parent element, and "adjacent" means "
The following example selects all <p> elements that are placed immediately a
Example
div + p {
}
Try it yourself
General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified
The following example selects all <p> elements that are siblings of <div> elem
Example
div ~ p {
}
Try it yourself

Exercise 1 Exercise 2 Exe
CSS Pseudo-classes
Previous
What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it

Style visited and unvisited links differently
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */

a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Try it yourself
Note: a:hover MUST come after a:link and a:visited in the CSS definiti
effective!a:active MUST come after a:hover in the CSS definition in orde
are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
Example
a.highlight:hover {
color: #ff0000;
}
Try it yourself
When you hover over the link in the example, it will change color.
CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first chi
Match the first <p> element

In the following example, the selector matches any <p> element that is the fir
Example
p:first-child {
color: blue;
}
Try it yourself
Match the first <i> element in all <p> elemen

In the following example, the selector matches the first <i> element in all <p>
Example
p i:first-child {
color: blue;
}
Try it yourself
Match all <i> elements in all first child <p> ele

In the following example, the selector matches all <i> elements in <p> eleme
Example
p:first-child i {
color: blue;
}
Try it yourself
CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different language
In the example below, :lang defines the quotation marks for <q> elements wi
Example
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Try it yourself
More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo Classes
Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input>
:disabled input:disabled Selects every disabled <input>

:empty p:empty Selects every <p> element tha
:enabled input:enabled Selects every enabled <input>
:first-child p:first-child Selects every <p> elements th
:first-of-type p:first-of-type Selects every <p> element tha

parent
:focus input:focus Selects the <input> element th
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with
:invalid input:invalid Selects all <input> elements w
:lang(language) p:lang(it) Selects every <p> element wit

"it"
:last-child p:last-child Selects every <p> elements th
:last-of-type p:last-of-type Selects every <p> element tha

parent
:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is n
:nth-child(n) p:nth-child(2) Selects every <p> element tha
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element tha

counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element tha

parent, counting from the last
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element tha

parent
:only-of-type p:only-of-type Selects every <p> element tha

parent
:only-child p:only-child Selects every <p> element tha
:optional input:optional Selects <input> elements with
:out-of-range input:out-of-range Selects <input> elements with
:read-only input:read-only Selects <input> elements with
:read-write input:read-write Selects <input> elements with

:required input:required Selects <input> elements with
:root root Selects the document's root el
:target #news:target Selects the current active #new

containing that anchor name)
:valid input:valid Selects all <input> elements w
:visited a:visited Selects all visited links
All CSS Pseudo Elements
Selector Example Example description
::after p::after Insert content after every <p>
::before p::before Insert content before every <p
::first-letter p::first-letter Selects the first letter of every
::first-line p::first-line Selects the first line of every <
::selection p::selection Selects the portion of an eleme

CSS Navigation Bar
Previous
Next Chapter
Demo: Navigation Bars

Vertical
Home
News
Contact
About
Horizontal
Home
News
Contact
o About
Home
News
Contact
o About
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking
navigation bars.
Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Try it yourself
Now let's remove the bullets and the margins and padding from the list:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Try it yourself
Example explained:
list-style-type: none; - Removes the bullets. A navigation bar

does not need list markers
Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both vertical,
and horizontal navigation bars.
Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the
list, in addition to the code above:
Example
li a {
display: block;
width: 60px;
}
Try it yourself
Example explained:
display: block; - Displaying the links as block elements makes the

whole link area clickable (not just the text), and it allows us to specify
the width (and padding, margin, height, etc. if you want)
width: 60px; - Block elements take up the full width available by
default. We want to specify a 60 pixels width
You can also set the width of <ul>, and remove the width of <a>, as they
will take up the full width available when displayed as block elements. This
will produce the same result as our previous example:
Example
ul {
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Try it yourself
Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and
change the background color of the links when the user moves the mouse
over them:
Home
News
Contact
About
Example
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
}
/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}
Try it yourself
Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page
he/she is on:
Home
News
Contact
About
Example
.active {
color: white;
}
Try it yourself
Center Links & Add Borders

Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you
also want borders inside the navbar, add aborder-bottom to all <li>
elements, except for the last one:
Home
News
Contact
About
Example
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Try it yourself
Full-height Fixed Vertical Navbar

Create a full-height, "sticky" side navigation:
Example
ul {
margin: 0;
padding: 0;
width: 25%;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much
content */
}
Try it yourself
Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar.
Using inline or floating list items.
Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements
as inline, in addition to the "standard" code above:
Example
li {
display: inline;
}
Try it yourself
Example explained:
display: inline; - By default, <li> elements are block elements.

Here, we remove the line breaks before and after each list item, to
display them on one line
Floating List Items

Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:
Example
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
Try it yourself
Example explained:
float: left; - use float to get block elements to slide next to each
other
display: block; - Displaying the links as block elements makes the
whole link area clickable (not just the text), and it allows us to specify
padding (and height, width, margins, etc. if you want)
padding: 8px; - Since block elements take up the full width
available, they cannot float next to each other. Therefore, specify
some padding to make them look good
background-color: #dddddd; - Add a gray background-color to each
a element
Tip: Add the background-color to <ul> instead of each <a> element if you
want a full-width background color:
Example
ul {
background-color: #dddddd;
}
Try it yourself
Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and
change the background color of the links when the user moves the mouse
over them:
Home
News
Contact
About
Example
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
/* Change the link color to #111 (black) on hover */

li a:hover {
}
Try it yourself
Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page
he/she is on:
Home
News
Contact
About
Example
.active {
}
Try it yourself
Right-Align Links
Right-align links by adding a new <ul> inside the <ul> with float:right;:
Home
News
Contact
o About
o Login
Example
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<ul style="float:right;list-style-type:none;">
<li><a href="#about">About</a></li>
<li><a href="#login">Login</a></li>
</ul>
</ul>
Try it yourself
Border Dividers
Add the border-right property to <li> to create link dividers:
Home
News
Contact
o About
o Login
Example
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Try it yourself
Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even
when the user scrolls the page:
Fixed Top
ul {
position: fixed;
top: 0;
width: 100%;
}
Try it yourself
Fixed Bottom
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Try it yourself
Gray Horizontal Navbar

An example of a gray horizontal navigation bar with a thin gray border:
Home
News
Contact
About
Example
ul {
border: 1px solid #e7e7e7;
}
li a {
color: #666;
}
CSS Dropdowns
Previous
Next Chapter
Create a hoverable dropdown with CSS.
Dropdown Examples
Move the mouse over the examples below:
Dropdown Text
Dropdown Menu
Other:
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over
an element.
Example
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
Try it Yourself
Example Explained
HTML) Use any element to open the dropdown content, e.g. a <span>, or a
<button> element.
Use a container element (like <div>) to create the dropdown content and
add whatever you want inside of it.
Wrap a <div> element around the elements to position the dropdown

content correctly with CSS.
CSS) The .dropdown class use position:relative, which is needed when

we want the dropdown content to be placed right below the dropdown button
(using position:absolute).
The .dropdown-content class holds the actual dropdown content. It is

hidden by default, and will be displayed on hover (see below). Note the min-
width is set to 160px. Feel free to change this. Tip: If you want the width of
the dropdown content to be as wide as the dropdown button, set
the width to 100% (and overflow:auto to enable scroll on small screens).
Instead of using a border, we have used the box-shadow property to make

the dropdown menu look like a "card".
The :hover selector is used to show the dropdown menu when the user
moves the mouse over the dropdown button.
Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a
list:
Dropdown Menu
This example is similar to the previous one, except that we add links inside
the dropdown box and style them to fit a styled dropdown button:
Example
<style>
/* Style The Dropdown Button */
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */

.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */

.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */

.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
/* Change color of dropdown links on hover */

.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown
content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</div>
Try it Yourself
Right-aligned Dropdown Content

Left
Right
If you want the dropdown menu to go from right to left, instead of left to
right, add right: 0;
Example
.dropdown-content {
right: 0;
}
Try it Yourself
More Examples
Dropdown Image
This example demonstrates how to add an image and other content inside
the dropdown box.
Dropdown Navbar
This example demonstrates how to add a dropdown menu inside a navigation
bar.
CSS Image Gallery

Previous
Next Chapter
CSS can be used to create an image gallery.

Add a description of the image here

Image Gallery
The following image gallery is created with CSS:
Example
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="300" height="200">
</a>
</div>
<div class="img">
<a target="_blank" href="lights.jpg">
<img src="img_lights.jpg" alt="Northern
Lights" width="300" height="200">
</a>
</div>
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="300" height="200">
</a>
</div>
</body>
</html>
Try it yourself
Previous
Next Chapter
W3SCHOOLS EXAMS
HTML, CSS, JavaScript, PHP, jQuery, and XML Certifications
COLOR PICKER
CSS Image Opacity / Transparency
Previous
Next Chapter
Creating transparent images with CSS is easy.
The CSS opacity property is a part of the CSS3 recommendation.
Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity.
First we will show you how to create a transparent image with CSS.
Regular image:
The same image with transparency:

Look at the following CSS:
Example
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Try it yourself
The opacity property can take a value from 0.0 - 1.0. The lower value, the
more transparent.
IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 -
100. A lower value makes the element more transparent.
Example 2 - Image Transparency - Hover

Effect
Mouse over the images:
The CSS looks like this:
Example
img {
opacity: 0.4;
}
img:hover {
opacity: 1.0;
}
Try it yourself
The first CSS block is similar to the code in Example 1. In addition, we have
added what should happen when a user hovers over one of the images. In
this case we want the image to NOT be transparent when the user hovers
over it. The CSS for this is opacity:1;.
When the mouse pointer moves away from the image, the image will be
transparent again.
Example 3 - Text in Transparent Box
This is some text that is placed in the transparent box.
The source code looks like this:
Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Try it yourself
First, we create a <div> element (class="background") with a background

image, and a border. Then we create another <div> (class="transbox")
inside the first <div>. The <div class="transbox"> have a background color,
and a border - the div is transparent. Inside the transparent <div>, we add
some text inside a <p> element.
CSS Image Sprites

Previous
Next Chapter
Image Sprites
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates
multiple server requests.
Using image sprites will reduce the number of server requests and save
bandwidth.
Image Sprites - Simple Example

Instead of using three separate images, we use this single image
("img_navsprites.gif"):
With CSS, we can show just the part of the image we need.
In the following example the CSS specifies which part of the

"img_navsprites.gif" image to show:
Example
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Try it yourself
Example explained:
<img id="home" src="img_trans.gif"> - Only defines a small transparent
image because the src attribute cannot be empty. The displayed image
will be the background image we specify in CSS
width: 46px; height: 44px; - Defines the portion of the image we want
to use
background: url(img_navsprites.gif) 0 0; - Defines the background
image and its position (left 0px, top 0px)
This is the easiest way to use image sprites, now we want to expand it by
using links and hover effects.
Image Sprites - Create a Navigation List

We want to use the sprite image ("img_navsprites.gif") to create a
navigation list.
We will use an HTML list, because it can be a link and also supports a
background image:
Example
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {

height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
Try it yourself
Example explained:
#navlist {position:relative;} - position is set to relative to allow

absolute positioning inside it
#navlist li {margin:0;padding:0;list-
style:none;position:absolute;top:0;} - margin and padding is set to 0,
list-style is removed, and all list items are absolute positioned
#navlist li, #navlist a {height:44px;display:block;} - the height of all
the images are 44px
Now start to position and style for each specific part:
#home {left:0px;width:46px;} - Positioned all the way to the left, and

the width of the image is 46px
#home {background:url(img_navsprites.gif) 0 0;} - Defines the
background image and its position (left 0px, top 0px)
#prev {left:63px;width:43px;} - Positioned 63px to the right (#home
width 46px + some extra space between items), and the width is
43px.
#prev {background:url('img_navsprites.gif') -47px 0;} - Defines the
background image 47px to the right (#home width 46px + 1px line
divider)
#next {left:129px;width:43px;}- Positioned 129px to the right (start
of #prev is 63px + #prev width 43px + extra space), and the width is
43px.
#next {background:url('img_navsprites.gif') -91px 0;} - Defines the
background image 91px to the right (#home width 46px + 1px line
divider + #prev width 43px + 1px line divider )
Image Sprites - Hover Effect
Now we want to add a hover effect to our navigation list.
Tip: The :hover selector can be used on all elements, not only on links.
Our new image ("img_navsprites_hover.gif") contains three navigation

images and three images to use for hover effects:
Because this is one single image, and not six separate files, there will be no
loading delay when a user hovers over the image.
We only add three lines of code to add the hover effect:
Example
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
Try it yourself
Example explained:
#home a:hover {background: transparent

url('img_navsprites_hover.gif') 0 -45px;} - For all three hover images
we specify the same background position, only 45px further down
CSS Attribute Selectors
Previous
Next Chapter
Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute
values.
CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
Example
a[target] {
}
Try it yourself
CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified
attribute and value.
The following example selects all <a> elements with a target="_blank"
attribute:
Example
a[target="_blank"] {
}
Try it yourself
CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute
value containing a specified word.
The following example selects all elements with a title attribute that contains
a space-separated list of words, one of which is "flower":
Example
[title~="flower"] {
border: 5px solid yellow;
}
Try it yourself
The example above will match elements with title="flower", title="summer

flower", and title="flower new", but not title="my-flower" or title="flowers".
CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the
specified attribute starting with the specified value.
The following example selects all elements with a class attribute value that
begins with "top":
Note: The value has to be a whole word, either alone, like class="top", or
followed by a hyphen( - ), like class="top-text"!
Example
[class|="top"] {
background: yellow;
}
Try it yourself
CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute
value begins with a specified value.
begins with "top":
Note: The value does not have to be a whole word!
Example
[class^="top"] {
background: yellow;
}
Try it yourself
CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute
value ends with a specified value.
ends with "test":

Example
[class$="test"] {
background: yellow;
}
Try it yourself
CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute
value contains a specified value.
contains "te":
Example
[class*="te"] {
background: yellow;
}
Try it yourself
Styling Forms
The attribute selectors can be useful for styling forms without class or ID:
Example
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
Try it yourself

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise
6
More Examples of CSS Selectors

Use our CSS Selector Tester to demonstrate the different selectors.
For a complete reference of all the CSS selectors, please go to our CSS
Selectors Reference.
CSS Counters
Previous
Next Chapter
Using CSS Counters

CSS counters are like "variables". The variable values can be incremented by
CSS rules (which will track how many times they are used).
To work with CSS counters we will use the following properties:
counter-reset - Creates or resets a counter

counter-increment - Increments a counter value
content - Inserts generated content
counter() or counters() function - Adds the value of a counter to an
element
To use a CSS counter, it must first be created with counter-reset.
The following example creates a counter for the page (in the body selector),
then increments the counter value for each <h2> element and adds "Section
<value of the counter>:" to the beginning of each <h2> element:
Example
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Try it yourself
Nesting Counters
The following example creates one counter for the page (section) and one
counter for each <h1> element (subsection). The "section" counter will be
counted for each <h1> element with "Section <value of the section
counter>.", and the "subsection" counter will be counted for each <h2>
element with "<value of the section counter>.<value of the subsection
counter>":
Example
body {
}
h1 {
counter-reset: subsection;
}
h1::before {
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Try it yourself
A counter can also be useful to make outlined lists because a new instance of
a counter is automatically created in child elements. Here we use
the counters() function to insert a string between different levels of nested
counters:
Example
ol {
}
li::before {
content: counters(section,".") " ";
}
Try it yourself
CSS Counter Properties
content Used with the ::before and ::after pseudo-elements, to insert generated conte
counter- Increments one or more counter values

increment
counter- Creates or resets one or more counters

reset
CSS3 Introduction
Previous
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible with earlier versions of CSS.
This section teaches you about the new features in CSS3!
CSS3 Modules
CSS3 has been split into "modules". It contains the "old CSS specification" (wh
In addition, new modules are added.
Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
Most of the new CSS3 properties are implemented in modern browsers.
CSS3 Rounded Corners

Previous
CSS3 Rounded Corners

With the CSS3 border-radius property, you can give any element "rounded
Browser Support
The numbers in the table specify the first browser version that fully supports t
Numbers followed by -webkit- or -moz- specify the first version that worked w
Property
border-radius 5.0 12.0 9.0 4

4.0 -webkit- 3.0
CSS3 border-radius Property

With CSS3, you can give any element "rounded corners", by using the border
Here are three examples:
1. Rounded corners for an element with a specified background color:
Rounded corners!
2. Rounded corners for an element with a border:
Rounded corners!
3. Rounded corners for an element with a background image:
Rounded corners!
Here is the code:
Example
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Try it yourself
Tip: The border-radius property is actually a shorthand property for t

radius, border-top-right-radius, border-bottom-right-radius
radius properties.
CSS3 border-radius - Specify Each Corner

If you specify only one value for the border-radius property, this radius will
However, you can specify each corner separately if you wish. Here are the rule
Four values: first value applies to top-left, second value applies to top-
right, and fourth value applies to bottom-left corner
Three values: first value applies to top-left, second value applies to top
applies to bottom-right
Two values: first value applies to top-left and bottom-right corner, and
and bottom-left corner
One value: all four corners are rounded equally
Here are three examples:
1. Four values - border-radius: 15px 50px 30px 5px:
2. Three values - border-radius: 15px 50px 30px:

3. Two values - border-radius: 15px 50px:
Here is the code:
Example
#rcorners4 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 150px;
}
Try it yourself
You could also create elliptical corners:
Example
#rcorners7 {
border-radius: 50px/15px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
padding: 20px;
width: 200px;
height: 150px;
}
Try it yourself

CSS3 Rounded Corners Properties
border-radius A shorthand property for setting all the fou
border-top-left-radius Defines the shape of the border of the top
border-top-right-radius Defines the shape of the border of the top
border-bottom-right-radius Defines the shape of the border of the bot

border-bottom-left-radius Defines the shape of the border of the bot
CSS3 Border Images

Previous
CSS3 Border Images

With the CSS3 border-image property, you can set an image to be used as th
Browser Support
Numbers followed by -webkit-, -moz-, or -o- specify the first version that work
Property
border-image 16.0 12.0 11.0 1

4.0 -webkit- 3.5
CSS3 border-image Property

The CSS3 border-image property allows you to specify an image to be used i
element.
The property has three parts:
1. The image to use as the border

2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched
We will use the following image (called "border.png"):
The border-image property takes the image and slices it into nine sections, li
the corners at the corners, and the middle sections are repeated or stretched a
Note: For border-image to work, the element also needs the border propert
Here, the middle sections of the image are repeated to create the border:
An image as a border!
Here is the code:
Example
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 *
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
Try it yourself
Here, the middle sections of the image are stretched to create the border:
An image as a border!
Here is the code:

Example
#borderimg {
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
Try it yourself
Tip: The border-image property is actually a shorthand property for th

image-slice, border-image-width, border-image-outset and bord
CSS3 border-image - Different Slice Values

Different slice values completely changes the look of the border:
Example 1:
border-image: url(border.png) 50 round
Example 2:
border-image: url(border.png) 20% roun
Example 3:
border-image: url(border.png) 30% roun
Here is the code:
Example
#borderimg1 {
padding: 15px;
-webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 *
-o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
border-image: url(border.png) 50 round;
}
#borderimg2 {
padding: 15px;
-webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5
-o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
border-image: url(border.png) 20% round;
}
#borderimg3 {
padding: 15px;
-webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5
-o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
border-image: url(border.png) 30% round;
}
Try it yourself

CSS3 Border Properties
border-image A shorthand property for setting all the bo
border-image-source Specifies the path to the image to be used
border-image-slice Specifies how to slice the border image

border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border

border box
border-image-repeat Specifies whether the border image should
CSS3 Backgrounds
Previous
CSS3 Backgrounds
CSS3 contains a few new background properties, which allow greater control o
In this chapter you will learn how to add multiple background images to one e
You will also learn about the following new CSS3 properties:
background-size
background-origin
background-clip
Browser Support
Property
background-image 4.0 12.0 9.0 3

(with multiple backgrounds)
background-size 4.0 12.0 9.0 4

1.0 -webkit- 3.6
background-origin 1.0 12.0 9.0 4
background-clip 4.0 12.0 9.0 4
CSS3 Multiple Backgrounds

CSS3 allows you to add multiple background images for an element, through t
The different background images are separated by commas, and the images a
the first image is closest to the viewer.
The following example has two background images, the first image is a flower
the second image is a paper background (aligned to the top-left corner):
Example
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Try it yourself
Multiple background images can be specified using either the individual backgr
thebackground shorthand property.
The following example uses the background shorthand property (same result
Example
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.g
}
Try it yourself
CSS3 Background Size

The CSS3 background-size property allows you to specify the size of backgro
Before CSS3, the size of a background image was the actual size of the image
images in different contexts.
The size can be specified in lengths, percentages, or by using one of the two k
The following example resizes a background image to much smaller than the o
Original background image:
Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy n
dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
consequat.
Resized background image:

Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy n
dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
consequat.
Here is the code:
Example
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
}
Try it yourself
The two other possible values for background-size are contain and cover.
The contain keyword scales the background image to be as large as possible

fit inside the content area). As such, depending on the proportions of the back
positioning area, there may be some areas of the background which are not co
The cover keyword scales the background image so that the content area is c
image (both its width and height are equal to or exceed the content area). As
image may not be visible in the background positioning area.
The following example illustrates the use of contain and cover:
Example
#div1 {
background-size: contain;
}
#div2 {
background-size: cover;
}
Try it yourself
Define Sizes of Multiple Background Images

The background-size property also accepts multiple values for background s
when working with multiple backgrounds.
The following example has three background images specified, with different b
Example
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gi
url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
Try it yourself
Full Size Background Image

Now we want to have a background image on a website that covers the entire
The requirements are as follows:
Fill the entire page with the image (no white space)
Scale image as needed
Center image on page
Do not cause scrollbars
The following example shows how to do it; Use the html element (the html ele
the browser window). Then set a fixed and centered background on it. Then ad
property:
Example
html {
background: url(img_flower.jpg) no-repeat center center fixed;
background-size: cover;
}
Try it yourself
CSS3 background-origin Property

The CSS3 background-origin property specifies where the background imag
The property takes three different values:
border-box - the background image starts from the upper left corner of
padding-box - (default) the background image starts from the upper left
content-box - the background image starts from the upper left corner of
The following example illustrates the background-origin property:
Example
#example1 {
padding:35px;
background:url(img_flwr.gif);
background-origin: content-box;
}
Try it yourself
CSS3 background-clip Property

The CSS3 background-clip property specifies the painting area of the backg
The property takes three different values:
border-box - (default) the background is painted to the outside edge of

padding-box - the background is painted to the outside edge of the padd
content-box - the background is painted within the content box
The following example illustrates the background-clip property:

Example
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
Try it yourself

CSS3 Background Properties
background A shorthand property for setting all the back
background-clip Specifies the painting area of the background
background-image Specifies one or more background images fo
background-origin Specifies where the background image(s) is/
background-size Specifies the size of the background image(s

CSS3 Colors
Previous
CSS3 Colors
CSS supports color names, hexadecimal and RGB colors.
In addition, CSS3 also introduces:
RGBA colors
HSL colors
HSLA colors
opacity
Browser Support
The numbers in the table specify the first browser version that fully supports C
Property
RGBA, HSL, and HSLA 4.0 12.0 9.0 3
opacity 4.0 12.0 9.0 2

RGBA Colors
RGBA color values are an extension of RGB color values with an alpha channel
color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha
(fully transparent) and 1.0 (fully opaque).
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);
The following example defines different RGBA colors:
Example
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity *
Try it yourself
HSL Colors
HSL stands for Hue, Saturation and Lightness.
An HSL color value is specified with: hsl(hue, saturation, lightness).
1. Hue is a degree on the color wheel (from 0 to 360):

o 0 (or 360) is red
o 120 is green
o 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.
hsl(0, 100%, 30%);

hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);
The following example defines different HSL colors:
Example
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Try it yourself
HSLA Colors
HSLA color values are an extension of HSL color values with an alpha channel
color.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), w

opacity. The alpha parameter is a number between 0.0 (fully transparent) and
hsla(0, 100%, 30%, 0.3);

hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);
The following example defines different HSLA colors:
Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opa
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green wi
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green wit
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green w
Try it yourself
Opacity
The CSS3 opacity property sets the opacity for a specified RGB value.
The opacity property value must be a number between 0.0 (fully transparent)
rgb(255, 0, 0);opacity:0.2;
rgb(255, 0, 0);opacity:0.4;
rgb(255, 0, 0);opacity:0.6;
rgb(255, 0, 0);opacity:0.8;
Notice that the text above will also be opaque.
The following example shows different RGB values with opacity:
Example
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opaci
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacit
CSS3 Gradients
Previous
Gradient Backgroun
CSS3 gradients let you display smooth transitions between two or more specif
Earlier, you had to use images for these effects. However, by using CSS3 grad
and bandwidth usage. In addition, elements with gradients look better when z
generated by the browser.
CSS3 defines two types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)

Radial Gradients (defined by their center)
Browser Support
Property
linear-gradient 26.0 12.0 10.0 1

10.0 -webkit- 3.6
radial-gradient 26.0 12.0 10.0 1

10.0 -webkit- 3.6
repeating-linear-gradient 26.0 12.0 10.0 1

10.0 -webkit- 3.6
repeating-radial-gradient 26.0 12.0 10.0 1

10.0 -webkit- 3.6
CSS3 Linear Gradients

To create a linear gradient you must define at least two color stops. Color stop
smooth transitions among. You can also set a starting point and a direction (or
effect.
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...)
Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts r
Example
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6
background: linear-gradient(red, yellow); /* Standard syntax */
}
Try it yourself
Linear Gradient - Left to Right
The following example shows a linear gradient that starts from the left. It star
Example
#grad {
background: -webkit-linear-gradient(left, red , yellow); /* For Saf
background: -o-linear-gradient(right, red, yellow); /* For Opera 11
background: -moz-linear-gradient(right, red, yellow); /* For Firefo
background: linear-gradient(to right, red , yellow); /* Standard sy
}
Try it yourself
Linear Gradient - Diagonal
You can make a gradient diagonally by specifying both the horizontal and verti
The following example shows a linear gradient that starts at top left (and goes
transitioning to yellow:
Example
#grad {
background: -webkit-linear-gradient(left top, red, yellow); /* For
background: -o-linear-gradient(bottom right, red, yellow); /* For O
background: -moz-linear-gradient(bottom right, red, yellow); /* For
background: linear-gradient(to bottom right, red, yellow); /* Stand
}
Try it yourself
Using Angles
If you want more control over the direction of the gradient, you can define an
directions (to bottom, to top, to right, to left, to bottom right, etc.).
Syntax
background: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient li
The following example shows how to use angles on linear gradients:
Example
#grad {
background: -webkit-linear-gradient(-90deg, red, yellow); /* For Sa
background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 1
background: -moz-linear-gradient(-90deg, red, yellow); /* For Firef
background: linear-gradient(-90deg, red, yellow); /* Standard synta
}
Try it yourself
Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multi
Example
#grad {
background: -webkit-linear-gradient(red, yellow, green); /* For Saf
background: -o-linear-gradient(red, yellow, green); /* For Opera 11
background: -moz-linear-gradient(red, yellow, green); /* For Firefo
background: linear-gradient(red, yellow, green); /* Standard syntax
}
Try it yourself
The following example shows how to create a linear gradient (from left to right
some text:
Gradient Backgro
Example
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,bl
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,in
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,
}
Try it yourself
Using Transparency
CSS3 gradients also support transparency, which can be used to create fading
To add transparency, we use the rgba() function to define the color stops. The
can be a value from 0 to 1, and it defines the transparency of the color: 0 indi
color (no transparency).
The following example shows a linear gradient that starts from the left. It start
color red:
Example
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0
}
Try it yourself
Repeating a linear-gradient
The repeating-linear-gradient() function is used to repeat linear gradients:
Example
A repeating linear gradient:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, gree
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 2
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Try it yourself
CSS3 Radial Gradients

A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background: radial-gradient(shape size at position, start-color, ...,
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)
The following example shows a radial gradient with evenly spaced color stops:
Example
#grad {
background: -webkit-radial-gradient(red, yellow, green); /* Safari
background: -o-radial-gradient(red, yellow, green); /* For Opera 11
background: -moz-radial-gradient(red, yellow, green); /* For Firefo
background: radial-gradient(red, yellow, green); /* Standard syntax
}
Try it yourself
Radial Gradient - Differently Spaced Color Stops
The following example shows a radial gradient with differently spaced color sto
Example
#grad {
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);
background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* F
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /*
background: radial-gradient(red 5%, yellow 15%, green 60%); /* Stan
}
Try it yourself
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse.
The following example shows a radial gradient with the shape of a circle:
Example
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /*
background: -o-radial-gradient(circle, red, yellow, green); /* Oper
background: -moz-radial-gradient(circle, red, yellow, green); /* Fi
background: radial-gradient(circle, red, yellow, green); /* Standar
}
Try it yourself
Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:
closest-side
farthest-side
closest-corner
farthest-corner
Example
A radial gradient with different size keywords:
#grad1 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side, red, yel
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow,
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, closest-side, red, yellow
background: radial-gradient(closest-side at 60% 55%, red, yellow, b
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, ye
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow,
background: -moz-radial-gradient(60% 55%, farthest-side, red, yello
background: radial-gradient(farthest-side at 60% 55%, red, yellow,
}
Try it yourself
Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
Example
A repeating radial gradient:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, gree
/* For Opera 11.6 to 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%
background: -moz-repeating-radial-gradient(red, yellow 10%, green 1
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
CSS3 Shadow Effects

Previous
With CSS3 you can create shadow effect
CSS3 Shadow Effects

With CSS3 you can add shadow to text and to elements.
In this chapter you will learn about the following properties:
text-shadow
box-shadow
Browser Support
Numbers followed by -webkit- or -moz- specifies the first version that worked
Property
text-shadow 4.0 12.0 10.0 3
box-shadow 10.0 12.0 9.0 4

4.0 -webkit- 3.5
CSS3 Text Shadow

The CSS3 text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the verti
Text shadow effect!

Example
h1 {
text-shadow: 2px 2px;
}
Try it yourself
Next, add a color to the shadow:
Text shadow effect!

Example
h1 {
text-shadow: 2px 2px red;
}
Try it yourself
Then, add a blur effect to the shadow:
Text shadow effect!

Example
h1 {
text-shadow: 2px 2px 5px red;
}
Try it yourself
The following example shows a white text with black shadow:
Text shadow effect!

Example
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Try it yourself
The following example shows a red neon glow shadow:

Text shadow effect!
Example
h1 {
text-shadow: 0 0 3px #FF0000;
}
Try it yourself
Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated lis
The following example shows a red and blue neon glow shadow:
Text shadow effect!

Example
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Try it yourself
The following example shows a white text with black, blue, and darkblue shado
Text shadow effect!

Example
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Try it yourself
CSS3 box-shadow Property
The CSS3 box-shadow property applies shadow to elements.
In its simplest use, you only specify the horizontal shadow and the vertical sha
This is a yellow <div> element with a black box-shadow
Example
div {
box-shadow: 10px 10px;
}
Try it yourself
Next, add a color to the shadow:
This is a yellow <div> element with a grey box-shadow
Example
div {
box-shadow: 10px 10px grey;
}
Try it yourself
Next, add a blur effect to the shadow:
This is a yellow <div> element with a blurred, grey box-shadow
Example
div {
box-shadow: 10px 10px 5px grey;
}
Try it yourself

Exercise 1 Exercise 2 Exercise
CSS3 Shadow Properties
The following table lists the CSS3 shadow properties:
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text
CSS3 Text
Previous
CSS3 Text
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-overflow
word-wrap
word-break
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -o- specify the first version that worked with a prefix.
Property
text-overflow 4.0 12.0 6.0 7
word-wrap 23.0 12.0 5.5 3
word-break 4.0 12.0 5.5 1
CSS3 Text Overflow

The CSS3 text-overflow property specifies how overflowed content that is not displayed
It can be clipped:
This is some long text that will not fit in the box
or it can be rendered as an ellipsis (...):
This is some long text that will not fit in the box
The CSS code is as follows:

Example
p.test1 {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
Try it yourself
The following example shows how you can display the overflowed content when hovering ove
Example
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
Try it yourself
CSS3 Word Wrapping

The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the
If a word is too long to fit within an area, it expands outside:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The lon
The word-wrap property allows you to force the text to wrap - even if it means splitting it in th
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The lon

Example
Allow long words to be able to be broken and wrap onto the next line:
p {
word-wrap: break-word;
}
Try it yourself
CSS3 Word Breaking

The CSS3 word-break property specifies line breaking rules.
This paragraph contains some text. This line will-break-at-hyphens.
This paragraph contains some text. The lines will break at any character.
Example
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
Try it yourself

CSS3 Text Properties

The following table lists the new CSS3 text properties:
text-align-last Specifies how to align the last line of a text
text-emphasis A shorthand for setting text-emphasis-style and text-e
text-justify Specifies how justified text should be aligned and spa
text-overflow Specifies how overflowed content that is not displayed
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long words to be able to be broken and wrap o
Previous
W3SCHOOLS EXAMS
HTML, CSS, JavaScript, PHP, jQuery, and XML Certif
COLOR PICKER
SHARE THIS PAGE
LEARN MORE:
Google Maps
Animated Buttons
Modal Boxes
JS Animations
Progress Bars
Dropdowns
HTML Includes
Color Palettes

CSS Tutorial: Examples in Each Chapter

Uploaded by

Copyright:

Available Formats

CSS Tutorial: Examples in Each Chapter

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Tutorial: Examples in Each Chapter

Uploaded by

Copyright:

Available Formats

CSS Tutorial

CSS is a stylesheet language that describes the presentation of an HTML

CSS describes how elements must be rendered on screen, on paper, or in

This tutorial will teach you CSS from basic to advanced.

Examples in Each Chapter

CSS Demo - One HTML Page - Multiple

Why Use CSS?

CSS Solved a Big Problem

HTML was created to describe the content of a web page, like:

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

CSS Syntax and Selectors

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by

Each declaration includes a CSS property name and a value, separated by a

The element Selector

Do NOT start an ID name with a number!

The class Selector

Do NOT start a class name with a number!

you can group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Test Yourself with Exercises!

CSS How To...

Three Ways to Insert CSS

External style sheet

External Style Sheet

Here is how the "myStyle.css" looks:

Internal Style Sheet

Multiple Style Sheets

1. Inline style (inside an HTML element)

Test Yourself with Exercises!

The CSS background properties are used to define the

CSS background properties:

The background color of a page is set like this:

With CSS, a color is most often specified by:

a HEX value - like "#ff0000"

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

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

Below is an example of a bad combination of text and background image.

Background Image - Repeat Horizontally or

Some images should be repeated only horizontally or vertically, or they will

If the image above is repeated only horizontally (background-repeat:

Note: To repeat an image vertically set background-repeat: repeat-y;

Background Image - Set position and no-

The position of the image is specified by the background-

Background Image - Fixed position

Background - Shorthand property

The shorthand property for background is background:

Test Yourself with Exercises!

All CSS Background Properties

background Sets all the background properties in one declaration

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

CSS Border Properties

The following values are allowed:

dotted - Defines a dotted border