 |
 |
CSU Webs |
 |
||
|
|
CSU Home > CSU Webs > Styles & Standards > Appendix G - CSS
Appendix G: Cascading Style
Sheets (CSS)
Cascading Style Sheets – Why use them?
Cascading Style Sheets offer Web designers two key advantages in managing
complex Web sites.
-
Separation of content and design. CSS gives site 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 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.
Style Sheet Template
The main cascading style sheet, mainstyle.css, is available with the Web template at http://webs.colstate.edu/templates
Steps for using CSS in FrontPage
If you download the template, please skip this section
-
Create a folder named "_style" (without the quotation marks).
-
Save mainstyle.css inside the _style folder.
-
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/mainstyle.css"> -
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
site where it is used. For example, the .css for a math Web site might be “math.css.”
|
Computer Information
& Networking Services |
Columbus State University
|
|