Making a Cascading Style SheetStyle information in HTML can be encoded in two ways. One way is to include the style information within the web page that it affects. If it's desired to change the appearance of that page later, it's only necessary to change the style code at one location on the page, and the effect is applied to the entire page. But for web sites that are more than 2-3 pages, it makes more sense to have an external file to which all pages can refer for style information. If the web site needs to have more than one style, more than one style sheet file can be made. A Very Brief OverviewA style sheet is a list of default settings. To understand how to make a style sheet, you need to know about HTML tags. Review Lesson 5-1 if you need to. Here is the link to the list of tags from Task 1. The following table shows the proper syntax for the list
In words, "wherever there is a header type 1 or header type 2, make the color of the text black". On the style sheet, it would look like this: h1,h2 {color:black; } Click here to see and example of what a style sheet might look like. Click here to see what the 'working' style sheet for this course looked like when this page was being made..
In the example, you should notice that at some locations the style sheet set a color by using a hex code, but at other locations it sets a color by using a verbal description. Here is a complete list of the official verbal descriptions for color. Both Internet Explorer and Netscape support the use of color names, but the W3C standards support only hex numbers for colors. Spaces in style sheet files (.css) are ignored unless they are within a quotation. The curly brackets and the semicolons are required. Some web designers like to space out the lines by putting the brackets on separate lines. Some think that this practice makes it easier to read the style sheet code. Using an Online Tutorial for Style SheetsAs with HTML editors, there are ample tutorials on the Internet for making style sheets. Rather than go into detail here, try one or more of these tutorials, or find another that you prefer: Linking Your Web Pages to the Style SheetSimply making the style sheet is not enough. You need to let each of your web pages know which style sheet(s) to use, and where they are located. FrontPage has made this easy. See how to do it by following this link. If you are not using FrontPage, your HTML editor may have a way to link to style sheets similar to the way FrontPage does it. If not, your can always enter the link manually for each page by adding a little code between the <head></head> tags. Here's what it looks like for the page you are reading now: <link rel="stylesheet" type="text/css" href="../webdesign.css" /> The '../' tells the web page to look up one step into the directory structure to find the style sheet. Leave it out if the style sheet is in the same folder as your web page. Making Your First Style SheetBefore starting to make your first style sheet, be sure to view a tutorial and have a good understanding of how they work and the proper format. If your HTML editor has a style sheet maker, you can use it. Otherwise, use Notepad just like you did when you 'hand coded' your HTML page. You should already have on your web site three pages that are linked together - practice3-1.htm, practice3-2.htm, and practice3-3.htm. For this task, you will be creating a style sheet and using it to control the appearance of those three pages. On your style sheet:
Save your style as practice.css and put it in the same location in your web as your other practice pages. Link from each of the three pages back to the style sheet. Discussion Board Task 5-3Make a Discussion Board posting with a link to practice3-1.htm and include your commentary about this assignment. Paste your style sheet into your Discussion Board posting and explain what you chose for the two (or more) additional style features.
|
