This guide tells you the possible values for each property. Sometimes a property can take a number of values, as in the font-family example above. The values in the list should be separated by a comma and a space. Again, detailed information about how this works for any particular property can be found in this guide. Sometimes a value will have a unit as well as the actual value, as in the font-size example above.
You must not put a space between the value and its unit. As with HTML, white space can be used to make your style sheet easier to read and write. You should use spaces as in the example above. Contact Us Search Site. These materials are copyright Western Civilisation Pty Ltd. The public availability of good style sheets will encourage this effect. The sample default style sheet for HTML 4 that is included in [CSS2] expresses generally accepted default style information for each element.
Authors and implementors alike might find this a useful resource. Any style sheet language may be used with HTML. A simple style sheet language may suffice for the needs of most users, but other languages may be more suited to highly specialized needs.
The syntax of style data depends on the style sheet language. Authors must specify the style sheet language of style information associated with an HTML document. Authors should use the META element to set the default style sheet language for a document. The default style sheet language may also be set with HTTP headers. User agents should determine the default style sheet language for a document according to the following steps highest to lowest priority :.
Documents that include elements that set the style attribute but which don't define a default style sheet language are incorrect. The syntax of the value of the style attribute is determined by the default style sheet language. For example, for [[CSS2]] inline style, use the declaration block syntax described in section 4. For optimal flexibility, authors should define styles in external style sheets. It is an error to render the content as part of the document's text. Some style sheet languages support syntax for hiding the content from non-conforming user agents.
Some style sheet implementations may allow a wider variety of rules in the STYLE element than in the style attribute. To specify that this style information should only apply to H1 elements of a specific class, we modify it as follows:. Finally, to limit the scope of the style information to a single instance of H1 , set the id attribute:. When combined with style sheets, these elements allow users to extend HTML indefinitely, particularly when used with the class and id attributes.
In the following example, we use the SPAN element to set the font style of the first few words of a paragraph to small caps. In the following example, we use DIV and the class attribute to set the text justification for a series of paragraphs that make up the abstract section of a scientific article.
This style information could be reused for other abstract sections by setting the class attribute elsewhere in the document. HTML allows authors to design documents that take advantage of the characteristics of the media where the document is to be rendered e. By specifying the media attribute, authors allow user agents to load and apply style sheets selectively.
Please consult the list of recognized media descriptors. The following sample declarations apply to H1 elements. When projected in a business meeting, all instances will be blue. When printed, all instances will be centered.
Media control is particularly interesting when applied to external style sheets since user agents can save time by retrieving from the network only those style sheets that apply to the current device.
The three most important of these are:. These descriptions are a simplification, of course, and all three languages are well worth learning about. For designers, however, CSS is the most crucial. This is a useful descriptor, since it lets you know what CSS is all about — styling and presentation. Instead, designers create style sheets, which are separate files that contain just CSS code. There are a few important things to understand about these files:.
Again, this system is more complex than these simple rules suggest. Still, this should be enough to give you a sense for what style sheets do and why they matter. A style sheet can contain as much or as little information as needed. Second, the majority of Web content creators are not capable of designing and writing good style sheets.
Experience with word processors that support style sheets indicates that most authors mangle their style sheets terribly. Understanding the effect of style is relatively easy in traditional desktop publishing because it is a WYSIWYG environment with a single, canonical output form. Furthermore, Web stylesheets are cascading, meaning that the site's style sheet is merged with the user's style sheet to create the ultimate presentation. These differences make it important that Web style sheets are designed by a specialist who understands the many ways in which the result may look different than what is on his or her own screen.
Fund an active evangelism program to teach your content creators how to use the centrally defined style sheet. Do not assume that people understand the concept of style and how to apply it, simply because they know a word processor with style sheets. Research shows that most users make horrible mistakes in using word processing style sheets : partly because the main word processors have particularly bad style sheet usability and partly because style is hard.
Your style sheet should come with a small manual that explains the different styles and when and how to use them. Include plenty of examples , including both raw HTML code cutting-and-pasting examples is the main way people use documentation and screenshots of the appearance of correctly coded pages in several mainstream browsers on several different platforms.
The screenshots should be made into clickable imagemaps, allowing users to click on an effect they want to achieve and get to the documentation for the appropriate styles. In particular, if multiple styles have similar appearance, many errors can be avoided by explaining the differences and when to use which style.
0コメント