ptg16476052168 LESSON 8: Using CSS to Style a Site
devices. By setting the text size to be relative to the viewport, you can ensure that it will
be legible even on small screens.
Percentage units are also extremely common. They’re written as you’d expect: 200% (with
no spaces). The thing to remember with percentages is that they’re always relative to
something. If you set a font size to 200%, it will be double the size of the font it inherited
through CSS, or 200% of the browser’s default font size if no font size has been applied
to that element. If you set a <div> ’s width to 50%, it will be half as wide as the enclosing
element (or the browser window, if there’s no enclosing element). When you use percent-
ages, always keep in mind what you’re talking about a percent of.Using Percentage Units
When you use percentages as units , bear in mind that the percentage applies not
to the size of the page, but rather to the size of the box that encloses the box to
which the style applies. For example, if you have a <div> with its width set to 50%
inside a <div> with its width set to 500px, the inner <div> will be 250 pixels wide.
However, if the outer <div> were also set to 50%, it would be half as wide as the
browser window, and the inner <div> would be 25% of the width of the browser win-
dow.Color units can be specified in a variety of ways. Some colors can be specified by name,
or you can use color codes. I’ll talk about how colors are specified shortly.
Most of the time, when you use URL units, they’re used in the <a> tag or <img> tag. In
CSS, they’re usually included to specify the location of a background image or a bullet
image for a list. Generally, URLs are specified like this :
url('http://www.example.com/')Specifying Colors......................................................................................
As you’ve already seen, browsers understand some color names. Unfortunately, once you
get past a few common names like black and white, things become more uncertain. It’s
better to define colors by the specific shade. For reasons related to the way computer dis-
plays work, in CSS and HTML, colors are created by mixing red, green, and blue. When
you specify a color, you specify the intensity of those three colors and a distinct color
results.
Aside from color names, there are several ways to specify colors using CSS:
n Hexadecimal—A six-character string that comprises three two-digit hexadecimal
numbers that represent the intensity of red, green, and blue on a scale of 00 to FF
(255 in decimal)