Cascading Style Sheets (CSS)

Size: px

Start display at page:

Download "Cascading Style Sheets (CSS)"

Holly Norton
6 years ago
Views:

Snyder4e_04 12/9/09 1:09 AM Page 111 Cascading Style Sheets (CSS) 111 Notice that the first row uses the <th> tag rather than the <td> tag to specify the column headings.

1 Snyder4e_04 12/9/09 1:09 AM Page 111 Cascading Style Sheets (CSS) 111 Notice that the first row uses the <th> tag rather than the <td> tag to specify the column headings. Cascading Style Sheets (CSS) We have used the style attribute to make the Paradoxes Web page more attractive. Without much effort we improved the page a lot from its original design, but we aren t yet using the full power of the styling capabilities available to us. Cascading Style Sheets (CSS) is the facility that is responsible for much of what is very slick on the Web pages we see everyday as we surf. It is a general styling system for documents that greatly simplifies the task of creating complex page designs. In this section we see how to use CSS. Making Style Global In thinking about the Web page in Figure 4.6, we notice that the style information was repeated for both level 2 headings: <h2 style="color:darkorange; font-family:arial"> If there were twenty level 2 headings on the page, each of them would repeat this exact information. That wastes typing, of course, but that may only be a minor annoyance. Of greater concern is that if we decide later that we want to change the design maybe we really want orangered text in Trebuchet font we must change the specification in every one of the headings. Although this might be simply updated with a Find/Replace All, for any complex page, it means making each change manually. Setting global style. The solution to the problem of repeating style information wherever it is needed is to place it in one global location inside the <head> tags, so that it applies to the whole page. We do this by placing the style information inside a pair of <style> and </style> tags. Yes, style can be used both as a tag and as an attribute. For example, <style type="text/css"> h2 {color : darkorange; font-family : arial} </style> The <style> tag contains a type attribute specifying the form of the style information; this should always be used exactly as shown here. Within the <style> and </style> tags are specifications for each tag that should have its properties adjusted. The general syntax for these specifications is elem_name { prop_name1 : spec1 ;... ; prop_namen : specn} The text between the tag s angle brackets, known as the tag element, is given (h2 in the preceding example), and after that, inside curly braces ({}), is the list of property names/specification pairs, each separated by a semicolon. The meaning is that all occurrences of the tag will be styled as specified. In this

2 Snyder4e_04 12/9/09 1:09 AM Page Chapter 4 A Hypertext Markup Language Primer way a document can be given a consistent look without having to repeat the styling information every time a style tag is used. As a further example, suppose we want to give our tables a standard form. The specification <style type="text/css"> table {outline-style : solid; outline-color : violet} th {background-color : purple; font-family : courier} td {background-color : fuchsia; font-family : arial; color : white; text-align : center} </style> does that. Several properties are specified for three table elements together when we write <tr> <th> col 1 </th> <th> col 2 </th> <th> col 3 </th></tr> <tr> <td> A </td> <td> B </td> <td> C </td></tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td></tr> and they produce this. The formatting is automatically applied. Of course, every table on the page will have this form. Notice that when the style information is given inside of <style> tags, as shown here, no quotations marks are used. In styling, closest wins. Global specification of style is extremely convenient and efficient, but what if there is an exception? For example, if all tables have the foregoing form, how do we make one of them have a violet cell and maybe change how the entries are aligned? Style the table data tags for that one table where it appears in the XHTML using the style attribute. So, we might write <tr> <td style="text-align : left"> 1 </td> <td style="background-color:violet"> 2 </td> <td style="text-align : right"> 3 </td></tr> which produces this. Notice what has happened: Only the background color in the one cell and the two alignments have changed. All of the other properties of the table the border color, the heading background, the background of the other cells, the font face, and alignment remain as given in the global specification in the <head>. This is exactly how we want styling information to work: We give the basic styling globally, and then if anything changes at a particular point on the Web page, we change it at that place, and we only say what is different from the default. Everything else applies as normal. Generally, the rule with styling information is this: The closest specification wins. In essence, the specification closer to the site blocks the specification(s) further out. It is a very smart and flexible way to organize a system.

3 Snyder4e_04 12/9/09 1:09 AM Page 113 Adding Class to Style Cascading Style Sheets (CSS) 113 The global specification of style associated with tags gives consistent formatting, but it only simplifies our Web design as long as the tag is used in only one way. For example, suppose we want different colors for tables. How can we add class to our page by using both the preceding spring pink table and this summer green table? Add class. If we want a tag, say the table tag, to be styled in several different ways, we say that we have several different classes of styling. A class is a family of styling specifications with a common name. The class is given in two places: In the style definition inside the style tags in the <head>, and at the site in the XHTML code of the <body> where we use a table of that class. For some reason, the two places work differently. For the style definition, we give the tag s class by appending the class name (here, sum) to the tag with a dot, as in <style type="text/css"> table.sum {outline-style : solid; outline-color : lime} th.sum {background-color : lightgreen; font-family : courier; color : darkgreen} td.sum {background-color : green; font-family : arial; color : white; text-align:center} </style> Then, throughout the Web page, the browser knows there is a table of the class sum that has a solid lightgreen border, and table heading and data tags of the same class to go with it. As another example, the earlier spring table in the class spr would use the form table.spr. In the <body>, when we need a table of class sum, we write <table class="sum">... </table> to use the class attribute to specify which class of style specifications will define the table. Thus, we can write <table class="sum"> <tr> <th class="sum">col 1</th><th class="sum">col 2</th> <th class="sum">col 3</th></tr> <tr> <td class="sum"> A </td> <td class="sum"> B </td> <td class="sum"> C </td> </tr> <tr> <td class="sum"> 1 </td> <td class="sum"> 2 </td> <td class="sum"> 3 </td> </tr> </table> to create a summer table different from the spring table. Class definitions are used extensively in CSS because most Web pages have many different parts that need separate styling, but the parts are built using the small set of standard XHTML tags like <table>. Obviously, style benefits greatly from class.

4 Snyder4e_04 12/9/09 1:09 AM Page Chapter 4 A Hypertext Markup Language Primer One More Simplification We originally used the global style specifications of the <head> section as a way to avoid styling every use of a tag. Now, looking at the summer table specification, it seems like we re back to writing extra attributes inside the tag to get the style we want. True, it is only one attribute, class, but it quickly becomes a nuisance. Isn t there a better way? Yes. Because all of the table data cells are to be treated in the same way in the body of the table, it should be possible to define how we want them to be for the whole table. We could put them inside the table tag specification, but that confuses the table properties with the cell properties. However, there is a table body tag, <tbody>, that encloses the rows and data of a table. It can be used to style the whole table. Thus, we declare the fall class of the table at the beginning, <style> table.fall { outline-style : solid; outline-color : orangered} tbody.fall{ background-color : chocolate; font-family : arial; color : white; text-align:center} th.fall { background-color : darkorange; font-family : courier} </style> but this time we style the <tbody> tag rather than the <td> tag. This allows the fall table to be specified more simply as <table class="fall"> <tbody class="fall"> <tr><th class="fall">col 1</th><th class="fall">col 2 </th> <th class="fall">col 3</th></tr> <tr><td> A </td><td> B </td> <td> C </td></tr> <tr><td> 1 </td><td> 2 </td> <td> 3 </td></tr> </tbody> </table> We still style the heading tags to be customized for each season, and therefore have to specify the class name for them. This is less of a nuisance than specifying the class name for every cell in the table, because the heading occurs only once per column, but it is still more typing than we want. So, let s use the specify-the-styling-information-over-a-range idea like we used before for <tbody>. This time, notice that the headings are always in their own row, so we style a table row to handle headings. To do so, change th.fall {background-color : darkorange; font-family : courier} to tr.fall {background-color : darkorange; font-family : courier} in the global style specification. Then, at the table site in the XHTML, write <tr class="fall"><th>col 1</th>< >col 2</th><th>col 3</th></tr> and the result is as intended.

5 Snyder4e_04 12/9/09 1:09 AM Page 115 Style from Files 115 Notice that the <tbody> tag tells how to style all cells in the table, but when we get to the <tr> tag inside, it specifies how to style that one row. It takes precedence over the specification of the <tbody> for two properties. Again, we see that the closest style wins, but all other properties continue to apply. Style from Files The nice part about specifying the style information inside the <style> tags is that it is all in one place, so consistent changes can be made throughout the document very easily by modifying this one site. Reusing one s previous work is a common theme in computing, and we can apply it with CSS. All of the style information that would normally be placed inside the <head> tags can be moved to a file, and then the file name can be given with a <link> tag inside the <head>. In this way many Web pages can use the same styling information. This is how Web sites ensure that the whole site is styled in a consistent way: All pages use the same styling file(s). Packaging the Basic Style To illustrate this idea, suppose we have developed the American Writers Anecdotes (AWA) page in Figure 4.7, and plan to have a series of pages about different American writers all with the same heading and styling information. We have designed a page with compatible colors and customized the links of the author tabs. Before placing the style information in a file, let s see how the links were styled. Pseudo Classes Normally, the default is for links to be blue and underlined. To change this, we style the anchor tag, as shown in Figure 4.7 at the end of the style section in the <head>: a:link {color : darkviolet; text-decoration : none} a.me:link {color : gray; text-decoration : none} a:hover {color:red} These specifications are slightly different from the styling we have used for other tags, because the anchor tag has several different states that can be styled separately. These are referred to as pseudo classes and are separated from the element by a colon (:). The three main states are link, styling for an unvisited link (anchor text) hover, styling when the cursor hovers over a link (see Figure 4.7) visited, styling for links that have been visited In the style specification, the color is set, and text-decoration that s the underline is set to none. Also, notice that we have defined a class, me, that is used to gray out the link for the current page. Thus, the Thoreau page is classified as me and the link becomes gray. One more very strange fact: If hover is styled, its style must come after link.

Snyder4e_04 12/9/09 1:09 AM Page 116 116 Chapter 4 A Hypertext Markup Language Primer Figure 4.7 The American Writers Anecdotes page for Henry David Thoreau: the source and the result (inset).

6 Snyder4e_04 12/9/09 1:09 AM Page Chapter 4 A Hypertext Markup Language Primer Figure 4.7 The American Writers Anecdotes page for Henry David Thoreau: the source and the result (inset). Moving Style to a File To use an external file for style information, place it into a file as a sequence of property/specification pairs. That is, place the specifications that are inside the <style> tags in the file, but don t include the <style> and </style> tags themselves. Like XHTML files, the style file should be created with a text editor and should be plain ASCII text. The file extension the letters that come after the last dot in the file name should be css. We follow these rules, moving the AWA page s style information into a file that we name AWAstyle.css. It contains the information between the <style> and </style> tags.

Snyder4e_04 12/9/09 1:09 AM Page 117 Style from Files 117 To incorporate the style information of the file into a page, use the <link> tag: <link rel="stylesheet" type="text/css" href="awastyle.

7 Snyder4e_04 12/9/09 1:09 AM Page 117 Style from Files 117 To incorporate the style information of the file into a page, use the <link> tag: <link rel="stylesheet" type="text/css" href="awastyle.css"> The attributes of this tag should, by now, be obvious: This link is related to the styling of the documents; the type, normally given in the <style> tag, is given here; and the file is named. After this link has been included in the program, the head section of AWA page is greatly reduced, as shown in Figure 4.8. Moving the style information out of the way certainly shortens this section of the XHTML; notice that the head section is down to three tags. Of course, it is possible to include more global style information in the head section along with styling information in a file. The global information inside the <head> will take precedence over information in the file. Cascading the Style Sheets We have seen that CSS uses the rule closest style wins. We have already seen several levels of style information, and that each can be shadowed by specifications closer to the site where the property applies. In fact, we can Figure 4.8 The AWA page for Steinbeck showing the <link> in the source code to the external style file AWAstyle.css and the result (inset).

8 Snyder4e_04 12/9/09 1:09 AM Page Chapter 4 A Hypertext Markup Language Primer identify five levels of styling information. Starting from the farthest away, we have Default, given by browser settings External, given in a file Global, given in the <head> section Range, given in an enclosing tag Site, given by the style attribute Each level is broader and more general than the levels below it. Here s how we understand these levels. At the top, the browser knows how to style the entire document based on the settings that come as a default with the browser, as modified by the user. No further information is needed. These default settings can be selectively replaced by specifications in an external file, which can be replaced by still more specifications in the global style of the head section, which can be specified further by a range and, eventually, by the tag around the information being styled. All of the style information needed at any point in the XHTML code can be found by tracing back for the closest specification. It will be found, because the default contains a specification for every styling option. The rule: closest style wins. This idea of progressively becoming more site specific is the cascading idea of the Cascading Style Sheet. It allows general styling choices to be adopted at various levels, and to be overridden as the situation become better known. It is smart and powerful. And as we shall see, it illustrates many basic ideas of computing. HTML Wrap-Up In learning XHTML, you have seen how a Web page is encoded. Although XHTML has a few more exotic features beyond those presented here, and the other Web languages have even more powerful features, they are all variations on the same theme: Tags surround all objects that appear on the page, the context is set by specifying properties of the page s tags, and each feature of the format is specified in detail, <i>isn t it?!</i>. It s so easy, even a computer can do it! Indeed, that s what happens most of the time. Web authors usually don t write HTML directly; they use Web authoring tools, such as Adobe Dreamweaver. They build the page as it should look on the screen using a WYSIWYG Web authoring program, and then the computer generates the HTML to implement it. fluencybit Uploading. Pages are created and tested on a personal computer. To be accessed from other computers on the Internet, the HTML files, the image files, and the directory structure created for them must be uploaded (transmitted) to a Web server, a process known as publishing.

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

<body bgcolor= fgcolor= link= vlink= alink= > These body attributes have now been deprecated, and should not be used in XHTML. CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,