Styles (1)

In these notes, you will create an inline style sheet as described on page 236 of the book. I suggest you create this sample file to work with so that you can modify the internal style sheet easily and see the changes. The sample file is adapted from page 249 of the book.

<!DOCTYPE html>
<html xml:lang="en" lang="en"
    xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Style Sample Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    </style>
</head>

<body>
<h1>Marine Biology</h1>
<h2>The Composition of Seawater</h2>
<p>
Almost <em>anything</em> can be found in seawater. This includes dissolved materials from
Earth&#8217;s crust as well as materials released freom organisms. The most important
components of seawater that influence life forms are <dfn>salinity</dfn>, temperature,
dissolved gases (mostly oxygen and carbon dioxide), nutrients, and <dfn>pH</dfn>. These
elements vary in their composition as well as in their influence on marine life.
</p>
</body>
</html>

This sample file has an internal stylesheet, where you enclose your styles in a <style> element, like so. In HTML5, you may omit the type="text/css" attribute.

<style type="text/css">

</style>

Style information consists of selectors, which tell which elements you want to style, and the visual property that you want to change, and the value for that property. This takes the form:

selector { property: value; }

So, let’s say you want to select all the <dfn> elements in your document. The visual property to change is the color, and the value should be magenta. The stylesheet will look like this:

<style type="text/css">
dfn { color: magenta; }
</style>

Try it and find out. Notice that there are no angle brackets around the selector, and no quote marks around the property and value. That’s because stylesheets have their own syntax (grammar rules), and they aren’t the same as the ones for HTML.

Setting Colors

In the previous example, you set a color by giving it a name. In CSS there are four main ways to specify text color:

selector {color: "#xxxxxx"}
selector {color: rgb(r, g, b)}
selector {color: rgb(r%, g%, b%)}
selector {color: name}

The first one uses what is called a hexadecimal code, which consists of six digits and letters. The first two digits give the proportion of red, the middle two digits give the proportion of green, and the last two digits give the proportion of blue that should be combined to make up the color. This is a very computer-scientist-geeky way of specifying color.

If you want a more readable method, you can use the second form. In this format you specify the amount of red, green, and blue that you want on a scale from 0 (none at all) to 255 (as much as possible). Why 0 to 255? Again, a lot of computer geekery. Or, you can use the third format by specifying the amount of red, green, and blue that you want as percentages from 0 to 100.

The last form lets you specify a color by name. There are 148 different color names available; here is a list of them.

Try these forms by changing the style in your sample file to read like so:

<style type="text/css">
    h1 { color: #ff0000 }
    h2 { color: rgb(0, 128, 128) } 
    p { color: rgb(50%, 50%, 50%) }
    em { color: DarkRed}
    dfn { color: fuchsia }
</style>

The <h1> will turn red, the <h2> will turn a teal color (no red, half green, half blue). The paragraph will become gray (50% of red, green, and blue), and the <em> will become dark red. If this isn’t what you see and you aren’t color-blind, then you have mistyped something!

Notice that there are two <dfn> elements in the page, so they both become magenta (a more common name for fuchsia). Also note that you can use capital letters to make your color names easier to read.

Sized Text

Let’s change one of the selectors. We want all paragraphs to be in 12-point size. To change the size in which text is displayed, the declaration will add the a font-size property with a value. The font size is specified as a number and units. Since you want text to be displayed as 12 point, you modify the specifier for the <p> element:

p {
    color: rgb(50%, 50%, 50%);
    font-size: 12pt;
}

Important: you can not leave a blank after the number! You must abbreviate “points” as pt, not pts or point or points.

Notice where the curly braces are in the modified specification. Normally, you want the curly braces on lines by themselves if you have more than one property or value to set. Although whitespace doesn’t matter to the browser, it does make things easier to read if you indent properly. Notice also that each property/value pair ends with a semicolon. The semicolon separates the property/value pairs. Technically, the last pair does not need one, but putting one in makes your markup more consistent.

There are units other than pt that you may use:

AbbreviationUnit
pt points (there are 72 points per inch)
pc picas (there are 6 picas per inch)
in inches (1 inch = 2.54 centimeters)
px pixels (one dot on the screen)
em ems (1 em = the height of the current font)
ex exes (1 ex = the height of a lowercase letter “x” in the current font)

Try changing the font-size to each of the following to see what happens to the paragraph: 18pt, 0.75in, 22px, 2em (this should make the text double its normal size), 3ex, and 0.5cm

But wait, there’s more! You can use keywords for font sizes: xx-small, x-small, small, medium (the default size), large, x-large, and xx-large.

But wait, there’s even more! You can specify the font size as a percentage of the current size. If you want the font to be one and a half times as large as normal, specify font-size: 150%; for three-fourths normal size, use font-size: 75%. Try it and find out.

Font Families

To change the typeface, you use the font-family presentation property in your style attribute. Change your specification to look like this:

h1 {
  color: #ff0000;
  font-family: Arial, Helvetica, sans-serif;
}

You can specify a single font name for a font family, or you can specify several names. In the preceding example, the browser first looks to see if you have Arial font installed. If so, that’s what it uses. Otherwise, it checks to see if you have Helvetica installed, and if you do, the browser uses it. Finally, if it can’t find either of those fonts, it will use a generic sans-serif font.

Try these others, one at a time, to see what the effect is:

font-family: Times New Roman, Times, serif;
font-family: Courier New, Courier, monospace;

Inheritance

When you looked at the result of the previous stylesheet (you are trying it out, aren’t you?!), you saw that the definitions also appeared in 12-point Arial font. Because the <dfn> elements are nested within the <p>, they inherit all of their parent’s visual properties.

“But wait,” you say. “What if there’s a conflict?” Change the stylesheet as follows, and see what happens.

<style type="text/css">
dfn {
    color: fuchsia;
    font-size: 14pt;
}
p {
    color: rgb(50%, 50%, 50%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
}
</style>

You see that the definitions inherit the font-family (where there is no conflict), but the font-size on the definition overrides the setting on the paragraph.

Other Properties

There are properties besides color, text size,and font family that you can set in a stylesheet. Here is a very complete reference for CSS.

One very common mistake is for people to specify font-style: bold;; this does not work because bold indicates the font’s weight, not its style. Another common mistake is to try to specify font-color; there is no such thing. It’s just plain color.

Background Images

You can do more than specify a background-color for an element. You can specify an image which is to be tiled, that is, repeated horizontally and vertically to cover the element’s area. It’s called tiling because it’s like putting identical tiles on a floor to cover it.

brown tile Let’s say you have a light brown tile like the one you see at the right, stored in a file named tan_tile.jpg in the pictures directory. The following stylesheet shows how to tile the entire body of the document; we are tiling the area to show what it looks like:

<style type="text/css">
body {
   background-image: url(pictures/tan_tile.jpg);
}
</style>

You must put the opening parenthesis directly after the word url; no spaces allowed! You do not need to put quote marks around the filename unless it contains blanks, but you know better than to put blanks in filenames anyway.

But wait, there’s more! With modern browsers, you can tell the browser to tile only in the vertical direction or in the horizontal direction, tell where the image should start relative to the top and left of the screen, and whether the background should scroll with the content or stay in a fixed position on the screen. You can experiment with all these properties if you are using a standards-compliant browser such as Mozilla, Internet Explorer 6, or Opera.