Cascading Style Sheets (CSS) Publications - guide-FINAL5

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
File: style.css (Style sheet files must have a .css file extension)
Body {FONT-FAMILY: Arial,Helvetica,Verdana,Tahoma;

COLOR: RED; TEXT-DECORATION: none;}
A {color: #FFFFFF; text-decoration: none;}
60
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>
61
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.
62
An example of an internal cascading style sheet inside a Web
page:
HTML code example of internal styles

File: index.htm
<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>
The previous code as viewed in Internet Explorer
63
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.
64
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)
CSUs 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
65
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
d. Font = Helvetica Text Color = 000000 (black)
66
Text Field Properties: Options
1. Select the Options tab
2. Deselect Scroll long text
67
Page 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.
4. Select Use Row Order.
68
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:
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)
HTML code for the previous text:
<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>
(Note: PDF forms cannot be submitted online at this time)</p>
69
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.
70
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
sites 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
consistent appearance throughout those pages. If you change a style in the
71
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.
keywords Meta tags that contain significant words from your page or title.
Often used by search engines as an index to content. See also Appendix B.
72
left section Part of the CSU template that contains the sites 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 CSUs 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.
73
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 departments Web site.
For the latest update of this document and related resources,

visit http://webs.colstate.edu and
http://ua.colstate.edu/public_relations/public_relations.htm
74

Cascading Style Sheets (CSS) Publications - guide-FINAL5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets (CSS) Publications - guide-FINAL5

Uploaded by

Copyright:

Available Formats

Appendix H: Cascading Style Sheets (CSS)

Applying a Cascading Style Sheet

Body {FONT-FAMILY: Arial,Helvetica,Verdana,Tahoma;

HTML code example of internal styles

The previous code as viewed in Internet Explorer

Steps for using CSS in FrontPage

Interactive forms must be designated with ( PDF) following the form

CSUs Interactive PDF Icon can be found at:

PDF form elements

Adding a text box to your PDF

Text Field Properties: Appearance

1. Click the Pages tab on

2. Right-click one of the

Include the following text on pages with interactive forms:

HTML code for the previous text:

<p align =left>

The Get Adobe Reader icon is available at http://webs.colstate.edu/PDF/.

bookmarks The addresses of interesting or frequently used Web sites

browsers A computer program, such as Internet Explorer, Mozilla FireFox

cascading style sheet (CSS) An HTML specification developed by the

FrontPage An HTML editor that is a Microsoft Office product used for

Hypertext Markup Language (HTML) A markup language used to

internal style sheet A cascading style sheet that is embedded in a page

Joint Photographic Experts Group (JPEG) JPEG format is best-suited for

link A pointer from text, graphic, or an image map to a page or file on

local navigation Links that appear only within subsections of a Web

navigation A system of hypertext paths set up on a Web page to enable

Office of Web Development A division of CSUs Computer Information and

webmaster The individual responsible for the design, development, and

Web Operations Committee Committee comprised of page coordinators

For the latest update of this document and related resources,

You might also like