Cascading Style Sheets (CSS)
advertisement
Cascading Style Sheets (CSS)
Since text is also common among webpages, it is imperative to assure the textual elements
are accessible. Properly-formatted text is easier to read and conveys information better; thus
improving the entire website by making the textual elements accessible.
The advent of "what you see is what you get" (WYSIWYG) web authoring tools such as
Microsoft FrontPage and Macromedia Dreamweaver help make HTML authoring as easy as
working with a word processor like Word or WordPerfect. The advantage is that these tools
often "hide" the details of HTML tags and the workings of creating webpages. But, the
disadvantage is that these tools often create non-accessible HTML.
Introduction to Cascading Style Sheet (CSS)
A cascading style sheet, which is commonly referred to as CSS, specifies how the elements of
an webpage are displayed. Cascading style sheets separate the style (or look and feel) of the
document from the structure (or the content and ordering of information).
While certain fonts, colors, and text sizes (or styles) may be desired by the developer of a
webpage, it is vital to allow a user's defined viewing preferences (or personalized style sheet)
to override. For example, if a user with a visual impairment has defined a style sheet that
increases the font size for the text of a webpage, it is vital to honor that preference. For this
user, it is more important that the text be readable than display with the color or font desired
by the developer of a webpage.
Note: The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG)
and Section 508 part (d) state that "Documents shall be organized so they are readable
without requiring an associated style sheet." Regardless of whether the style sheet is
deactivated by the user or the Web browser being used does not support style sheets, the
content must be easily understood. For more information on web accessibility and CSS, visit
Section 508 Web Accessibility Tutorial, Topic 11: Cascading Style Sheets
and CSS
Techniques for Web Content Accessibility Guidelines
.
Use of External Style Sheet
To allow for user preference and promote cost-time savings in web management, the desired
styles should be defined externally in a separate file rather than "hard-code" formatted in the
webpage. Another benefit of having external styles is that all webpages can reference one file
and use the same styles; thus, subsequent changes can be made in one place and will take
place in all webpages (vs. editing one page at a time).
The file for a cascading style sheet ends with a ".css" and holds all the styles with their designated values.
For an external style sheet to be applied to a webpage, a link to the style sheet must be placed between the
<head> start tag and the </head> end tag of the webpage; this "head" section is located after the <html>
start tag and before the <body> start tag.
Code sample of link in a webpage to an external style sheet named "my_style_sheet.css".
<html>
<head>
<title>Document Title</title>
<link href="my_style_sheet.css" rel="stylesheet" type="text/css">
</head>
<body>
Content goes here ...
Defining Styles
In the past, a useful way of defining the "look and feel" for the elements of a web document
was to "hard-code" the formatting. For example, the <font> tag was commonly used to
specify a font-size, type, and color for text. If you wanted some text to be red in the font
type of "Futura Extra Bold" at a 24-point size, the code would look like this:
Code sample of incorrectly defining a style in the webpage using the <font> tag
<font face="Futura Extra Bold" size="24" color="red"><p>This is some sample text</p></font>
However, "hard-code" formatting such as the <font> tag, does not allow a user's defined
viewing preferences (or personalized style sheet) to prevail and is non-compliant with the
Web Content Accessibility Guidelines. Hence, to be accessible, styles should be defined in an
external style sheet by the HTML element or with a specialized name that relates to how or
where the style will be used.
Note: The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG)
has deprecated some HTML elements because of being presentation-related or for lack of
support across different Web browsers. For more information on the status of HTML
elements, review the Index of HTML Elements from the W3C
.
To define a style in the CSS file for an HTML element:
1. Identify the HTML element.
2. Provide a left curly bracket { .
3. For each desired style preference (attribute), provide name, colon(:), value, and end
with a semicolon (;). For example, the attributes to make paragraph text large-print
and red in Futura font on a white background, font-size:200%; color: rgb(255,0,0);
font-family:Futura Extra Bold; background-color: #ffffff; .
4. End with right curly bracket }.
Code format for defining a style in the cascading style sheet
STYLE_NAME { ATTRIBUTE1: value; ATTRIBUTE2: value ; }
Code sample of defining style for a paragraph in style sheet instead of using <font> tag:
p {font-size: 200%; color: rgb(255,0,0); font-family:Futura Extra Bold; background-color:
#ffffff; }
To apply the style from the CSS to an HTML element in the webpage
1. No extra code is needed beyond the desired HTML element and text. For this example,
a paragraph of "This is some sample text".
Code of the paragraph in the webpage:
<p>This is some sample text</p>
Display in a Web browser of the applied style for a paragraph:
This is some sample text
Use Relative Sizing
Relative sizing is based on percentages while fixed sizing is set for a specific value (i.e.
15px). Relative sizing, especially for font-size, should be used so the webpage can correctly
display in different screen sizes and for various viewing preferences. In this example,
whether the user is working on a PDA or laptop, the size of the text within the paragraph will
adjust accordingly.
Use Numbered Value for Color
The value for color of a style can be represented by words (i.e. red) , 6-digit hexadecimal
value (i.e. #000000 for black), or RGB value (i.e. rgb(255,0,0)). The words for colors have
variable support in different Web browsers and thus, should not be used. Rather, it is best to
use the 6-digit hexadecimal value or the RGB value in which the color information is defined
for each color with respect to its red, green, and blue components. In the RGB value, the first
value represents the red (0-255), the second value represents the green (0-255), and the
third value represents the blue (0-255). The numeral 0 represents none of the color, whereas
255 represents 100% of the color. For example, red, is rgb(255,0,0); green is rgb(0,255,0);
blue is rgb(0,0,255), and a pastel purple ( half tones of red and blue) would be
rgb(128,0,128).
To define a specialized style in the CSS file:
1. Use a period followed by a readily-identified name that relates to how or where the
style will be applied. For example, .notetext (could apply to a special note on a
webpage).
2. Provide a left curly bracket { .
3. For each desired style preference (attribute), provide name, colon(:), value, and end
with a semicolon (;). For example, the attributes to make "noted" text centered and
black in bold print on a gray background, text-align:center; color: #000000; fontweight: bold; background-color: #efefef;.
4. End with right curly bracket }.
Code sample of defining specialized style in the style sheet to accent any “noted” text :
.notetext { text-align:center; color: #000000; font-weight: bold; background-color: #efefef;}
To apply a specialized style from the CSS to text in the webpage
1. Provide the desired HTML element and text. For this example, a paragraph of "Be sure
to complete the assignment before class!".
2. Apply the style in one of three ways dependent on what effect is desired:
o
Use "class" within the HTML element to apply the style to the whole
element. For example:
<p class="notetext">Be sure to complete the assignment before class!</p>.
o
Use the <span> tag and "class" to apply the style to specific text or an
instance. For example:
<p>Be sure to <span class="notetext">complete the assignment</span> before
class!</p>.
o
Use the <div> tag and "class" to apply to multiple text or an area.
For example, <div class="notetext"><p>Homework: Read Chapter 1</p><p>Be
sure to complete the assignment before class!<p><div>.
Display in Web browser of the applied specialized style using "class" for a paragraph:
Be sure to complete the assignment before coming to class!
Display in Web browser of the applied specialized style using <span> tag to some text in a paragraph:
Be sure to complete the assignment before coming to class!
Display in a Web browser of the applied specialized style using <div> tag to two paragraphs:
Homework: Read Chapter 1
Be sure to complete the assignment before coming to class!
Note: For more information on style sheets, please refer to the Cascading Style Sheet (CSS) resources from
the W3C
.
Putting It All Together: CSS Applied to “Common HTML” File
body { background: #ffffff; color: #000000; font-family: Arial, sans-serif; font-size: 1em; margin-top:
0.1em; margin-right: 0.1em; margin-bottom: 0.1em; margin-left: 0.1em }
p { font-size: 100%;}
ol {font-size: 80%;}
ul { font-family: Georgian, sans-serif;}
img { border: 2px solid yellow;}
a { text-decoration: none; border-bottom: 1px dotted purple;}
a:hover { background: black; color: yellow;}
h1 { color: red;}
h2 { color: #bbbbbb; }
h3 { color: yellow;}
h4 { color: purple;}
h5 { color: blue;}
h6 { color: green;}
