To JeSt H1

To JeSt PaRaGrAf

Hello world!

Every element on the page will be affected by the style.

Me too!

And me!

Hello World!

Smaller heading!

This is a paragraph.

Hello World

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

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

rgba(255, 99, 71, 0.5)

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

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.

Transparent Boxes 2

Result with opacity:

10% opacity

30% opacity

60% opacity

opacity 1

Result with rgba():

10% opacity

30% opacity

60% opacity

default

Notice how the text gets transparent as well as the background color when using the opacity property.

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-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.

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-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

2 different border styles.

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.

The padding shorthand property - 4 values

This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

The three headings above are aligned center, left and right.

Example text-align: justify

The text-align: justify; value stretches the lines so that each line has equal width (like in newspapers and magazines).

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'