In: Categories » » HTML XHTML and CSS » Formatting Content with CSS Properties
While selectors do a great job of picking out content that needs formatting, designers (as opposed to Web site managers) like CSS mostly because of the large number of available formatting properties. CSS offers properties that support nearly any presentation of a document desired, and yet more properties are in development as part of the CSS3 activity. CSS properties enable you to describe precisely how you want the pieces of your document formatted and to override the rules by which HTML is presented normally.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title>Strict XHTML - Phase 2</title> <meta http-equiv='Content-type' content='text/html; charset="UTF-8"' /> <script type="text/javascript" src="mycode.js" ></script> <link rel="stylesheet" href="mycss.css" type="text/css" /> </head> <body> <h1>Strict XHTML - Phase 2</h1> <p><a name="description" id="description">This document is strict XHTML - we'll see how it does in the browsers.</a></p> <p>The cleanup shouldn't cause too many problems, we hope.</p> <ul> <li><span onclick="presentCount()">Click me for a count!</span></li> <li><a href="query.htm?val1=1&val2=2&val3=3">Click here for a query!</a></li> <li><a href="#description">Click here for a description of this page</a></li> </ul> <p>Copyright 2000 by the Wacki HTML Writer <br /> All rights reserved.</p> </body> </html>
The original style sheet was quite simple:
body {background-color:#FFFFFF }
To demonstrate some of CSS's more sophisticated capabilities, you now create a demonstration document that has a few more hooks with which you can work. The following document is fairly simple strict XHTML, but it provides a foundation for experiments.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title>CSS Positioning Demo</title> <meta http-equiv='Content-type' content='text/html; charset="UTF-8"' /> <link rel="stylesheet" href="funkcss.css" type="text/css" /> </head> <body> <div id="header">Headline</div> <div id="fragment1">Fragment 1</div> <div id="fragment2">Fragment 2</div> <div id="fragment3">Fragment 3</div> <div id="fragment4">Fragment 4</div> <div id="fragment5">Fragment 5</div> <div id="fragment6">Fragment 6</div> <div id="fragment7">Fragment 7</div> <div id="fragment8">Fragment 8</div> <div id="paragraph">This paragraph contains more text and some <em>emphasis</em> as well.</div> </body> </html>
You start with a simple style sheet that modifies the headline and positions the first and second fragments. Positioning is a critical part of the W3C's plans to move beyond frame-based Web interfaces, as well as a key tool for dynamic HTML. The first fragment gets positioned in absolute terms relative to the document as a whole, while the second fragment gets positioned relative to where it would appear.
body {background-color:#FFFFFF }
div#header {font-size:24pt; font-family:serif; color:blue}
div#fragment1 {position:absolute; top:175px; left:150px}
div#fragment2 {position:relative; top:175px; left:100px}
Now let's modify some more CSS properties for the other fragments and for the div elements in general. Start with the previous style sheet:
body {background-color:#FFFFFF }
div#header {font-size:24pt; font-family:serif; color:blue}
div#fragment1 {position:absolute; top:175px; left:150px}
div#fragment2 {position:relative; top:175px; left:100px}
Next, you do some basic formatting on fragments 3 through 5. For fragment 3, you transform its content to uppercase with the text-transform property. For fragment 4, you widen the spacing between characters using the letter-spacing property and center fragment 5 using the text-align property.
div#fragment3 {text-transform:uppercase;}
div#fragment4 {letter-spacing:3pt;}
div#fragment5 {text-align:center;}
For fragments 6 and 7, you use the margin properties, padding properties, and borders to demonstrate how CSS handles these. For fragment 6, you set a left margin of 25 points to move the text to the right; then you set a bottom margin of 50 points to move the text that follows much farther away. The border then shows the area that the browser considers the content of the element. For fragment 7, you set a left margin of 50 points, but a right margin of 25 percent of the browser window. Fifty points of padding – all around the element because you're using the combination property – expands the space occupied by the fragment, and the groove border shows you how the browser handles this set of properties.
div#fragment6 {margin-left:25pt; margin-bottom:50pt; border-style:double;}
div#fragment7 {margin-left:50pt; margin-right:25%; padding:50pt; border-style:groove;}
Now modify the presentation for the last few elements, setting fragment 8 to appear on the right-hand edge of the page. The paragraph is in sans-serif type, distinguishing it from its div counterparts. For the em element, however, you override only the default italic – making it bold but not italic.
div#fragment8 {text-align:right;}
p {font-family:sans-serif;}
em {font-weight:bold; font-style:normal;}
While this demonstrates many of the capabilities of CSS, making CSS useful requires case-by-case examination of your documents in combination with the XHTML strategies you choose. If you plan to use strict XHTML, CSS is an invaluable tool. Even if you use transitional or frameset XHTML, however, you may find it easier to apply CSS properties from style sheets rather than scatter formatting information throughout your documents.
Rules for Rules The cascade in Cascading Style Sheets describes a set of rules determining how CSS properties get applied. Documents can reference multiple style sheets with multiple link elements, and those style sheets may in turn reference other style sheets through CSS @import URL statements. Documents also may include style sheets directly within a style element, elements within HTML and XHTML documents may specify additional styling by describing properties in the style attribute, and users may (at least in theory) tell their browsers to present documents using style sheets of their choice. All of these options provide enormous flexibility, but they make a clear set of rules critical.
CSS2 lays these rules out in Section 6: Assigning Property Values, Cascading, and Inheritance (http://www.w3.org/TR/REC-CSS2/cascade.html). The specification first describes inheritance, the rules for handling styling of elements contained by other elements. Then it describes the interaction among user agent (typically browser), user, and author style sheets. Users should be able to create style sheets and override the style sheets that come with documents (the author style sheets), but CSS provides an !important mechanism that enables the creators of author style sheets to override user preferences. The ! mechanism is somewhat controversial, partly because ! usually means 'not', and partly because the rules for processing it changed between CSS Level 1 and CSS Level 2. At this point, most software doesn't provide a mechanism for applying user style sheets, which favors the theory that authors should be able to override the browser defaults.
As for the many style sheet documents that may contribute to the presentation of a given document, the general rule is that the last declaration wins and imported style sheets are considered to come before the document content that actually imports them. The last style sheet linked into an HTML or XHTML document is effectively dominant. Style sheets may build on older style sheets by importing them and then overriding or supplementing the rules they contain. Another somewhat complex set of rules describes how to choose among rules set by different selectors based on how specifically they target a given element. Styling describing an ID is more specific than styling describing a class of elements, which may be more specific than styling describing how to format all elements of a given name. The rules are a little strange, but they typically make sense in practice.
Application Issues The worst problems for developers using CSS stem from implementation in various browsers, not from the complexity of the specification itself. While the W3C's www-style mailing list periodically tears apart pieces of the specifications, most of the difficulties involve various levels of support for CSS functionality in different browsers. Even when features are implemented, often details don't work as expected or as advertised. CSS today is also a very browser-oriented technology, although there are editors that support and use cascading style sheets on various levels. In addition, browser-orientation is pretty natural to XHTML. As Article 5 reveals, older browsers have plenty of problems with XHTML already; using CSS helps in some of these cases and hurts in others. While CSS seems like a natural part of the XHTML family of standards in the long term, it will be a bumpy transition while browsers improve and users slowly upgrade.
Tip If you have questions about the structure of CSS or why it does things in a particular way, as opposed to simple implementation issues, the www-style mailing list maintained by the W3C is an excellent resource. Archives are available at http://lists.w3.org/Archives/Public/www-style/, and subscription information is available at http://www.w3.org/Mail/Request. If you need to find out which browsers support certain features of CSS, Web Review maintains an excellent listing at http://webreview.com/pub/guides/style/style.html. To test out a particular browser's conformance to CSS, visit the W3C's CSS Test Suite (CSS1 only at present) at http://www.w3.org/Style/CSS/Test/. To check that your own CSS is written properly, visit the W3C's CSS Validation Service at http://jigsaw.w3.org/cssvalidator/.
Is XSL for XHTML? Supporters of Extensible Stylesheet Language (XSL) promote it as far more powerful than CSS, especially for print media. You can apply XSL to any XML, including XHTML. XSL's capability to reorganize and rebuild documents is attractive in some situations, and some classes of applications may find it necessary. There are some real costs to XSL, however. As of this writing, the specification for the formatting objects remains in development, although Article 12 explores the complete transformation vocabulary (XSL Transformations, or XSLT). While the XSL Formatting Objects vocabulary is fairly similar to cascading style sheets, the mechanisms involved in XSL's transformative approach are much more like programming than those in cascading style sheet's more descriptive approach. Designers who already have a background in programming may find XSL exciting, but others may find it intimidating. XSL support probably will come to browsers eventually, although it isn't clear if support for XSL will be any smoother than that for CSS. In any case, it's likely that XSL support will be delayed as CSS support has been – making this transition, if it takes place, a slow one. For now, while it's wise to keep an eye on XSL developments, you probably will do better to leverage the already friendly relations between HTML (and XHTML) and CSS.
legal notice
Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.
Useful tools and features
If you like this article (tutorial), please link to it from your web page using the information above.
related articles
Coding Styles— XML and XHTML's Maximum Structure Overview XML parsers are far more brutal about rejecting documents they don't like than are HTML browsers. XML's clear focus on structure demands that the practices described in the previous chapter must change. However, most of those changes shouldn't cause more than minor inconveniences – at least for newly created documents. Note If reading this chapt...
2. XML and CDATA
Processing instructions XML also enables developers to pass information to the application through processing instructions (often called PIs). Processing instructions use a similar syntax to the XML declaration, although the rules for them are much less strict. Processing instructions begin with <? and end with ?>, but the developer generally dictates their contents. The first bit of text before a space appears in a PI is called the target. The target must start with a letter, unde...
3. lang Internationalization
Internationalization: xml:lang and lang Internationalization (often abbreviated i18n because 18 characters appear between the i and the n) gets a significant boost with the shift to XML primarily because of XML's use of Unicode as the underlying character model. While not every document needs to encode Chinese, Cyrillic, Arabic, and Indian characters, Unicode makes it possible for all of these forms to exist within a single document. In addition, XML and XHTML allow for the possibility of other e...
4. Anatomy of an XHTML Document
The transition from HTML to XHTML will come with a fair number of bumps. While later chapters introduce tools to help you get past those bumps – and figure out where they come from – this chapter examines what's going to change and demonstrates a few strategies for handling those changes. Along the way, we visit the ghosts of browsers past and explore problems that exist in current browsers. In turn, you discover how prepared and unprepared various tools are for XHTML. Note Som...
5. Converting to strict HTML and XHTML
Converting to strict HTML You start out by declaring your intentions to use the strict HTML 4.01 DTD by putting the appropriate DOCTYPE declaration at the head of the document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Now the first section of the document, including the HTML opening tag and the HEAD element and its contents, is fine except for one line. The SCRIPT element no longer supports a LANGUAGE at...
6. Reading the XHTML DTDs A Guide to XML Declarations
Reading the XHTML DTDs: A Guide to XML Declarations Although the W3C has long had document type definitions (DTDs) for HTML, few developers actually use those DTDs as a foundation for learning HTML. XHTML 1.0 simplifies those DTDs with the slightly friendlier XML syntax – they previously used SGML's more complex syntax – and the increased emphasis on validation may lead developers to explore them more closely. Making good use of XHTML 1.1 requires some level of ...
7. Defaulting attribute values XHTML DTDs
XML 1.0 also provides a set of tools for specifying what happens if an attribute isn't declared within an element. Four different possibilities exist, including "the attribute just isn't there"; "the attribute must be there, period"; and "the attribute has this value, period." You already have seen a few uses of these choices in the preceding declarations. In the img element, for instance, the src and alt attributes are required (#REQUIRED); meanwhile, most of the rest of its attribute content is optio...
8. Exploring the XHTML DTDs
Exploring the XHTML DTDs Choosing Your DTD XHTML 1.0 provides three DTDs that describe different sets of XHTML elements and reflect the three choices provided in HTML 4.0: strict, transitional, and frameset. The probably the one that the W3C would like to see developers adhere to, but transitional DTDs reflect the reality of HTML usage much more accurately. Appendix A lists the in the three different DTDs, along with notes regarding attributes. To identify the DTD for a ...
9. Building XHTML DTD Structure Element and Attribute Declarations
Building Structure: Element and Attribute Declarations After all of these preliminaries, it's finally time to make some real declarations, creating the elements and attributes partly described by the entities established so far. This portion of the DTD is broken down into segments that reflect groupings of element types, foreshadowing to some extent the modularization process that XHTML 1.1 will perform. If you have trouble getting your XHTML documents to validate, you need to explore this portion of the ...