My First CSS Example

This is a paragraph.

Hello World!

These paragraphs are styled with CSS.

Every paragraph will be affected by the style.

Me too!

And me!

Hello World!

This paragraph is not affected by the style.

Red and center-aligned heading

Red and center-aligned paragraph.

This is a heading

This is a paragraph.

Hello World

Same as color name "Tomato":

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

Same as color name "Tomato", but 50% transparent:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

The border-width Property

This property specifies the width of the four borders:

Some text.

Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.

The border-style Property

This property specifies what kind of border to display:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A mixed border.

Transparent Boxes

When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:

opacity 0.1

opacity 0.3

opacity 0.6

opacity 1 (default)

The border-color Property

This property specifies the color of the four borders:

A solid red border

A solid green border

A dotted blue border

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Individual Border Sides

4 different border styles.

3 different border styles.

2 different border styles.

1 border style.

This property is a shorthand property for border-width, border-style, and border-color.

Normal border

Round border

Rounder border

Roundest border

CSS Margins

This element has a margin of 70px.

Using individual margin properties

This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.