CSS Examples - XHTML schools

Examples

CSS Example

Explanation of examples

Examples CSS Syntax

CSS Example

Explanation of examples CSS Syntax

Examples CSS Id and Class

CSS Example
CSS Example
CSS Example

Explanation of examples CSS Id and Class

Examples CSS Background

CSS Example
CSS Example
CSS Example
CSS Example
CSS Example
CSS Example
CSS Example
CSS Example
CSS Example
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.

Explanation of examples CSS Background

Examples CSS Text

CSS Text Formatting Example
CSS Text Formatting Example
CSS Text Formatting Example
CSS Text Formatting Example
CSS Text Formatting Example
CSS Text Formatting Example
CSS Text Formatting Example
This example demonstrates how to increase or decrease the space between characters.
This example demonstrates how to specify the space between the lines in a paragraph.
This example demonstrates how to change the text direction of an element.
This example demonstrates how to increase the white space between words in a paragraph.
This example demonstrates how to disable text wrapping inside an element.
This example demonstrates how to set the vertical align of an image in a text.

Explanation of examples CSS Text

Examples CSS Font

CSS Font Example
CSS Font Example
CSS Font Example
CSS Font Example
CSS Font Example
This example demonstrates how to set the boldness of a font.
This example demonstrates how to set the variant of a font.
This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration.

Explanation of examples CSS Font

Examples CSS Links

CSS Links Example
CSS Links Example
CSS Links Example
This example demonstrates how to add other styles to hyperlinks.
This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes.

Explanation of examples CSS Links

Examples CSS Lists

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

Explanation of examples CSS Lists

Examples CSS Tables

CSS Tables Example
CSS Tables Example
CSS Tables Example
CSS Tables Example
CSS Tables Example
CSS Tables Example
CSS Tables Example
This example demonstrates how to create a fancy table.
This example demonstrates how to position the table caption.

Explanation of examples CSS Tables

Examples CSS Box Model

CSS Box Model Example
CSS Box Model Example

Explanation of examples CSS Box Model

Examples CSS Border

CSS Border Example
CSS Border Example
CSS Border Example
CSS Border Example
CSS Border Example
CSS Border Example
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.
This example demonstrates how to set the style of the bottom border.
This example demonstrates how to set the width of the left border.
This example demonstrates how to set the color of the four borders. It can have from one to four colors.
This example demonstrates how to set the color of the right border.

Explanation of examples CSS Border

Examples CSS Outlines

This example demonstrates how to draw a line around an element, outside the border edge.
This example demonstrates how to set the style of an outline.
This example demonstrates how to set the color of an outline.
This example demonstrates how to set the width of an outline.

Explanation of examples CSS Outlines

Examples CSS Margin

CSS Margin Example
CSS Margin Example
This example demonstrates how to set the top margin of a text using a cm value.
This example demonstrates how to set the bottom margin of a text using a percent value.

Explanation of examples CSS Margin

Examples CSS Padding

CSS Padding Example
CSS Padding Example
This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.
This example demonstrates how to set the left padding of a p element.
This example demonstrates how to set the right padding of a p element.
This example demonstrates how to set the top padding of a p element.
This example demonstrates how to set the bottom padding of a p element.

Explanation of examples CSS Padding

Examples CSS Grouping and Nesting Selectors

CSS Grouping and Nesting Selectors Example
CSS Grouping and Nesting Selectors Example

Explanation of examples CSS Grouping and Nesting Selectors

Examples CSS Dimension

This example demonstrates how to set the height of different elements.
This example demonstrates how to set the height of an element using a percent value.
This example demonstrates how to set the width of an element using a pixel value.
This example demonstrates how to set the maximum height of an element.
This example demonstrates how to set the maximum width of an element using a percent value.
This example demonstrates how to set the minimum height of an element.
This example demonstrates how to set the minimum width of an element using a pixel value.

Explanation of examples CSS Dimension

Examples CSS Display and Visibility

CSS Display and Visibility Example
CSS Display and Visibility Example
CSS Display and Visibility Example
CSS Display and Visibility Example
This example demonstrates how to display an element as an inline element.
This example demonstrates how to display an element as a block element.
This example demonstrates how to make a table element collapse.

Explanation of examples CSS Display and Visibility

Examples CSS Positioning

CSS Positioning Example
CSS Positioning Example
CSS Positioning Example
CSS Positioning Example
CSS Positioning Example
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
This example demonstrates how to set the overflow property to create a scroll bar when an element's content is too big to fit in a specified area.
This example demonstrates how to set the browser to automatically handle overflow.
This example demonstrates how to change the cursor.

Explanation of examples CSS Positioning

Examples CSS Float

CSS Float Example
CSS Float Example
CSS Float Example
Let an image float to the right in a paragraph. Add border and margins to the image.
Let an image with a caption float to the right.
Let the first letter of a paragraph float to the left and style the letter.
Use float with a list of hyperlinks to create a horizontal menu.
Use float to create a homepage with a header, footer, left content and main content.

Explanation of examples CSS Float

Examples CSS Horizontal Align

CSS Horizontal Align Example
CSS Horizontal Align Example
CSS Horizontal Align Example
CSS Horizontal Align Example
CSS Horizontal Align Example

Explanation of examples CSS Horizontal Align

Examples CSS Pseudo-classes

CSS Pseudo-classes Example
CSS Pseudo-classes Example
CSS Pseudo-classes Example
CSS Pseudo-classes Example
This example demonstrates how to use the :focus pseudo-class.

Explanation of examples CSS Pseudo-classes

Examples CSS Pseudo-elements

CSS Pseudo-elements Example
CSS Pseudo-elements Example
CSS Pseudo-elements Example
CSS Pseudo-elements Example
CSS Pseudo-elements Example

Explanation of examples CSS Pseudo-elements

Examples CSS Navigation Bar

CSS Navigation Bar Example
CSS Navigation Bar Example
CSS Navigation Bar Example
Fully styled vertical navigation bar example
CSS Navigation Bar Example
Fully styled horizontal navigation bar example
CSS Navigation Bar Example
Fully styled horizontal navigation bar example

Explanation of examples CSS Navigation Bar

Examples CSS Image Gallery

Image Gallery Example

Explanation of examples CSS Image Gallery

Examples CSS Image Opacity / Transparency

Creating a Transparent Image Example
Image Transparency - Mouseover Effect Example
Text in Transparent Box Example

Explanation of examples CSS Image Opacity / Transparency

Examples CSS Image Sprites

Image Sprites - Simple Example
Image Sprites - Create a Navigation List
Image Sprites - Hover Effect

Explanation of examples CSS Image Sprites

Examples CSS Attribute Selectors

CSS Attribute Selector Example
CSS Attribute and Value Selector Example
CSS Attribute and Value Selector - Multiple Values Example
CSS Attribute and Value Selector - Multiple Values Example
CSS Styling Forms Example

Explanation of examples CSS Attribute Selectors

Examples CSS Don`t

CSS Internet Explorer Behaviors - Mouseover Highlight
CSS Internet Explorer Behaviors - Typewriter Simulation

Explanation of examples CSS Don`t

Examples CSS Web Safe Font Combinations

CSS Web Safe Font Combinations

Explanation of examples CSS Web Safe Font Combinations

Examples .class

How to select all elements that has the class "intro":
How to style all <p> elements with class="hometown":

Explanation of examples .class

Examples #id

How to style the element with id="firstname":

Explanation of examples #id

Examples *

How to select all elements, and set their background color:
How to select all elements inside <div> elements:

Explanation of examples *

Examples element

How to style all <p> elements:

Explanation of examples element

Examples element,element

How to style all <div> elements AND all <p> elements:
How to style many elements with the same style:

Explanation of examples element,element

Examples element element

How to style <p> elements inside <div> elements:

Explanation of examples element element

Examples element>element

How to style all <p> elements who's parent is a <div> element:

Explanation of examples element>element

Examples element+element

How to style all <p> elements that are placed immediately after a <div> element:

Explanation of examples element+element

Examples [attribute=value]

How to style links, but only links with taget="_blank":

Explanation of examples [attribute=value]

Examples [attribute~=value]

How to style elements, with a title attribute that contains the word "flower":

Explanation of examples [attribute~=value]

Examples [attribute|=value]

How to style elements, where the lang attribute's value starts with "en":
The [attribute|=value] selector can of course be used for other than the "lang" attribute:

Explanation of examples [attribute|=value]

Examples :link

How to style links (<a> elements with an href):
How to style a link, unvisited, visited, active, and when you mouse it:
How to give different links different styles:

Explanation of examples :link

Examples :visited

How to style links to previously visited pages:

Explanation of examples :visited

Examples :active

How to style active links:

Explanation of examples :active

Examples :hover

How to style a link when you mouse over it:

Explanation of examples :hover

Examples :focus

How to style a text field when it gets focus:

Explanation of examples :focus

Examples :first-letter

How to style the first letter of all <p> elements:
How to style the first letter of the <p> element with id="hometown":
The :first-letter is often used in newspapercolumns to make a BIG first letter:

Explanation of examples :first-letter

Examples :first-line

How to style the first line of all <p> elements:
How to style the first line of all <p> elements with class="intro":

Explanation of examples :first-line

Examples :first-child

How to style all <p> elements that are the first child of its parent:
Style the first <i> element of every parent element:
Style all <i> element of every <p> element, where the <p> element is the first child of its parent:
Style the first <li> element of every list:
Style the first element of every <ul> element:

Explanation of examples :first-child

Examples :before

How to insert content before all <p> elements:
Style the inserted content:

Explanation of examples :before

Examples :after

How to insert content after all <p> elements:
Style the inserted content:

Explanation of examples :after

Examples :lang

How to style <p> elements with attribute lang="it":

Explanation of examples :lang

Examples background

How to specify all the background properties in one declaration:

Explanation of examples background

Examples background-attachment

How to specify a fixed background-image:

Explanation of examples background-attachment

Examples background-color

Set the background-color of different elements:
This example demonstrates how to set the background-color of a part of the text.

Explanation of examples background-color

Examples background-image

Set a background-image for the body element:

Explanation of examples background-image

Examples background-position

How to position a background-image:
This example demonstrates how to position an image on the page using percent.
This example demonstrates how to position an image on the page using pixels.

Explanation of examples background-position

Examples background-repeat

Repeat a background-image only vertically:
This example demonstrates how to repeat a background image both vertically and horizontally:
This example demonstrates how to repeat a background image only horizontally.
This example demonstrates how to display a background image only one time, with no-repeat.

Explanation of examples background-repeat

Examples border

Set the style of the four border:

Explanation of examples border

Examples border-bottom

Set the style of the bottom border:

Explanation of examples border-bottom

Examples border-bottom-style

Set the style of the bottom border:

Explanation of examples border-bottom-style

Examples border-bottom-width

Set the width of the bottom border:

Explanation of examples border-bottom-width

Examples border-color

Set the color of the four borders:

Explanation of examples border-color

Examples border-left

Set the style of the left border:

Explanation of examples border-left

Examples border-left-color

Set the color of the left border:

Explanation of examples border-left-color

Examples border-left-style

Set the style of the left border:

Explanation of examples border-left-style

Examples border-left-width

Set the width of the left border:

Explanation of examples border-left-width

Examples border-right

Set the style of the right border:

Explanation of examples border-right

Examples border-right-color

Set the color of the right border:

Explanation of examples border-right-color

Examples border-right-style

Set the style of the right border:

Explanation of examples border-right-style

Examples border-right-width

Set the width of the right border:

Explanation of examples border-right-width

Examples border-style

Set the style of the four borders:
How to set different borders on each side of an element.

Explanation of examples border-style

Examples border-top

Set the style of the top border:

Explanation of examples border-top

Examples border-top-color

Set the color of the top border:

Explanation of examples border-top-color

Examples border-top-style

Set the style of the top border:

Explanation of examples border-top-style

Examples border-top-width

Set the width of the top border:

Explanation of examples border-top-width

Examples border-width

Set the width of the four borders:

Explanation of examples border-width

Examples outline

Set the outline around an element:

Explanation of examples outline

Examples outline-color

Set the color of a dotted outline:

Explanation of examples outline-color

Examples outline-style

Set the style of an outline:
This example demonstrates how to set the style of an outline.

Explanation of examples outline-style

Examples outline-width

Set the width of an outline:

Explanation of examples outline-width

Examples height

Set the height and width of a paragraph:
This example demonstrates how to set the height of an element using a percent value.

Explanation of examples height

Examples max-height

Set the maximum height of a paragraph:

Explanation of examples max-height

Examples max-width

Set the maximum width of a paragraph:

Explanation of examples max-width

Examples min-height

Set the minimum height of a paragraph:

Explanation of examples min-height

Examples min-width

Set the minimum width of a paragraph:

Explanation of examples min-width

Examples width

This example demonstrates how to set the width of an element using a percent value.

Explanation of examples width

Examples font

Specify all the font properties in one declaration:
This example demonstrates some of the other font property values.

Explanation of examples font

Examples font-family

Specify the font for a paragraph:

Explanation of examples font-family

Examples font-size

Set the font size for different HTML elements:

Explanation of examples font-size

Examples font-style

Set different font styles for three paragraphs:

Explanation of examples font-style

Examples font-variant

Set a paragraph to a small-caps font:

Explanation of examples font-variant

Examples font-weight

Set different font weight for three paragraphs:

Explanation of examples font-weight

Examples content

The following example inserts the URL in parenthesis after each link:
Sets the content, if specified, to nothing:
Sets the content, if specified, to normal, which default is "none" (which is nothing):
Sets the content as a counter:
Sets the content as one of the selector's attribute:
Sets the content to the text you specify
Sets the content to be an opening quote:
Removes the opening quote from then content, if specified:
Sets the content to be some kind of media (an image, a sound, a video, etc.):

Explanation of examples content

Examples counter-increment

A way to number sections and sub-sections with "Section 1", "1.1", "1.2", etc.:

Explanation of examples counter-increment

Examples quotes

Specify the quotation marks for embedded quotations:

Explanation of examples quotes

Examples list-style

Specify all the list properties in one declaration:

Explanation of examples list-style

Examples list-style-image

Specify an image as the list-item marker in a list:

Explanation of examples list-style-image

Examples list-style-position

Specify that the the list-item markers should appear inside the content flow (results in an extra indentation):

Explanation of examples list-style-position

Examples list-style-type

list-style-type

Explanation of examples list-style-type

Examples margin

Set all the four margins of a p element:

Explanation of examples margin

Examples margin-bottom

Set the bottom margin for a p element:

Explanation of examples margin-bottom

Examples margin-left

Set the left margin for a p element:

Explanation of examples margin-left

Examples margin-right

Set the right margin for a p element:

Explanation of examples margin-right

Examples margin-top

Set the top margin for a p element:

Explanation of examples margin-top

Examples padding

Set the padding of a p element:

Explanation of examples padding

Examples padding-bottom

Set the bottom padding for a p element:

Explanation of examples padding-bottom

Examples padding-left

Set the left padding for a p element:

Explanation of examples padding-left

Examples padding-right

Set the right padding for a p element:

Explanation of examples padding-right

Examples padding-top

Set the top padding for a p element:

Explanation of examples padding-top

Examples bottom

Set the bottom edge of the image to 5px above the bottom edge of its containing element:
Set the positioning of the image 100px below of it normal position:

Explanation of examples bottom

Examples clear

No floating elements allowed on the left or the right side of an image:

Explanation of examples clear

Examples clip

Clip an image:

Explanation of examples clip

Examples display

Let a paragraph generate an inline box:
This example demonstrates how to use the inherit property value:

Explanation of examples display

Examples left

Set the left edge of the image 50px to the right of the left edge of its containing element:

Explanation of examples left

Examples overflow

Set the overflow property to scroll:

Explanation of examples overflow

Examples position

Position an h2 element:
This example demonstrates how to position an element relative to its normal position.

Explanation of examples position

Examples right

Set the right edge of the image 50px to the left of the right edge of its containing element:

Explanation of examples right

Examples top

Let an image float to the right:
Set the top edge of the image to 5px below the top edge of its containing element:

Explanation of examples top

Examples visibility

Make an h2 element invisible:

Explanation of examples visibility

Examples z-index

Set the z-index for an image:

Explanation of examples z-index

Examples border-collapse

Set the collapsing borders model for a table:

Explanation of examples border-collapse

Examples border-spacing

Set the border-spacing for a table:

Explanation of examples border-spacing

Examples caption-side

Specify the placement of a table caption:

Explanation of examples caption-side

Examples empty-cells

Hide border and background on empty cells in a table:

Explanation of examples empty-cells

Examples table-layout

Set the table layout algorithm:

Explanation of examples table-layout

Examples Text Properties

Set the text direction to "right-to-left":

Explanation of examples Text Properties

Examples color

Set the text-color for different elements:

Explanation of examples color

Examples letter-spacing

Set the letter spacing for h1 and h2 elements:

Explanation of examples letter-spacing

Examples line-height

Set the line height in percent:
This example demonstrates how to specify the space between the lines in a paragraph using a pixel value.
This example demonstrates how to specify the space between the lines in a paragraph using a number value.

Explanation of examples line-height

Examples text-align

Set the text alignment for h1, h2, and h3 elements:
This example demonstrates a more advanced text-align example.