Loading lesson path

Learn/CSS/CSS Foundations

CSS•CSS Foundations

CSS Absolute Units

Concept visual

CSS Absolute Units

Graph traversalgraph

current

queued

1

4

Start from A

Overview

Absolute units are fixed, and the length expressed in any of these will appear exactly that size. Absolute units do not change when the screen size change, and are not recommended for websites.

However, they can be used if the output medium is known, such as for print layout.

The most used absolute unit is px

(pixels).

Unit

Name

Description px

Pixels

Formula

The most used absolute unit for screens (1px = 1/96th of 1in)

Try it cm

Centimeters

Primarly used in print stylesheet

Try it mm

Millimeters

Primarly used in print stylesheet

Try it in

Inches

Primarly used in print stylesheet (1in = 96px = 2.54cm)

Try it pt

Points

Formula

A typographical unit (1pt = 1/72 of 1in)

Try it pc

Picas

A print unit (1pc = 12 pt)

Try it

Set Font Size With Px

Setting the text size with px

(pixels) gives you full control over the text size. If you use pixels, the web page may not scale very well on different screen sizes and the users cannot adjust the text size in their browser settings. However, users can still use the zoom tool to resize the entire page.

Example

Set font sizes with px:

h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}

Note:

A whitespace cannot appear between the number and the unit. However, if the value is , the unit can be omitted.

Loading lesson path

Learn/CSS/CSS Foundations

CSS•CSS Foundations

CSS Absolute Units

Concept visual

CSS Absolute Units

Graph traversalgraph

current

queued

1

4

Start from A

Overview

Absolute units are fixed, and the length expressed in any of these will appear exactly that size. Absolute units do not change when the screen size change, and are not recommended for websites.

However, they can be used if the output medium is known, such as for print layout.

The most used absolute unit is px

(pixels).

Unit

Name

Description px

Pixels

Formula

The most used absolute unit for screens (1px = 1/96th of 1in)

Try it cm

Centimeters

Primarly used in print stylesheet

Try it mm

Millimeters

Primarly used in print stylesheet

Try it in

Inches

Primarly used in print stylesheet (1in = 96px = 2.54cm)

Try it pt

Points

Formula

A typographical unit (1pt = 1/72 of 1in)

Try it pc

Picas

A print unit (1pc = 12 pt)

Try it

Set Font Size With Px

Setting the text size with px

(pixels) gives you full control over the text size. If you use pixels, the web page may not scale very well on different screen sizes and the users cannot adjust the text size in their browser settings. However, users can still use the zoom tool to resize the entire page.

Example

Set font sizes with px:

h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 17px;
}

Note:

A whitespace cannot appear between the number and the unit. However, if the value is , the unit can be omitted.