An introduction to cascading style sheets for writing center webmasters.More writing center directors and managers are discovering the importance of having a Web site for the writing center. A Web site can serve relatively simple purposes such as advertising services, listing hours of availability, explaining policies, and providing contact information, or it can have more complex purposes such as providing a storehouse of sorts for handouts, allowing students to sign up for appointments online, or serving as an entryway for asynchronous Refers to events that are not synchronized, or coordinated, in time. The following are considered asynchronous operations. The interval between transmitting A and B is not the same as between B and C. The ability to initiate a transmission at either end. or synchronous online tutoring Online tutoring refers to the process by which knowledge is imparted from a tutor, knowledge provider or expert to a student or knowledge recipient over the Internet. Online tutoring has been around almost as long as the Internet and takes the following form: . In some cases, directors and managers are also struggling with learning HTML HTML in full HyperText Markup Language Markup language derived from SGML that is used to prepare hypertext documents. Relatively easy for nonprogrammers to master, HTML is the language used for documents on the World Wide Web. to develop Web sites, while others may have staff devoted to the project. If you are involved in designing, updating, or maintaining a Web site more than a few pages long, Cascading Style Sheets (CSS (1) See Cascading Style Sheets. (2) (Content Scrambling System) The copy protection system applied to DVDs, which uses a 40-bit key to encrypt the movie. ) may help you save time. They're often used in desktop publishing desktop publishing, system for producing printed materials that consists of a personal computer or computer workstation, a high-resolution printer (usually a laser printer), and a computer program that allows the user to select from a variety of type fonts and sizes, or word processing word processing, use of a computer program or a dedicated hardware and software package to write, edit, format, and print a document. Text is most commonly entered using a keyboard similar to a typewriter's, although handwritten input (see pen-based computer) and to define a consistent look for your pages and assist in applying those benefits to your HTML-based Web sites. With CSS, you can create one file containing information about the appearance of your Web site and direct your many content pages to read that one file. While CSS can get pretty complex, I'll explain some of their advantages and limitations, introduce the different levels and types of CSS, provide information about external style sheets, and explain the basic rules of CSS (selectors and declarations). A basic knowledge of HTML is needed to understand this discussion. ADVANTAGES & LIMITATIONS OF CSS CSS can work to your advantage because it helps separate style or appearance from content. Let's consider one example: you have 25 pages where you have several <H3> size headings; you want the headings to appear as Arial font, color blue. You could individually code that information into each of your 25 HTML pages. But then what happens if you decide that all <H3> headings should be Courier font, color green? That's a lot of re-editing of your 25 pages. CSS will allow you to make changes to one file, and those 25 pages will read that CSS file to know how to display. CSS has other advantages: * It creates smaller and faster-loading pages. * It reduces the likelihood of introducing errors into HTML code. * It helps maintain consistency from page to page and creates a common look and feel to your Web site. CSS does have its limitations, however. Generally, only version 4 and later browsers support CSS, and not all browsers interpret CSS selectors or declarations precisely, largely because the two most used browsers (Internet Explorer Microsoft's Web browser, which comes with Windows starting with Windows 98. Commonly called "IE," versions for Mac and Unix are also available. Internet Explorer is the most widely used Web browser on the market. It has also been the browser engine in AOL's Internet access software. and Netscape Navigator) don't comply completely with the World Wide Web Consortium's guidelines for CSS. The good news--older browsers tend to ignore CSS (rather than refusing to display the pages), and both IE and NN continue to improve their CSS support. (For the most up-to-date information about browser compatibility The ability of a Web browser to effectively display the HTML code and execute the scripts on Web pages. The changes in HTML features since the mid-1990s, along with the versions of JavaScript and Java languages, combined with the differences between Netscape Navigator, Internet Explorer , do an Internet search for CSS/browser compatibility. DIFFERENT LEVELS & TYPES OF CSS CSS has different levels, including level 1, level 2, and level 2.1 (a level 3 is under development). Generally, each level builds upon the previous level. CSS level 1 enabled Web developers to have control over stylistic elements (such as font, color, and spacing). Level 2 added things like page breaks and automatic numbering, and level 3 will add fancy backgrounds and vertical text, among other things. (Visit the World Wide Web Consortium for a more complete description of the different levels at <http://www.w3.org>.) Likewise, different types of CSS exist, including inline styles, embedded styles, and external styles. Inline styles are placed within the HTML element
Each of these different types of styles has its uses, but for our purposes, we'll focus on external style sheets and look at two basics for headings: fonts and colors. EXTERNAL STYLE SHEETS Essentially, CSS (whether you're using external, inline, or embedded style sheets) is a kind of language that pairs attributes (like font and color) with values (like 26 pt. and #660033). External style sheets have the most ability to impact your site because (unlike inline or embedded style sheets), a change in your CSS file will result in changes to your entire site, or rather to every page linked to your style sheet. They make managing your site much easier. You begin an external style sheet as a text document (in Microsoft Notepad The text editor that comes with Windows. It is a very elementary utility, but gets the job done most of the time. See text editor and WordPad. (text, tool) Notepad - The very basic text editor supplied with Microsoft Windows. , for instance) and save it as .css (rather than .txt). Within that .css file, you'll use CSS to create rules for your Web pages to follow. CSS rules consist of selectors and declarations. SELECTORS AND DECLARATION A CSS rule is composed of two parts: selectors and declarations. The selector component of the rule consists of an HTML tag A code used in HTML to define a format change or hypertext link. HTML tags are surrounded by the angle brackets < and >.  . The
declaration component of the rule consists of a property and value.
Let's look at an example of a complete rule, including the selector
and declaration.
EXAMPLE RULE H2 {color: green} In this example rule, the selector is H2. The declaration is {color: green}. The property part of the declaration is color, while the value is green. This rule is very simple. It indicates that level 2 headings should be green. Notice that the rule is surrounded by curvy brackets {} and that a colon appears after the property. Now let's look at another, more complex example, involving both font and color in a heading: Example Rules: H1 {color: red; font-size: 26pt; font-family: Arial, sans-serif} H2 {color: silver; font-size: 18pt; font-family: Century, serif Short horizontal lines added to the tops and bottoms of traditional typefaces, such as Times Roman. Contrast with sans-serif.  }
In this example, we've set two levels of headings and made declarations for both level H1 and H2. And, like our previous example, we've also specified the color in each case (red for H1 and silver for H2). For value, you can use either the color name or the hexadecimal See hex. (mathematics) hexadecimal - (Or "hex") Base 16. A number representation using the digits 0-9, with their usual meaning, plus the letters A-F (or a-f) to represent hexadecimal digits with values of (decimal) 10 to 15. equivalent. We've also specified the font-size and the font-family of our H1 and H2 headings. You can specify font size in terms of points (as we have done) or pixels. You can also list both a specific kind of font or font family (Arial, Century, Times, Courier, Garamond, etc.) or a generic family (serif or sans serif). In our case, we listed both. If the user's browser doesn't have Arial, H1 will default to another sans-serif font face, and likewise for H2 (except the font-family will default to a serif font face). Note that unlike HTML [and code like <HTML> and </HTML>], you don't have any special code that says the style sheet is a style sheet. Remember to save as .css. There's obviously not space here to provide a complete list of all the selector/declaration properties. However, here are a couple of basic CSS guidelines to keep in mind as you begin working with CSS: * Every statement must have both a selector and a declaration and must follow proper syntax. * The declaration can have more than one property (additional properties should be separated by a semicolon). * Each property should have both the property name (color, in our first example) and a value (green). CSS AND HTML: IT ALL COMES TOGETHER Once you've created your style sheet or sheets, all that remains to be done is to tell your HTML pages where to find your style sheet and to upload your .css file to the same location as your HTML files. The following line of code should appear between your <HEAD> tags so that your HTML pages know where to find your style sheet. <LINK REL="stylesheet" TYPE="text/css" HREF (Hypertext REFerence) The HTML code used to create a link to another page. The HREF is an attribute of the anchor tag, which is also used to identify sections within a document. ="stylesheet1.css"> Of course, "stylesheet1.css" should be whatever you named your style sheet. CONCLUSION These are some of the basics of CSS by considering selectors and declarations and looking at font and color as examples, but we've barely scratched the surface of the possibilities of CSS. CSS can give you more design and type control than HTML does and save you a lot of time. Ideally, this introduction has given you enough information to decide whether or not CSS will be useful to you. If you're interested in learning more about CSS, the World Wide Web Consortium is a wonderful place to start. You'll find information about online resources, tutorials, and books, as well as a CSS validator. You can visit W3C at <http://www.w3.org/>. Summer Leibensperger University of Houston-Victoria Victoria, TX leibenspergers@uhv.edu |
|
||||||||||||||||||
Printer friendly
Cite/link
Email
Feedback
Reader Opinion