CSS Voorbeelden

De hieronder genoemde voorbeelden zijn allemaal gekoppeld aan de hoofdstukken in CSS2. Zie aldaar.


Background

Set the background color
Set an image as the background
How to repeat a background image vertically
How to repeat a background image horizontally
How to place the background image
A fixed background image (this image will not scroll with the rest of the page)
All the background properties in one declaration

Text

Set the color of the text
Specify the space between characters
Align the text
Decorate the text
Indent text
Control the letters in a text

Font

Set the font of a text
Set the size of the font
Set the style of the font
Set the variant of the font
Set the boldness of the font
All the font properties in one declaration

Border

Set the style of the four borders
Set different borders on each side
Set the color of the four borders
Set the width of the bottom border
Set the width of the left border
Set the width of the right border
Set the width of the top border
All the bottom border properties in one declaration
All the left border properties in one declaration
All the right border properties in one declaration
All the top border properties in one declaration
All the width of the border properties in one declaration
All the border properties in one declaration

Margin

Set the left margin of a text
Set the right margin of a text
Set the top margin of a text
Set the bottom margin of a text
All the margin properties in one declaration

Padding

Set the left padding of a tablecell
Set the right padding of a tablecell
Set the top padding of a tablecell
Set the bottom padding of a tablecell
All the padding properties in one declaration

List

The different list-item markers in unordered lists
The different list-item markers in ordered lists
Set an image as the list-item marker
Place the list-item marker
All list properties in one declaration

Dimension

Increase the space between lines

Classification

How to display an element?
A simple use of the float property
An image with border and margins that floats to the right in a paragraph
An image with a caption that floats to the right
Let the first letter of a paragraph float to the left
Creating a horizontal menu
Position an element relative to its normal position
Position an element with an absolute value
How to make an element invisible
Change the cursor

Positioning

Position an element relative to its normal position
Position an element with an absolute value
Set the shape of an element
What should happen when an element's content is too big to fit in a specified area
Vertical alignment of an image
Place an element "behind" another element
Place an element "behind" another element 2

Pseudo-classes

Add different colors to a hyperlink
Add other styles to hyperlinks
The use of the :first-child pseudo-class
The use of the :lang pseudo-class

Pseudo-elements

Make the first letter special in a text
Make the first line special in a text