Home arrow Style Sheets arrow Page 4 - Learn CSS, part 2: Units of Measurement
STYLE SHEETS

Learn CSS, part 2: Units of Measurement


In this second article in a multi-part series covering Cascading Style Sheets (CSS), we will discuss units of measurement for establishing the size of certain elements in your Web page. You will learn the difference between absolute and relative units of measurement, and which ones are better to use for particular purposes.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 31
May 23, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, part 2: Units of Measurement
  2. · Using Pixels
  3. · Using em and ex
  4. · Using Percentage
  5. · Using Absolute Measurement Units

print this article
SEARCH DEVARTICLES

Learn CSS, part 2: Units of Measurement - Using Percentage
(Page 4 of 5 )

With CSS you can use a percentage value for the font size property (as well as other properties, but here we are focusing on fonts). The percentage value is relative to the user's default font, so when you define a font size with the value 50 percent, and the default font size was 16px (like the Mozilla browser's default font size), you get an 8px font size. Let's see an example:

body
{
  font-family: Arial, sans-serif;
  color: red;
}

h1
{
  font-size: 150%;
  background-color: aqua;
}

p
{
  font-size: 80%;
}

Here is the HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" href="paragraph.css" type="text/css">
    <title>Measurement Units with CSS</title>
  </head>
  <body>
    <h1>What's CSS?</h1>
    <p>
      CSS is a powerful formatting language for the web that is being used
with markup languages like HTML, XHTML and XML and that's because the
natural of the language. CSS uses the markup element name for applying
formatting styles.
    </p>
    <h1>CSS and Markup Languages</h1>
    <p>
      You can't use css as a stand-alone styling language because you
need something to style, like HTML or XHTML page.
    </p>
  </body>
</html>
 

When you open the Web page, you will get the following:

We have defined a font size value of 150 percent for the h1 selector, which means 1.5 times the default font size, and we have set the value 80 percent to the font size property of the selector p, so we have 0.8 of the default font size. Note that the user can change the default font size, and the text will resize to accommodate the new size.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials