CSS Example

CSS Background

Set the background color of the page

Set the background color of different elements

Set an image as the background of the page

Wrong background image

How to repeat a background image horizontally

How to position a background image

A fixed background image (this image will not scroll with the rest of the page)

Declare background properties

Advanced background examples

Explanation of background properties

CSS Text

Set the text color of different elements

Text alignment

Remove the underline from links

Text decoration

Control the letters in text

Indent text

Specify the space between characters

Specify the space between lines

Set the text direction of an element

Increase the space between words

Disable text wrapping within an element

Vertical alignment of an image inside text

 

Explanation of Text properties

CSS Fonts

Set the font of text

Set font size

Font size set with px

Set the font size with em

Set the font size with percentages and em

Set the font style

Set the font variant

Set the font weight

All font properties in one declaration

 

Explanation of font properties

CSS Links

Add different colors to visited/unvisited links

Use text decoration on links

Specify the background color of links

Add other styles to hyperlinks

Advanced - Create Link Box

 

Explanation of link properties

CSS Lists

All the different list-item markers in lists

Set an image as the list item marker

Set an image as a list item marker using a cross-browser solution

All list properties in one declaration

CSS - remove default styles from list item li

 

Explanation of list properties

CSS Tables

Specify a table's th and td elements with a black border

Use border-collapse

Specify the width and height of a table

Set the horizontal alignment of content (text-align)

Set the vertical alignment of content (vertical-align)

Specify the padding of th and td elements

Specify the color of the table border

Set the Position of the Table Caption

Create a fancy table

 

Explanation of table properties

CSS Box Model

Specify the total width of an element as 250 pixels

Specify the total width of an element as 250 pixels using a cross-browser solution

 

Explanation of the box model

CSS Borders

Set the width of the four borders

Set the width of the top border

Set the width of the bottom border

Set the width of the left border

Set the width of the right border

 

Set the style of the four borders

Set the style of the top border

Set the style of the bottom border

Set the style of the left border

Set the style of the right border

 

Set the color of the four borders

Set the color of the top border

Set the color of the bottom border

Set the color of the left border

Set the color of the right border

 

All border properties in one declaration

 

Set different borders for each side

All top border properties in one declaration

All bottom border properties in one declaration

All left border properties in one declaration

All right border properties in one declaration

 

Explanation of border properties

CSS Outline

Draw a line around an element (outline)

Set the outline style

Set the outline color

Set the outline width

 

Explanation of outline properties

CSS Margin

Specify the margin of an element

Margin shorthand property

Set the top margin value of text using centimeters

Set the bottom margin of text using a percentage value

Set the left margin of text using a centimeter value

 

Explanation of the Margin property

CSS Padding

Set the left padding of an element

Set the right padding of an element

Set the top padding of an element

Set the bottom padding of an element

All padding properties in one declaration

 

Explanation of the padding property

CSS Grouping and Nesting

Group selectors

Nesting selectors

 

Explanation of grouping and nesting

CSS Dimensions

Set the height of an image using a pixel value

Set the height of an image using a percentage

Use pixel values to set the width of an element

Set the width of an element using a percentage

Set the maximum height of an element

Set the maximum width of an element using a pixel value

Set the maximum width of an element using a percentage

Set the minimum height of an element

Use pixel values to set the minimum width of an element

Use percentages to set the minimum width of an element

 

Explanation of size properties

CSS Display

How to hide an element (visibility:hidden)

How to not display an element (display:none)

How to display an inline element

How to display a block element

How to use the collapse property of a table

 

Explanation of the Display property

CSS Positioning

Position an element relative to the browser window

Relative positioning of an element

Absolute positioning of an element

Overlapping Elements

Set the shape of an element

How to use scrollbars to display content that overflows inside an element

How to set automatic overflow handling in the browser

Use pixel values to set the top of an image

Use pixel values to set the bottom of an image

Use pixel values to set the left of an image

Use pixel values to set the right of an image

Change the Cursor

 

Explanation of positioning properties

CSS Float

Simple use of the float property

Add border and margin to an image and float it to the left of a paragraph

Title and image float to the right

Make the first letter of the paragraph float to the left

Create an image gallery using the float property

Enable the float - clear property

Create a horizontal menu

Create a web page without tables

 

Explanation of the Float property

CSS Aligning Elements

Use margin to adjust centering

Left/right position alignment

Use a cross-browser solution to set left/right position alignment

Left/right alignment with float

Use a cross-browser solution to set left/right position alignment with float

 

Explanation of alignment attributes

CSS Generated Content

Insert the URL inside the parentheses after each link using the content attribute.

Section and subsection numbering is 'Section 1', '1.1', '1.2', etc.

The quotes property specifies quotation marks

CSS pseudo-classes

Add hyperlinks of different colors

Add other styles to hyperlinks

Use: focus

:first-child - matches the first p element

:first-child - matches the first i element inside a p element

:first-child - matches all i elements in the first p element

Using :lang

 

Explanation of pseudo-classes

CSS Pseudo-elements

Make the first letter of the text special

Make the first line of text special

Make the first letter of the first line of text special

Use: insert some content before an element

Use: insert some content after an element

 

Explanation of pseudo-elements

CSS Navigation Bar

Full styling of the vertical navigation bar

Full styling of the horizontal navigation bar

 

Explanation of navigation bars

CSS Image Gallery

Image Gallery

 

Image gallery explanation

CSS Image Opacity

Create transparent images - mouse hover effect

Create a transparent box with a background image and text

 

Explanation of image opacity

CSS Image Sprites

Image Sprites

Image sprites - navigation list

Hover effects with image sprites

 

Explanation of image sprites

CSS Attribute Selectors

Select elements with the title attribute

Select elements with a title attribute equal to a specific value

Select elements with a title attribute containing a specific value (using (~) to separate attribute and value)

Select elements with a title attribute starting with a specific value (using (|) to separate attribute and value)

 

Attribute Selector Explanation

CSS Application Examples

More Examples:https://www.jyshare.com/examples/

other extensions