Includes the entire website plus 3 bonus chapters: Favicon, CSS navigation bar, & inserting Google Map in a web page.
There are four units of measurement in CSS:
Example: font-size: 12pt;
This is the default font size in most browsers as is for Microsoft Word.
Advantages:
Documents intended for printed media will be able to tell the device exactly what the intended size is for these units. Documents designed to be displayed primarily on the web should avoid using these units.
Disadvantages:
Example: font-size: 12px;
Advantages:
Pixels give you exact control over the size of the element, allowing you to make exact calculations of width and height for your design.
Disadvantages:
Example: font-size: 120%; (120% of the default font size)
When assigning percentage units to the font-size or line-height properties, they act like
the Em unit, where 100% equals 1em.
Advantages:
Users can resize the font using their browsers.
Disadvantages:
Resizing the font size by users will affect the look of the layout as some
Example: font-size: 1em;
Ems is relative measurement unit. One Em (1em) is equal to the height of the capital letter "M" in the default font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. Ems are set to decimal units, like 1em, and 0.9em.
Advantages:
Users can resize the font using their browsers.
Disadvantages:
Resizing the font size by users will affect the look of the layout as some
paragraphs might not fit in their table cell or <div> box.
The W3C recommends using percentages or ems. This way, you’re not affecting the usability or accessibility preferences of readers. Please keep in mind that percentage and ems units are relative units which allow resizing web pages and creates fluid layout that might cause distortion of the web page layout. If the layout of the page is important to you or your client, might then use pixels.
All the information on this website is also provided in a PDF book for only $30.
Click here to buy.
Home | Internet Basics | Fundamentals | Images & Storyboard | Styling Pages | Page Layout | Languages | Contact us
DigestWebDesign.com offers free Website Design, HTML and CSS Lessons.
Copyright © 2012 - DigestWebDesign.com