Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Units

CSS Units | CSS for Beginners - Class 6 PDF Download

CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.

Example
Set different length values, using px (pixels):

h1 {

  font-size: 60px;

}


p {

  font-size: 25px;

  line-height: 50px;

}

Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: absolute and relative.

Absolute Lengths


The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.CSS Units | CSS for Beginners - Class 6

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

Relative Lengths


Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

CSS Units | CSS for Beginners - Class 6

Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

Browser Support


The numbers in the table specify the first browser version that fully supports the length unit.

CSS Units | CSS for Beginners - Class 6

The document CSS Units | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Viva Questions

,

shortcuts and tricks

,

pdf

,

ppt

,

past year papers

,

Extra Questions

,

CSS Units | CSS for Beginners - Class 6

,

CSS Units | CSS for Beginners - Class 6

,

Previous Year Questions with Solutions

,

mock tests for examination

,

Free

,

Sample Paper

,

CSS Units | CSS for Beginners - Class 6

,

Objective type Questions

,

Important questions

,

study material

,

MCQs

,

Exam

,

video lectures

,

Summary

,

practice quizzes

,

Semester Notes

;