Introduction to Web Design - 10. Cascading Style Sheets | |
---|---|
10.1 Inline Styles using the "style" Attribute | 10.2 Embedded Styles in the Head Section | 10.3 External Style Sheets | |
|
As we have seen throughout the previous sections of this document, there are a number of ways to
influence the appearance of webpages with color, text sizes, font faces, etc. One piece of advice to
designers of websites, is that it is a good idea for all of the pages of a website to have the same basic
appearance. This provides a context and clues to the user regarding where they are in terms of web navigation.
If you wish to do a good bit of customizing the appearance of the pages of a website, you can imagine how
tedious and error prone it would be to include all of these customizations on each page of the website.
For example, if you wanted to specify certain colors for the background, text and links of the website, you
would need to include these attributes in each BODY tag of each page of the website. If you wanted to
dictate other aspects of the pages’ appearance, all of these would need to be written down as “rules”
to be followed when editing or adding a webpage for the site. For example, suppose you never wanted
to use an <H1> level heading because you feel that it is just too large or you wanted every <H1> level
heading to be red. Whenever you, or someone else, worked on a webpage, the “rules” would need to
be consulted to ensure a consistent appearance with the rest of the site. If the “rules” were changed,
each webpage on the site would need to be updated to conform to the new version of the rules. This
process would be tedious and errors would be likely.
Cascading Style Sheets (CSS) are an attempt to address this problem. Using a style sheet, the web designer can define the appearance aspects of many tags in one place. Then, each webpage only needs to link to the style sheet in order for the appearance specifications to be implemented on each page. If the style sheet is changed, the change will be seen the next time each page is displayed in a browser. The “cascading” aspect of Cascading Style Sheets is a consequence of the “styles” that can be dictated by the browser, the user and the designer. Styles defined by the author of a webpage take precedence over the style set by the user, which take precedence over the default style of the browser. We will look at styles that can be set by the author. However, users can specify their own style sheets, if they so desire. For example, a visually impaired person may want to specify a very large font size in their own style sheet to be used with a browser. (This can be done via the Tools/Internet Options menu selection in Internet Explorer and via the Edit/Preferences menu selection in Netscape. The user can instruct the browser to ignore author style sheets.) Additionally, when nesting tags for which styles have been defined, the inner tag will “inherit” the style of the outer tag unless the inner tag is more specific (has more details). In that case, the inner tag style will override the style of the outer tag. An example of nesting styled tags will be reviewed later in this section. This section will first take a brief look at applying the style attribute to individual tags. Then, embedded style sheets will be discussed followed by how to link to an external style sheet. Please note that many of the examples used in this section were adapted from Deitel, Deitel & Nieto (2002). 10.1 Inline Styles Using the "style" AttributeBefore getting into Cascading Style Sheets, we will look at how the appearance of individual tags can be altered with the “style” attribute. The style attribute for a tag uses Cascading Style Sheet properties and values to change the appearance of an element. (For a complete list of CSS properties, see http://www.w3.org/TR/REC-CSS2/propidx.html .) For example, the following line specifies a color (#FF0000 is red) for this particular anchor <A> tag.<A HREF = "first3.htm#cisdescriptions" style = "color: #FF0000"> CIS Course Descriptions</A> The syntax for style attribute values is the CSS property, a colon, a space and then the value. More than one CSS property can be applied to a tag using a single style attribute by placing a semicolon between the property: value pairs. For example, the following line
specifies both a color and a background color for an <H1> heading tag.
<h1 style = "color: #0000FF; background-color: #00FF00"> Additional Information </h1>
10.2 Embedded Styles in the HEAD Section of a DocumentThis section will look at how the style for a particular tag can be described once at the top of an HTML document in order to affect every use of that tag within that document. This is accomplished by using the style tag <style> … </style> tag inside the <head> section after the <title> … </title> of an HTML document. For example:<html> <head> <title> Style Tags in the HEAD section </title> <style type = "text/css"> em { background-color: #0000FF; color: #FFFFFF} h1 { font-family: arial} </style> </head> <body> <h1> Additional Information </h1> <em> Blah, blah, blah… </em> <BR> And even more blah, blah, blah... <h1> <em> More Additional Information </em> </h1> </body> </html> In this HTML page, the style tag follows the <title> of the page in the <head> section. The type attribute of the style tag indicates the MIME (Multipurpose Internet Mail Extension) type. CSS documents use the “text/css” MIME type. Other MIME types define file types for images, scripts, etc. Following the beginning style tag, is a list of tags for which styles will be defined. In this example, styles are defined for emphasis and level 1 heading (<em> and <h1>) tags. Note that the tags for which styles are specified do not include the angle brackets that are required when the tag is used in the body of the document. The style for each tag is enclosed in a set of curly braces, {}. The style for a tag is defined with property: value pairs. If more than one property is defined for a tag, semicolons are used to separate a property: value pair from the next. The em tag style demonstrates this. The em style specifies two properties: a text color as well as a background color. The style for the level 1 heading tag specifies only one property, a font-family.
10.3 External Style SheetsIf each document of a website has the same style, users will associate that “look” with the site or organization itself. It becomes a “brand” look identifiable with the site. If the style is embedded in each document, every change to the style would require changing every single document individually. If instead of putting the style specifications in each document, each document is linked to one style sheet, any change to the style need only be done in the style sheet.This section introduces a number of style properties, but there are many more that can be utilized. 10.3.1 An External Style Sheet ExampleEach part of the following example of an external style sheet will be discussed below:<!--external style sheet for Sea Jam Web Consulting --> <!--cjmstyle.css --> a { color: #800080; text-decoration: none} a:hover { text-decoration: underline; background-color: #FFFACD} body { background-image: url(images/cjmlogo.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed} p { text-indent: 2em} div { font-size: 2em; background-color: #E6E6FA; padding: .5em; margin: .5em} li { list-style: url(images/blueball2.jpg) disc } .medium { border-width: medium} .blue { border-color: #0000CD} .groovy { border-style: groove} .framelike { border-style: inset} .ltblue { border-color: #F0F8FF} The first thing to note about the external style sheet is that it is NOT an HTML document. It is a plain text file that was created in Notepad. The content of the style sheet file is similar to the content contained between the <STYLE> tags of the embedded style document discussed in the section above. The a specification: The style for the <A> tag will have the RGB color #800080. The text-decoration property is none. Other values for the text-decoration property a re underline, overline, line-through and blink. The value none will result in no underlining for the links in the documents that use this style sheet. The a:hover specification: “hover” is a pseudoclass. Pseudoclasses respond to user actions. The “hover” pseudoclass is activated when the user positions the mouse cursor over an HTML element. The result of this style for the hover pseudoclass for documents using this style sheet is that the link will have a different background color and will be underlined. Other pseudoclasses are link for unvisited links, visited for links that have been visited, and active for links that have been clicked on but have not yet loaded. Styles can be specified for each of these. The body specification: The properties used in the body style affect the background image. The first property has the URL for the background image. The background-position property specifies that the image is to appear at the bottom right of the browser window. The background attachment value is fixed, so that no matter how the browser window is re-sized, the image will always be at the bottom right corner of the window. The background-repeat property is set to no-repeat, so the image appears only once. The p specification: The style for the p tag indicates a first line indent of “2em”. The “em” notation is a relative length reference. The “em” is the “M-height” of the current font or the height of an uppercase letter “M” in the current font. “2em” gives an indentation of the height of 2 times the M-height. Other relative references are “ex”, which is the “x-height” or height of an lowercase letter “x”, and “px”, which is a pixel reference varying with the resolution of the screen. Note that when defining a style for the <p> tag, a closing tag, </p>, must be used to end the application of the style. The div specification: The <div> tag is similar to using beginning and closing <p> tags. The <div> … </div> tags define a block of text with margins above and below. The style defined for the div tag in the style sheet here defines a different background color, and a font size that is twice the “M-height” of the current font. The padding value provides space around the top, bottom and sides of the elements within the div tag. The margin value provides space around the outside of the div tags. More will be said about this later in this section. The li specification: The <li> list item tag specifies an image to use instead of the usual bullet. Note that the URL of the image is placed in parentheses. Classes: The last three items in the style sheet file are user-defined classes. These classes can be applied to tags as desired. Class names are preceded by a period. It is a good idea to name them something meaningful such as “medium” and “blue” above which indicate a medium border width and a border color of blue. However, just to prove that you can define the class name, “groovy” is a class indicating a border type of “groove” and “framelike” is a class indicating a border type of “inset”. 10.3.2 Linking an HTML page to an External Style SheetNow that we have a style sheet defined, let’s look at how we use it and look at the results of the properties, values and classes defined.To use an external style sheet, we provide a link to it within the <head> section of the HTML document after the <title> tag. The link is implemented with a <link> tag.
References
|
Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650