cascading style sheets (css) publications_guide-final5

8/9/2019 Cascading Style Sheets (CSS) Publications_guide-FINAL5

1/15

60

Appendix H: Cascading Style Sheets (CSS)Cascading Style Sheets offer Web designers two key advantages in managingcomplex Web sites:

Separation of content and design. CSS gives developers the best ofboth worlds: content markup that reflects the logical structure of the

information and the freedom to specify exactly how each HTML tag willlook.

Efficient control over large document sets. The most powerfulimplementations of CSS will allow site designers to control the graphic"look and feel" of thousands of pages by modifying a single master stylesheet document. The Web Development Team has created a CSS stylesheet to control some of the most common HTML attributes including: fontface, 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 tag each time you use it. When you define these properties using CSS,that single definition, or rule, applies to every instance of the element in alldocuments that reference the style sheet.

In addition, style sheets offer more formatting options than plain HTML tags andextensions. For example, interline spacing, or leading, can be controlled usingstyle sheets, as can text properties such as letter-spacing and background color.The text formatting properties are implemented well enough across mostbrowsers that using CSS provides cross-browser compatibility. (See AppendixC.) Source: Web Style Guide 2nd Edition. www.webstyleguide.com.

Applying a Cascading Style SheetCSS can be applied using inline definitions, internal style sheets, and/or externalstyle sheets. Inline style definitions are not encouraged because they do notutilize the global control offered by the traditional use of a CSS.

The preferred way to apply CSS is with external style sheets. With external stylesheets CSS definitions reside in a style sheet file separate from the HTMLcontent. The HTML file has a link or reference to the style sheet file. Thefollowing is an example of an external cascading style sheet in a Web page.

ExamplesFile: 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;}


2/15

61

HTML Code Referencing Style SheetFile: index.htm

Title of Page

Any text in the Body will have this style.

Hyperlink Style

Example


3/15

62

The previous code as viewed in Internet Explorer

Internal stylingWith internal styling, the styling information is placed in the HTML between the and tags. Internal style is used when you want to style anelement that appears only on the page being styled. Internal style definitions willover-ride external style sheet definitions.


4/15

63

An example of an internal cascading style sheet inside a Webpage:

HTML code example of internal stylesFile: index.htm

The previous code as viewed in Internet Explorer

Title of Page

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

COLOR: RED; TEXT-DECORATION: none; }

A {color: #FFFFFF: text-decoration: none;}

Any text in the Body will have this style.
Hyperlink Style

Example


5/15

64

Style sheet templateThe main cascading style sheet, main.css, is available with the Web templateat http://webs.colstate.edu/css.

Steps for using CSS in FrontPage1. 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 tags:3. For a local style sheet, place the following code inside the tag

after the main CSU CSS code:

The file name style.css is given as an example. You are not limited in whatyou 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.cssHTML:

We recommend that you name your .css file something relative to the page orsight where it is used. For example, the .css for a math Web site might be

math.css.


6/15


7/15

66

4. Click Text Field Tool

Appearance standardsAppearance standards let users know that they are viewing an interactive formand 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 noneb. Fill color = FFFFCA (light yellow)c. Font size = 12d. Font = Helvetica Text Color = 000000 (black)


8/15

67

Text Field Properties: Options

1. Select the Options tab2. Deselect Scroll long text


9/15

68

Page properties: Tab orderSetting the tab order allows users to tab from one text area to the next in adesignated order.Generally, the tab order

should run from left toright, top to bottom. To setthe tab order to run fromleft to right, top to bottom:

1. Click the Pages tab onthe left.

2. Right-click one of thepages that appears tothe right of the pagestab.

3. Select PageProperties.

4. Select Use Row Order.


10/15

69

Interactive PDF noticeWhen you include an Interactive PDF on your page, include the followinginformation 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 AcrobatReader.View more information on filling out forms online.(Note: PDF forms cannot be submitted online at this time)

Forms with the interactive icon beside the name can be filled outonline using Acrobat Reader.
View more information on filling out forms online.
(Note: PDF forms cannot be submitted online at this time)


11/15

70

Get Adobe Reader iconOn all pages that link to a PDF or Interactive PDF, include a Get Adobe Readericon and a link to the Adobe Acrobat Reader download page. Link the Readericon to www.adobe.com/products/acrobat/readstep2.html.

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

Below is a page with interactive PDF links and Get Acrobat Reader icon.


12/15

71

Web development glossary

audience The people accessing your Web site(s).

body The section of your Web page that contains its content. In CSU Webtemplates, the body does not include the top, left or bottom sections of thepage. Also called content.

bookmarks The addresses of interesting or frequently used Web sitesstored in the Web browser so that they are readily available for re-use. Thepage title is the default bookmark name.

bottom border (bottom.htm) Part of the CSU templates that contains thesites footer information with brief information such as office hours, location and

parent department. The bottom border of a FrontPage site, bottom.htm, islocated in the _borders folder.

breadcrumbs A trail of links showing (a) how you got to the currentpage and (b) where you are in the Web site.

browsers A computer program, such as Internet Explorer, Mozilla FireFoxor Netscape Navigator, used for accessing Web sites on the Internet.

cascading style sheet (CSS) An HTML specification developed by theWorld Wide Web Consortium that allows authors of Web pages to attach style

information to HTML documents. Style sheets can include typographicalinformation on how the page will appear, such as the font of the text in thepage. See also external style sheet, internal style sheet and inline stylesheet entries.

content The message contained in your Web page. The content generallyexcludes the top, left and bottom sections (header, navigation, and footer) ofthe page. Also called body.

description Meta tag that contains one to two sentences describing thepurpose 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 nameextension. 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 externalstyle sheets and linking them to pages in your Web site, you ensure aconsistent appearance throughout those pages. If you change a style in the


13/15

72

external style sheet, the change will be reflected in all of the pages linked tothat style sheet. See also Appendix H.

footer Also called the bottom border. Usually contains brief information suchas office hours, location and parent department.

FrontPage An HTML editor that is a Microsoft Office product used fordeveloping Web pages.

Graphic Interchange Format (GIF) GIF (.gif) is the best file format for textand line graphics. See Appendix E.

graphics Anything visually displayed on a Web site that is not text. GIFs arerecommended for line images and JPEGs are used for photographs. PDFs canbe used to transport images within a document, but they are generally not usedsolely for image files.

hierarchy levels Classification of CSU Web sites into levels that reflect theCSU organizational chart.

home page On the World Wide Web, an entry page for a set of Webpages and other files in a Web site. The home page is displayed bydefault when a visitor surfs to the site using a Web browser. Index.htmand Default.htm are both acceptable home page names.

Hypertext Markup Language (HTML) A markup language used tocreate hypertext and hypermedia documents on tdhe World Wide Webincorporating 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 pageheader. Styles in an internal style sheet can be applied only to the pagecontaining the internal style sheet, and will either extend or override stylesdefined in any external style sheet that is linked to the page. See also AppendixH.

Joint Photographic Experts Group (JPEG) JPEG format is best-suited forphotographic images. See Appendix E.

keywords Meta tags that containsignificant words from your page or title.Often used by search engines as an index to content. See also Appendix B.


14/15

73

left section Part of the CSU template that contains the sites navigationwhen 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 wayto navigate between pages and among Web sites. Also called hyperlink.

local navigation Links that appear only within subsections of a Website, 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 portion of thepage. Meta tags supply information about a page but do not affect itsappearance.

navigation A system of hypertext paths set up on a Web page to enablevisitors to find their way around the site. Most of the navigation in the CSU Webtemplate is located in the left.htm file in the _borders folder.

Office of Web Development A division of CSUs Computer Information andNetworking Services department, responsible for the programming andtechnical aspects of CSU Web sites.

page title A descriptive text string identifying a page. The page title appearsin the top right area of the browser window and is the default name used whenbookmarking 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 beenamended in 1986 and 1998. It includes standards for making Web pagesaccessible to persons with disabilities.

site index A Web page with key words and headings that link to thecontent within a site. This tool is useful for quickly finding specificinformation.

templates A set of pre-designed formats for text and images on which Webpages can be based.

top section Part of the CSU Web template that contains the CSU clocktower logo and page name. The top section of a FrontPage site, top.htm, islocated in the _borders folder.


15/15

74

WCAG Web Content Accessibility Guidelines. For more information, go towww.w3.org/TR/WAI-WEBCONTENT/.

webmaster The individual responsible for the design, development, andmaintenance of CSU Web sites and servers.

Web Operations Committee Committee comprised of page coordinatorsand others on campus who are interested in the Web. The committee providesassistance with issues related to maintaining CSU Web sites.

Web site page coordinator Individuals from different departments who areresponsible 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

cascading style sheets (css) publications_guide-final5

Documents