Appendix H: Cascading Style Sheets (CSS)
Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of both worlds: content markup that reflects the logical structure of the information and the freedom to specify exactly how each HTML tag will look.
Efficient control over large document sets. The most powerful implementations of CSS will allow site designers to control the graphic "look and feel" of thousands of pages by modifying a single master style sheet document. The Web Development Team has created a CSS style sheet to control some of the most common HTML attributes including: font face, font size, and font color.
Style sheets also provide greater typographic control with less code. When using plain HTML you need to define the physical properties of an element such as the <H1> tag each time you use it. When you define these properties using CSS, that single definition, or rule, applies to every instance of the <H1> element in all documents that reference the style sheet.
In addition, style sheets offer more formatting options than plain HTML tags and extensions. For example, interline spacing, or leading, can be controlled using style sheets, as can text properties such as letter-spacing and background color. The text formatting properties are implemented well enough across most
browsers that using CSS provides cross-browser compatibility. (See Appendix C.) Source: Web Style Guide 2nd Edition. www.webstyleguide.com.
Applying a Cascading Style Sheet
CSS can be applied using inline definitions, internal style sheets, and/or external style sheets. Inline style definitions are not encouraged because they do not utilize the global control offered by the traditional use of a CSS.
The preferred way to apply CSS is with external style sheets. With external style sheets CSS definitions reside in a style sheet file separate from the HTML content. The HTML file has a “link” or reference to the style sheet file. The following is an example of an external cascading style sheet in a Web page. Examples
HTML Code Referencing Style Sheet
File: index.htm<html> <head>
<title>Title of Page</title>
<LINK href="style/style.css" type="text/css" rel=”stylesheet”></head>
<body>
Any text in the Body will have this style.<br> <a href="embedded_style.htm">Hyperlink Style Example</a>
</body> </html>
The previous code as viewed in Internet Explorer
Internal styling
With internal styling, the styling information is placed in the HTML between the <head> and </head> tags. Internal style is used when you want to style an element that appears only on the page being styled. Internal style definitions will over-ride external style sheet definitions.
An example of an internal cascading style sheet inside a Web
page:
HTML code example of internal styles File: index.htm
The previous code as viewed in Internet Explorer
<html> <head>
<title>Title of Page</title> <style type = "text/css">
Body {FONT-FAMILY: Arial,Helvetica,Verdana,Tahoma; COLOR: RED; TEXT-DECORATION: none; }
A {color: #FFFFFF: text-decoration: none;} </style>
</head> <body>
Any text in the Body will have this style.<br> <a href="embedded_style.htm">Hyperlink Style Example</a>
</body> </html>
Style sheet template
The main cascading style sheet, main.css, is available with the Web template at http://webs.colstate.edu/css.
Steps for using CSS in FrontPage
1. Save your .css file inside the main/root folder.2. Include a link to the main CSU style sheet by placing the following code inside the <head> tags:
<link rel="stylesheet" type="text/css"
href="http://www.colstate.edu/style/main.css">
3. For a local style sheet, place the following code inside the <head> tag after the main CSU CSS code:
<link href="style.css" type="text/css" rel="stylesheet">
The file name “style.css” is given as an example. You are not limited in what you may name your .css file. The only limitations are:
The file must end in .css.
The link must match your local .css file name. Example: Local file name education.css
HTML: <link href="education.css" type="text/css" rel="stylesheet">
We recommend that you name your .css file something relative to the page or sight where it is used. For example, the .css for a math Web site might be “math.css.”
Appendix I: PDFs, Interactive PDFs
PDFs are created using Adobe Acrobat or PDF 995. Interactive PDFs are enhanced versions of regular PDFs. Interactive PDFs are intended to let Web users complete forms online and print them from their computer, whereas regular PDFs are read-only. In order to view any PDF users need Adobe Acrobat
Reader, available for free download from Adobe at: www.adobe.com/products/acrobat/readstep2.html
Interactive forms must be designated with ( PDF) following the form name.
Example: Undergraduate Application – New Applicants ( PDF) CSU’s Interactive PDF Icon can be found at:
http://webs.colstate.edu/PDF/
Note: Each department is responsible for purchasing their own Adobe Acrobat license. Submit a request for a price quote using Remedy Service to begin the process of obtaining a copy.
PDF form elements
There are several form elements that can be added to your PDF form, including:
1. Buttons 2. Check Boxes 3. Combo Boxes 4. List Boxes 5. Radio Buttons 6. Form Fields 7. Digital Signatures
The text box is probably the most common PDF form element. The instructions that follow detail the steps for adding a text box to your PDF.
Adding a text box to your PDF
Text boxes must be placed in the appropriate fields on a form so that the user can add his/her information.
Example: First Name: [text box] Last Name: [text box] To add a Text Box:
1. Click Tools
2. Click Advanced Editing 3. Click Forms
4. Click Text Field Tool
Appearance standards
Appearance standards let users know that they are viewing an interactive form and which text fields are available for entering text.
Text Field Properties: Appearance
1. Right-click the text box.2. Select Properties from the menu. A Text Field Properties box will open.
3. Select the Appearance tab
Inside the Text Field Properties box set: a. The border color to none
b. Fill color = FFFFCA (light yellow) c. Font size = 12
Text Field Properties: Options
1. Select the Options tab 2. Deselect Scroll long textPage properties: Tab order
Setting the tab order allows users to tab from one text area to the next in a designated order.
Generally, the tab order should run from left to right, top to bottom. To set the tab order to run from left to right, top to bottom: 1. Click the Pages tab on
the left.
2. Right-click one of the pages that appears to the right of the pages tab.
3. Select Page Properties.
Interactive PDF notice
When you include an Interactive PDF on your page, include the following information at the bottom of the page or in the section where the PDF appears. Include the following text on pages with interactive forms:
HTML code for the previous text:
Forms with the interactive icon beside the name can be filled out online using Acrobat Reader.
View more information on filling out forms online.
(Note: PDF forms cannot be submitted online at this time)
<p align =”left”>
Forms with the interactive icon<img
src="http://www.colstate.edu/resources/images/interactive_amoved.gif" border="0" width="18" height="18" alt=”interactive PDF icon”> beside the name can be filled out online using Acrobat Reader.
<br>
<a class=”lightlink”
href="http://www.colstate.edu/resources/interactive_PDF_more_info.htm"> View more information on filling out forms online.</a>
<br>
Get Adobe Reader icon
On all pages that link to a PDF or Interactive PDF, include a Get Adobe Reader
icon and a link to the Adobe Acrobat Reader download page. Link the Reader icon to www.adobe.com/products/acrobat/readstep2.html.
The Get Adobe Reader icon is available at http://webs.colstate.edu/PDF/. Below is a page with interactive PDF links and Get Acrobat Reader icon.
Web development glossary
audience — The people accessing your Web site(s).body — The section of your Web page that contains its content. In CSU Web templates, the body does not include the top, left or bottom sections of the page. Also called content.
bookmarks — The addresses of interesting or frequently used Web sites stored in the Web browser so that they are readily available for re-use. The page title is the default bookmark name.
bottom border (bottom.htm) — Part of the CSU templates that contains the site’s footer information with brief information such as office hours, location and parent department. The bottom border of a FrontPage site, bottom.htm, is located in the _borders folder.
breadcrumbs — A trail of links showing (a) how you got to the current page and (b) where you are in the Web site.
browsers — A computer program, such as Internet Explorer, Mozilla FireFox or Netscape Navigator, used for accessing Web sites on the Internet.
cascading style sheet (CSS) — An HTML specification developed by the World Wide Web Consortium that allows authors of Web pages to attach style information to HTML documents. Style sheets can include typographical information on how the page will appear, such as the font of the text in the page. See also external style sheet, internal style sheet and inline style sheet entries.
content — The message contained in your Web page. The content generally excludes the top, left and bottom sections (header, navigation, and footer) of the page. Also called body.
description — Meta tag that contains one to two sentences describing the purpose of the page. It is primarily used to provide text for search engine results pages. See also Appendix B.
external style sheet — A cascading style sheet in a file with a .css file name extension. The .css file is comprised solely of style rules in valid .css syntax, without any surrounding HTML tags. By defining styles in one or more external style sheets and linking them to pages in your Web site, you ensure a
external style sheet, the change will be reflected in all of the pages linked to that style sheet. See also Appendix H.
footer — Also called the bottom border. Usually contains brief information such as office hours, location and parent department.
FrontPage — An HTML editor that is a Microsoft Office product used for developing Web pages.
Graphic Interchange Format (GIF) — GIF (.gif) is the best file format for text and line graphics. See Appendix E.
graphics — Anything visually displayed on a Web site that is not text. GIFs are recommended for line images and JPEGs are used for photographs. PDFs can be used to transport images within a document, but they are generally not used solely for image files.
hierarchy levels — Classification of CSU Web sites into levels that reflect the CSU organizational chart.
home page — On the World Wide Web, an entry page for a set of Web pages and other files in a Web site. The home page is displayed by default when a visitor surfs to the site using a Web browser. Index.htm and Default.htm are both acceptable home page names.
Hypertext Markup Language (HTML) — A markup language used to create hypertext and hypermedia documents on tdhe World Wide Web incorporating text, graphics, sound, video, and hyperlinks.
inline style sheet — Styling for one individual element on a single page. Overrides external and internal style sheets. See also Appendix H.
internal style sheet — A cascading style sheet that is embedded in a page header. Styles in an internal style sheet can be applied only to the page containing the internal style sheet, and will either extend or override styles defined in any external style sheet that is linked to the page. See also Appendix H.
Joint Photographic Experts Group (JPEG) — JPEG format is best-suited for photographic images. See Appendix E.
left section — Part of the CSU template that contains the site’s navigation when used. The left section of a FrontPage site, left.htm, is located in the _borders folder.
link — A pointer from text, graphic, or an image map to a page or file on the World Wide Web. On the World Wide Web, links are the primary way to navigate between pages and among Web sites. Also called hyperlink. local navigation — Links that appear only within subsections of a Web site, related to the current page and its immediate context.
Examples include links to the index, next page and previous page
meta data — An HTML tag that must appear in the <HEAD> portion of the page. Meta tags supply information about a page but do not affect its appearance.
navigation — A system of hypertext paths set up on a Web page to enable visitors to find their way around the site. Most of the navigation in the CSU Web template is located in the left.htm file in the _borders folder.
Office of Web Development — A division of CSU’s Computer Information and Networking Services department, responsible for the programming and
technical aspects of CSU Web sites.
page title — A descriptive text string identifying a page. The page title appears in the top right area of the browser window and is the default name used when bookmarking a page.
peripheral page — Any page other than the home or index page.
Section 508 — Section 508 of the Rehabilitation Act of 1973 that has been amended in 1986 and 1998. It includes standards for making Web pages accessible to persons with disabilities.
site index — A Web page with key words and headings that link to the content within a site. This tool is useful for quickly finding specific information.
templates — A set of pre-designed formats for text and images on which Web pages can be based.
top section — Part of the CSU Web template that contains the CSU clock tower logo and page name. The top section of a FrontPage site, top.htm, is located in the _borders folder.
WCAG — Web Content Accessibility Guidelines. For more information, go to www.w3.org/TR/WAI-WEBCONTENT/.
webmaster — The individual responsible for the design, development, and maintenance of CSU Web sites and servers.
Web Operations Committee — Committee comprised of page coordinators and others on campus who are interested in the Web. The committee provides assistance with issues related to maintaining CSU Web sites.
Web site page coordinator — Individuals from different departments who are responsible for maintaining their department’s Web site.
