CS412 Subunit 3.2: The Saylor Foundation s Interactive CSS ...

[Pages:7]CS412 Subunit 3.2: The Saylor Foundation's "Interactive CSS Laboratory"

Introduction

As you have seen in the materials presented so far, a cascading style sheet (CSS) provides a convenient way to specify the styles for a web page. Cascading style sheets are composed of rules. A rule consists of a selector and one or more declarations that can specify the size and color of text, background colors, fonts, how links work, how an item on the page behaves when the mouse hovers over it, and so forth. A selector is usually an HTML tag such as p or body. Let's look at an example of a CSS rule:

body { font-family: arial; text-decoration: bold;}

This would make the font of the entire body of the HTML document Arial and also bold. Notice how the declarations are contained in braces and separated by a semicolon. You may not want to have a declaration apply to all tags in a document of a certain type. For example, perhaps you only want certain types of anchor tags to change color after being clicked. In this case, you can have a special class that you add to the HTML tag and then reference this in the CSS rule. Let's look at an example. First, here is a snippet of HTML code:

Google Amazon

Now, here is the CSS rule:

a.linkType1 {text_decoration: underline;}

The rule shown above will cause all anchors of class linkType1 to be underlined. In the HTML code above, only Google will be underlined. Amazon will not be.

In addition to specifying a class for a specific type of tag, you can also specify a rule for a class for all types of tags that are named with the class. Let's look at some HTML:

This text will appear blue This text will be black Blue Cell Black Cell

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Page 1 of 7

And here is the corresponding CSS rule:

.blueText {color:blue;}

The first line, which is part of a paragraph tag, will appear in blue. The second line will be black. The table will contain a blue cell and a black cell. So, you can see that the rule applies to any type of HTML tag as long as it has a class of "blueText."

One other aspect of cascading style sheets that is of interest to us is pseudo-classes, which are used to add special effects to some selections. For example, a pseudo-class for an anchor tag is hover. Here is how you would specify to change the color when hovering (moving the mouse) over an anchor:

a:hover {color: red;}

Style sheets are cascading, since a property set in a child tag will override a property set by a parent. While it is beyond the scope of this laboratory to review every possible thing that one can do with cascading style sheets, let's discuss a couple of types of style sheets and how these work.

Internal Cascading Style Sheet

Internal cascading style sheets are contained within the head of an HTML document. The advantage to this is that all of your styles are easily seen when writing HTML tags. The big disadvantage is that you cannot easily reuse the cascading style sheet code, since you will have to copy it into other HTML documents. An example of an internal CSS is shown in Figure 1 below.

Figure 1

Let's discuss this: Lines 6 and 7 are simply part of the HTML document and specify that we are currently working in the head, and they give the head a title. Line 8 lets the browser know that inside of the style tag is a set of styles that are of type CSS. Lines 9 through 16 contain the actual CSS code. As mentioned above, the CSS rule has a format with a selector and one or more declarations. Line 9 specifies that the body

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Page 2 of 7

element of the HTML document is going to have a font of either arial, Helvetica, or sansserif. The reason that there are three choices for font-family is because you may not know the fonts installed on the host system. Line 10 is a style for anchor tags, indicating that the text is not decorated (i.e., underline, italics, etc.). This only applies to anchor tags with a class of "link1." Lines 11 and 12 define a rule that dictates what color the link will change to after the link has been clicked. Line 13 causes the link to be underlined when you hover over it with the mouse. Lines 14 and 15 cause any text within an emphasis tag (em) to be bold and underlined. Line 16 makes any data in cells display in courier font.

Figure 2 shows the use of the internal CSS within an HTML document. Download the html code here and try to render this in a browser to see how it works.

Review Question:

1. How would the page render if the selector for line 11 was just a and not a.link1?

The solution to this can be found in the answer key.

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Page 3 of 7

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Figure 2

Page 4 of 7

External Cascading Style Sheets

In the example shown above, we used an internal style sheet. While this is convenient, it does not lend itself to reuse. Also, anyone can view the source of an HTML page and see your styles. A better approach is to use an external style sheet, which is simply a file with a css extension. Figure 3 shows the CSS code from the example above, rewritten as an external style sheet.

body { font-family: arial, helvetica, sans-serif } a.link1 { text-decoration: none; } a.link1:visited { color: red; text-decoration: none;} a:hover { text-decoration: underline; } em { font-weight: bold; text-decoration: underline } td { font-family: courier } Figure 3

Rather than present the entire HTML document again, Figure 4 shows only the part that was changed to use the external style sheet.

External Style Sheet Example

Figure 4

Lab Assignment

The solution to this can be found in the answer key.

Task 1

Given the HTML code in Figure 5 (also found here), add CSS code to accomplish the following:

1. Change the font-family for the body to arial, helvetica, and sans-serif.

2. Change the color of the body to lavender.

3. Center any text within h1 tags.

4. Set the font size of any text within h1 tags to 16.

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Page 5 of 7

5. Set the font size of any text within an ol tag to 14.

6. Set the color of any text within an ol tag to green.

7. Changed the background to light gray (#D8D8D8) for ordered list elements (li tag) with a shaded class.

8. Change any text within a paragraph tag with a note class to centered, color red, and underlined (hint: use text-decoration).

You should make this an external style sheet so that you can use it on other HTML files. When this renders after the CSS has been written, it should look like Figure 6.

CSS Interactive Laboratory Assignment My List of Things to Do Change Oil Check Tires Vacuum Car Wash Car Windows Dust Interior Complete all of this in the order which it is listed!

Figure 5

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Figure 6

Page 6 of 7

Task 2

Take a look at the HTML code in Figure 7(also found here). Add a call to your external CSS file to the code and render this in a browser.

CSS Interactive Laboratory Assignment Part 2 My Grocery List Milk Butter Scali Bread Provolone Cheese Salami Please remember all of this! Priority Items Milk Scali Bread Complete all of this in the order which it is listed!

Figure 7

Change the CSS code so that:

1. Any text within the h2 tag is centered

2. All tags with a class of note will be in red and underlined

Saylor URL: CS412 subunit 3.2 (end)

The Saylor Foundation

Page 7 of 7

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download