Hello world

I am normal

I am red

I am blue

I am big

xx-small

x-small

small

medium

large

x-large

xx-large

xxx-large

smaller

larger

12px

0.8em

80%

inherit

initial

unset

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

HTML Small Formatting

HTML Marked Formatting

My favorite color is blue red.

My favorite color is red.

This is _subscripted text.

This is ^{superscripted} text.

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

My name is Hege Refsnes.

My name is Hege Refsnes.

This is heading 1

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

This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.

This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.

This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.

This is heading 1

This is heading 2

The object-fit Property

No object-fit:

object-fit: fill (this is default):

object-fit: contain:

object-fit: cover:

object-fit: scale-down:

object-fit: none:

My name is Donald

I live in Ducksburg

My name is Donald

The content Property

• Coffee
• Tea
• Coca Cola

The text-align Property

The text-align-last Property

text-align-last: right:

text-align-last: center:

text-align-last: justify:

The text-align-last Property

text-align-last: center (affects all paragraphs):

text-align-last: center; - Only for the last paragraph:

The text-overflow Property

Hover over the div below, to see the entire text.

The word-wrap Property

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The word-break Property

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

The writing-mode Property

Some text with default writing-mode.

Some text with a span element with a vertical-rl writing-mode.

Some text with writing-mode: vertical-rl.

The isolation Property

blend1

color

color-burn

color-dodge

darken

difference

exclusion

hard-light

hue

lighten

luminosity

multiply

normal

overlay

saturation

screen

soft-light

Media Queries

Resize the browser window.

Make sure you reach the breakpoint at 800px when resizing this frame.