Teach Yourself Web Publishing with HTML 4 in 21 Days

Chapter 10: XHTML and Style Sheets

 

 

Objectives:

This chapter discusses style sheets, the development that Laura has been warning you about for the last nine chapters. The objectives important to this chapter are:

  • understanding the terms HTML and XHTML
  • understanding Cascading Style Sheets
  • three kinds of styles: external, embedded, and inline
  • common uses of styles
  • controlling page layout, fonts, and colors with CSS
Concepts:

To understand Laura's explanation of XHTML, you need to know that XML is Extensible Markup Language, which is used for accessing database files through the web. XML has commercial applications, especially for data transfers (like placing orders) between two or more businesses.

XHTML (Extensible Hypertext Markup Language) is a layer of rules placed on top of HTML to make it compliant with XML. More rules? Well, she has already told you some of them. Now come some explanations.

A simple HTML page is required to have certain tags in it:

  • <html> and </html>, which enclose the whole page
  • <head> and </head>, which enclose the <title> and </title> tags
  • <body> and </body>, which enclose the majority of the page text

An XHTML compliant page contains another mandatory tag. Laura refers to it as the <DOCTYPE> tag. In reality, it is just a remark, but it contains information that XHTML requires. Three versions exist, each one expressing a different degree of compliance with the idea of placing formatting commands someplace other than in tags. Only one version of this remark is used in a web page. It is placed as the first item in the page, before the opening <html> tag.

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

The tag above is the version to use if you have some formatting commands in tags, and but you placed most of your formatting in style sheet commands. (She explains style sheets in a page or two. Remain calm, all is well.)

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

The tag above is used to state that the page has no formatting command in tags themselves, but does all page formatting with some kind of style command.

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">

The third version of the tag is used with pages that contain framesets, which are physical subdivisions of the window the browser runs in. More on that in two chapters.

Now for some rules:

  • XHTML cares about the case of tags and the attributes of tags. The survival rule is use lower case only. Example: <body bgcolor="blue">
  • The values of attributes must be placed inside quotes. The example above is compliant. Example: <body bgcolor="blue">
  • All tags must be closed, either with a closing partner (like <body> and </body>) or by using the self-closing notation we have seen already in the text. Example: <hr> is no longer used; we use <hr /> instead.
  • In previous versions of HTML, you could get away with overlapping clauses. Not any more. Close tags in an order that is opposite to the order in which they are opened, as I have already told you.
    • It was permissible to do something like this: <b>This segment is bold, <i>and this segment is bold and italic,</b> while this segment is just italic.</i> This is bad. Do not do this. Laura will track you down. If she does not, her operatives will. (And some of them are Vulcans.)
    • This is the way it must be done for XHTML, assuming you want the same effect: <b>This segment is bold, <i>and this segment is bold and italic,</i></b> <i>while this segment is just italic.</i> Nesting the tags is okay, as long as you still close them in the reverse order from which they are opened.

Finally, a discussion of style. Style commands are called style rules. A style rule generally consists of two parts:

  • a selector - this is a tag that you are defining a format for. You may wish to define a style for all <h3> tags.
  • a declaration - this is where you specify an attribute and a value for the Selector

An embedded style is a style rule that is set up for a page in the <head> section of that page. It can look like this:

	<head>
	<style type="text/css">
	<!-- 	
         h3 { color: blue; 
         font-family: Arial, Helvetica 
         }
	-->
	</style>
	</head>

In the example above, I have created a rule that all <h3> tags on this page are to be shown in blue, using an Arial or Helvetica font. The h3 part is the selector. The part inside the curly braces is the declaration, the actual rule. Since I defined two rules, I separated them with a semicolon. I began a remark right after the opening <style> tag to hide the actual style rule from browsers that don't understand styles. I closed the remark just before closing the </style> tag. A browser that does not understand the <style> tag will ignore the tag itself, but must be protected from the selector and declaration of the tag. Note the use of the colon instead of an equal sign in the declaration lines, and the lack of quotation marks around the values of the attributes. Does it work? Is the Heading on this page blue? Guess what, I did it here. Look at the source code.

You can use styles two other ways. An external style sheet is used when you save your style rules in a separate file. Why do that? So you can have multiple pages that use the same style without having to duplicate the same lines in the <head> section of each one. It is a great time saver when you want to change the look of a whole site: just change the the external file. It works like this: save your style rules in a file with the extension .css, which stands for Cascading Style Sheet. Put a line in the <head> section of each web page that refer to that .css file.

	<head>
	<title> Put a title here </title>
	<link rel="stylesheet" href="YourStyleFile.css" >
	</head>

In this example, the stylesheet file is called YourStyleFile.css. The <link> tag loads it into memory while your web page is loading, so your browser can obey its rules for displaying the page. This is simpler than typing or even copying the embedded style sheet from page to page.

An inline style is a little different. In this type of style, you use the word "style" as an attribute of another tag, and define what you want done for that instance of the tag only. Laura explains that you can use this technique for any HTML tag except: <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>. You wouldn't even think of doing it for most of those, so this is not a terrible limitation. In her example, Laura uses a <p> tag like this:

	<p style="color: red; font-weight: bold">
	This text would be red and bold.
	</p>

This text is being presented with an inline style, using the technique above.

It is important to understand the cascading aspect to this. You can actually use all three style techniques in the same document. The cascade rule says that the external style sheet affects the entire page, unless there is an embedded style that overrides it. The embedded style and the external style can both be overridden by an inline style. Essentially, it is a matter of scope and proximity. An external style sheet can cascade into (affect) multiple files, but it is considered farthest away, so it is the least powerful. An embedded style affects only the page it is in. It is in the head of the page, so it is considered closer (more powerful) than an external style. An inline style affects only the particular tag that it is applied to, but it is as close to that tag as a style can get, so it is the most powerful.

For more on style sheets, see the excellent material from Dr. Joe Burns at his HTML Goodies site.

Laura presents several lists of useful properties for formatting your pages. Some settings do not have counterparts in regular HTML. For instance:

  • margin-left: can be set to a number of pixels, inches, etc. or a percentage of available space.
  • margin-right: can be set as above, but affects the right margin of the page.
  • margin: can be used to set left, right, top, and bottom margins. The trick is to use the right number of values.
    • One value is applied to all four sides of the page.
    • Two values - the first is applied to top and bottom, the second to right and left.
    • Three values - first is for the top, second for right and left, third is for bottom.
    • Four values - applied to top, right, bottom, and left in that order.
  • color: this is used to set the color of text
  • background-color: can be used to give a background color to an object different from the rest of the page.
  • background-image: used to specify the .gif or .jpg file for a background
  • background-repeat: Usually a background tiles on a page. This is equivalent to the setting background: repeat. It can be modified in a style to repeat only horizontally (background: repeat-x), only vertically (background: repeat-y), or not repeat at all (background: none).

Modifying fonts with styles is like using <font> tags, but more efficient and more flexible. Also, more confusing, since the properties and values are different from what you use in <font> tags:

  • font-family: this is used to select the face of the font, such as Arial or Times Roman
  • font-size: this is used to set the size of the font, in the 1 through 7 scale, the point scale, or a relative scale (small, medium, large, xx-large)
  • font-style: this is used to select italic or normal
  • font-weight: this is used to select a degree of boldness
  • font-variant: can be used to select small caps

With regard to choosing fonts for a given page element, remember that not all computers will have all fonts on them. Some rules of thumb have been developed to address the issue of what fonts a user is likely to have.

  1. If you wish to use a Serifed font, try setting it to this list:
    "Times New Roman, Times, serif",
    or this one: "Georgia, Times New Roman, Times, serif"
  2. If you wish to use a San-Serif font, try this list:
    "Arial, Helvetica, sans-serif"
    or this one: "Verdana, Arial, Helvetica, sans-serif"
  3. If you wish to use a monospaced font, try this list:
    "Courier New, Courier, mono"

There are other settings in the chapter worth knowing, but the key is to practice a few. The assignment made in class is as follows: Create a page demonstrating an embedded style sheet. Use inline styles as well to override and to supplement the embedded styles. Use style to manage color, size, placement, and other settings as noted in the chapter.