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:
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:
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:
Finally, a discussion of style. Style commands are called style rules. A style rule generally consists of two parts:
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:
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:
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.
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.
|