Css

Cascading Style Sheets (CSS)
From: Pawan R. Vora, Designing Next-Generation Web Sites. Workshop at the 1999 Human Factors
and Ergonomics Society Meeting.
CSS is based on rules and style sheets. A rule is about one stylistic aspect of one or more elements. A style
sheet is one or more rules that apply to an HTML document.
Example: H1 {color: red; font-weight: bold;}
CSS offer the ability to control how content appears on your Web pages. It offers more control over style and
layout with ability to create consistent sites quickly.
Through CSS a designer can describe and control how the text and design elements are displayed on a Web
page, hence the term "style sheets."
• Allow separation of structure and presentation

• Currently structure and presentation markup is intertwined in HTML
• Support a variety of output media (screen, printer, screen reader, Braille devices, Internet-enabled
devices, etc.)
Cascading
A fundamental feature of CSS is that more than one style sheet can influence the presentation of a document --
for example, the browser, the designer, the user. This feature is known as cascading because the different style
sheets are thought of coming in a series (Lie and Bos, 1997).
Therefore, the style sheet implemented on a page cascades -- that is, your inline style sheet definition overrides
the embedded style sheet, which in turn overrides the external style sheet. When style sheet definitions conflict,
the most recent definition wins.
Also, users themselves can define their own style sheets.
Benefits
• Easier management of the Web sites Easier to implement style guide recommendations
• Smaller files (fewer graphics downloads)
• Text doesn't need to be graphics anymore!
• Faster downloads
• Usefulness not only for designing usable sites, but inclusive sites as well.
Incorporating Cascading Style Sheets
Four ways of using CSS:

In-fine style sheets
You use them within certain tags on a page
For example,
<p style ="font: 12pt arial">
Embedded style sheets
You provide the style sheet definition within the <HEAD> element of the HTML document
For example,
<style TYPE="text/css">
BODY {
background: #ffffff;
color: #000000;
margin-left: 2em;
margin-top: 2em;
}
</STYLE>
Linked style sheets
You link an external style sheet to the HTML document using the <LINK> tag within the
<HEAD> element
For example,
<LINK REL="STYLE SHEET" HREF="project.css"
TYPE="text/css">
Imported style sheets
For example,
<STYLE>
@import
url (http: / /www.sitename.com/css/project.css)
</STYLE>
CSS Level I
- The first proposed recommendation by W3C

- The goal was to create a simple style sheet mechanism for HTML documents
- Offers support for the following:
 Font properties: font-family, font-style, font-variant, font-weight
 Color and background properties: color, background-color, background-image, background-repeat,
background-attachment, background-position, background
 Text properties: word-spacing, letter-spacing, text-orientation, text align, text-transform, text-indent,
line-height
 Box properties: margin, padding, border, width, height, float, clear
 Classification properties: display, white-space, list-style-type, list-style image, list-style-position,
list-style
- Currently, browsers support CSS Level 1 to a certain extent Source:
 CSS Compatibility Charts, http://webreview.com/wr/pub/guides/style/style.html
 Netscape Navigator 3.x: No support Microsoft Internet Explorer 3.x: Partial Support >
 Windows 95/NT: 22.6% > Macintosh: 13.9% Netscape Navigator 4.x: Partial support >
 Windows 95/NT: 38.8% > Macintosh: 38.8% Microsoft Internet Explorer 4.x:
 Extensive support (but not complete conformance) >
 Windows 95/NT: 69.9% > Macintosh: 77.2% (IE 4.5)
 Microsoft Internet Explorer 5.x: Extensive support (close, but not complete conformance yet) >
 Windows 95/NT: 72.9%
CSS Level 2: Beyond separation of structure and presentation

- Several improvements over CSS1
- Positioning and Layering of Elements
- Allow better control over document layout
- Both on screen and in print
- Absolute and relative positioning of the elements on an HTML page
 Relative positioning. The elements keep their normal flow size, including line breaks and the space
originally reserved for them.
 Absolute positioning. The contents of an absolutely positioned element do not flow around any other
boxes.
 Fixed positioning. Although similar to absolute positioning; an immovable viewport (a window or
other viewing area on the screen) is established on the screen.
 Fixed boxes (viewports) do not move when the document is scrolled, similar to fixed background
images. This is useful for placing, for instance, a corporate logo at the top of each page.
 If the position is relative it appears on the page only after the elements before it. If it is defined as
absolute, it will appear exactly at the position you specify *in the style tag.
- Z-index. The z-index tells the browser in what order to "stack" or cascade die layers. It works like this: the
layer that has the highest z-index is the one on top. The rest fall according to their relative z-index numbers.
- Downloadable Fonts
 Give designers the typographic diversity they require without resorting to images
- Aural Cascading Style Sheets (ACSS)
 Empower visually disabled users by applying style sheets to oral presentations
- Enhanced Printing Facilities
 Improve printing from the Web
- Internationalization
 CSS2 hilly supports the international ISO 10646 character set, allowing authors to manage differences
in language, text direction, and character encoding schemes. CSS can display left-to-right, right-to-left
or mixed text, enabling document authors to apply specialized formatting to portions of documents
depending on the language they are written in. In addition, CSS2, when coupled with
internationalization features, improves the searchability of content.
- Support for media types
 To enable an author to specify precisely how a document is to be presented on various media (e.g.
screen, paper, speech synthesizer, and Braille device).
 For example, fonts designed for a computer screen generally need to be larger than would be required
of the same document in paper form.
 Enhanced page printing >
• Authors have control over the size of a page, its margins, and the placement of page breaks.
 Supports following media types >
• screen: for computer screen
• print: for "printouts" or "print preview" displays
• projection: for projected presentations such as slide shows );--
• Braille and embossed: for tactile feedback devices and printers
• aural: for speech generators
• TV: for television-type displays (e.g., WebTV)
• hand-held: for palm-top computers
• all: for all media types
- Specifying media dependencies for style sheets
- @import url(voice.css) speech;
- <link rel="stylesheet" type="text/css" media="print" href="print.css"> -
- - @media print {
body { font-size: 10pt;}
}
@media screen {
body { font-size: 12pt;}
}
@media print, screen {
body { color: black;}
}
- Support for "styling" tables

- Special effects
 One example of misuse of the CSS 1 specification 'involved repeating the same words with slight
offsets each time in order to generate the effect of drop-shadow text. While the effect may be
acceptable when a CSS-enabled browser was used, when the CSS feature is disabled the text
frequently turns to gibberish.
 The CSS2 specification eliminates the need for this poor programming practice by providing a
command to support the text shadow effect
- System Color
- Enables pages to be developed
- To account for a user's preferred look and feel and
- To respond to current user settings, which may be related to a disability (e.g. color-blind
users may have their environment configured to avoid specific colors).
Aural Style Sheets

- Aural presentation, with a combination of speech synthesis and audio icons provide an alternative to the
visual presentation
- Usually aural presentation occurs by converting the document to plain text and feeding it to a "sreen reader"
 Less effective, document structure is lost
- Aural Style Sheets enable the retention of document structure and may be used to support or replace visual
presentation.
- Aural presentation of information is likely to improve presentation of information for in-car use, industrial
and medical documentation systems, home entertainment, and for supporting illiterate users.
- Aural rendering is essentially independent of the visual rendering
 Allows orthogonal aural and visual views
 Allows browsers to optionally implement both aural and visual views to produce truly multi-modal
documents
- Aural style sheets can control the following for Web page elements:
 Volume
 Speak
 Pause properties: pause-before, pause-after, pause
 Cue properties: cue-before, cue-after, cue
 Mixing properties: play-during
 Spatial properties: azimuth, elevation
 Voice characteristic properties: speech-rate, voice-family, pitch, pitch-range, stress, richness,
speak-punctuation, speak-date, speak-time
Benefits of CSS
- CSS, in combination with HTML and XML, truly separates content from its presentation.
- Will allow designers to create tighter, more dynamic content for the Web
- Pages using CSS will transfer faster to users and will be easy to maintain
- Will lead to improved accessibility, maintainability and performance on the Web
Guidelines for using Style Sheets
- Brevity should be your goal.

 Shorten your style sheet by grouping selectors and declarations. This makes your style sheet easy to
read and load faster.
- To make your style sheet code easier to read (and change), place each declaration on a separate line.
- For embedded style sheets, comment out the information between <STYLE> and </STYLE> tags so that
the browsers that don't understand style sheets don't display your style sheet definitions on the Web page.
 Referring to the HTML comments () and not CSS comments (\* and *\), which are used to
write comments within the style sheet.
- Know when to use an ID attribute and when to use a CLASS attribute.
 The value of an ID attribute must be unique throughout the document. So, if you would like to use the
same effect at several places within the document, use a CLASS attribute.
- Minimize using inline STYLE attributes.
 Though STYLE attributes are an effective way to introduce inline styles and over-ride previously
defined styles, they are difficult to change globally.
 Since the declarations *in the STYLE attribute only apply to the element where they are specified,
there is no way to reuse your declaration and your documents will get longer.
 Also, if you later want to change the presentation of your document, you will have to make changes in
more places.
 By interleaving style and content, you miss out an important advantage of style sheets: the separation
of content and presentation. By putting all your style settings into one style sheet, you can make that
style sheet apply to more than one document.
 Save the STYLE attribute for those occasions when you want to make stylistic changes to a particular
occurrence of an element while leaving alone the style of all others of the same element type.
- Use relative units of measures to make your document scaleable
 An absolute unit is a unit of measure that specifies a value that is fixed. For example, 3in, 4mm, and
5pt. Absolute values have limited usefulness because they cannot be scaled.
 A relative unit is a unit of measure that specifies a value that is relative to the font size, usually the font
size of the element itself. (Me only exception is the font-size property, where the value scales to the
font size of the element's parent. Relative units have the advantage over absolute units in that they scale
automatically. When you choose a different font, all properties that were expressed in em or ex don't
have to be changed.
 A device-dependent unit is a unit of measure that depends on the device on which it is used. The pixel
(px) is the only device-dependent unit CSS1 uses. (Lie and Bos, 1997).
 Use em or ex units
 Do not use absolute units, such as inches and picas, when scalability is important.
 Percentage values, like relative units, automatically scale. What the percentage is a percentage of --
that is, what it is relative to -- depends on that property. Usually, it is a percentage of the value that the
property has in the parent element. For example, an H1 with a font size of 80% means the font is 80%
of the font size of its parent (often the BODY element). The only exception is the line-height property.
 Keywords are not units of measure, but some have connotations of being relative. For example, the
keywords "bolder" and "lighter," which are for the font-weight property, are clearly relative: they are
relative to the font-weight of the parent element.
 Making your document scaleable is important to enabling users on the Web to display it. A document
that is scaleable can be re-scaled to fit different output media. This is particularly important for the
Web because users may want to make your document appear larger or smaller on their screens. If your
document is not scaleable, they won't be able to do this.
 Scalability is achieved by using relative units rather than absolute units. An absolute unit is used
usually because it looks good in combination with something else. If any part of the combination
changes, the intended effect is lost.
- Specify a font set (font-family) not just a single font.
 A browser checks whether it has the first font listed in the font set. If it does, it uses that font. If it
doesn't, it moves to the next font 'in the list to see if it has that font, and so on until it finds a font that it
has.
 Font sets are also helpful in documents that use different alphabets. A document that contains both
English and Hebrew will likely require at least two fonts, one for each language. Listing both in the
font set allows the browser to choose the right font: if the first font listed doesn't have the right letters,
the browsers will try the second font, and so on.
4.10 Challenges
 Inconsistent implementation of style sheets across browsers

 If you include IE version 3 of the browsers, only 25 percent of the current CSS1 spec is consistently
supported across the two major browsers
 More and more people are using Version 4 of the browsers, and it will soon be common to use CSS
 Browser breakdown on the Web (http://www.statmarket.com)
 Microsoft: 72.99%
 MSIE 5.x: 21.31%
 MSIE 4.x: 45.45%
 MSIE 3.x: 3.77%
 Netscape: 25.16%
 Netscape 4.x: 23.23%
 Netscape 3.x: 3.37%
 Other: 1.18%

Css

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascading Style Sheets (CSS)

Example: H1 {color: red; font-weight: bold;}

• Allow separation of structure and presentation

Also, users themselves can define their own style sheets.

Incorporating Cascading Style Sheets

Four ways of using CSS:

- The first proposed recommendation by W3C

CSS Level 2: Beyond separation of structure and presentation

- Support for "styling" tables

Aural Style Sheets

Guidelines for using Style Sheets

- Brevity should be your goal.

 Inconsistent implementation of style sheets across browsers

Anda mungkin juga menyukai