Tuesday 07th of February 2012 05:27:01 AM
CSS: Style Sheet Guidelines (1)
According to its creators at W3C, Cascading Style Sheets “is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” Let's expand that definition to see what it means for Web designers and developers:
- CSS is a standard layout language for the Web—one that controls colors, typography, and the size and placement of elements and images.
- Though precise and powerful, CSS is easy to author by hand.
- It is bandwidth–friendly technology: a single 10K CSS document can control the appearance of an entire website, comprising thousands of pages and hundreds of megabytes. (For an example, see the Sophisticated Style Sheet on page 2.)
- CSS is intended by its creators (W3C) to replace HTML table-based layouts, frames, and other presentational hacks.
- CSS, together with other web standards such as XHTML, helps us separate style from content, making the Web more accessible, and opening it up to more powerful applications and technologies to come.
Laying out pages with CSS instead of HTML tables—or using CSS simply to replace redundant, non–standard HTML hacks, such as invalid extensions to the <font> tag or the <body> tag—provides the following benefits:
- Conserve bandwidth (less markup for visitors to download)
- Reduce design/development time
- Reduce updating and maintenance time
- Increased accessibility (fewer, or no, HTML tables; no invalid junk markup)
normal, which describes ordinary text, andsmall-caps, which calls for the use ofsmallcaps text. If you aren't familiar with such an effect,ItLooksSomethingLikeThis . Instead of upper- and
- Adhere to W3C recommendations, improving interoperability and ensuring greater longevity (sites will not become obsolete)
- Better, more professional appearance (line–height, borders, padding, margins)
- Increased readability (line–height, borders, padding, margins)
- More easily transition in future to more powerful standards such as XML (because page content no longer contains junk markup)
On the next page, we explore the basics of CSS and its recommended usage at NYPL. »
« CSS Section Index | CSS Guidelines 2 »
Note the extra space between the end of the word just before theinline element, and the edge of the inline element'sbackground. This can end up on both ends of the inline if we wish:
6.2.2. Repeats with Direction
Thus far, all we've ever been able to do
6.2.3.3. Length values
Finally, we turn to length values
for positioning. When you supply lengths for the position of the
background image, they are interpreted as offsets from the top left
corner of the element. The offset point is the top left corner of the
background image; thus, if you set the values 20px
30px , the top left corner of the background image
will be 20 pixels to the right of, and 30 pixels below, the top left
corner of the containing element, as in Figure 6-43:
For example, if you have an address book document stored in an XML file, created on a Mac, that you would like to share with someone who has a PC, you can simply email them the plain text address book XML document. This cant be done with binary encoded information which is totally platform (and program) dependent.
Another example is web enabling legacy systems. It is very feasible to create a Java web ennoblement application server that simply uses the services provided by the underlying legacy system. Instead of rewriting the legacy system, if the system can be made to communicate results and parameters through XML, the new and old system can work together without throwing away a company's investment in the legacy system.
By making the W3C the keeper of the XML standard, it ensures that no one vendor should be able to cause interoperability problems to occur between systems that use the open standard. This should be reassuring to most companies making an investment in this technology, by being vendor neutral, this solution proposes to keep even small companies out of reach of big companies choosing to change the standards on them. For example, if a big company chooses to change the platform at its whim, then most other companies relying on that platform suffer. By keeping all data in XML and using XML in communications protocols, companies can maximize the lifetime of their investment in their products and solutions.
XML is language independent
the
SPAN text (which is set to be
bolder) will inherit the value of
100 and then evaluate to the next-heaviest face,
which is the Bold face and which has a numerical weight of
7
00.
Figure 5-11 shows us the
visual result of all this.
Figure 5-11. Greater weight will usually confer visual boldness
Let's take this all one step further, and add two more rules,
plus some markup, to illustrate how all this works (see Figure 5-12 for the results):
