Cascading Stylesheets (CSS) Tutorial |
||||||||||||||||||||||||||||||
About Cascading StyleSheets (CSS)Before you delve into this topic too far, you should refer to the World Wide Web Consortium (W3C) CSS Standards documentation. W3C's CSS document is at http://www.w3.org/TR/REC-CSS1.html It's a big document, but you'll have to digest it if you want to understand how CSS really works. Using a tool like NetObjects Fusion is faster and easier than coding HTML and CSS formatting commands -- but you really should consider investing the time to understand what the code Fusion publishes is actually doing for you. The bad news: some CSS formatting commands work in some browsers, and not others. That means you have to experiment and test your work in as many different browsers as you can.
Why Use CSS?
Fusion's text formatting dialog shows you the same options whether you have set CSS formatting or HTML formatting. You must realize that many Fusion text formatting commands require you to Turn On CSS Here's a short list of things you get with CSS that you can't get with HTML formatting (the tag):
Fusion stores your CSS formatting commands in external CSS files that are not part of your HTML page. That means all the formatting commands download separately from your page content. Because browsers multitask by downloading multiple files at once, CSS renders much faster than a single HTML file with many tags. Other CSS Advantages:
Most of you will find Web Design (with NetObjects Fusion or any other popular tool) little different than using a Word Processor. Just as you should use styles in Microsoft Word, you should also use CSS in Fusion.
Would you really rather search out every single bolded word on a hundred-page-plus site and change them all manually to bold, red, underlined?
Make Fusion Use CSS
The CascadeOne of the real powers -- and traps -- of CSS is the way lower levels "inherit" formatting commands from any higher level. This is the cascade. The cascade is an important concept to understand, because:
Understanding Fusion's Automatic CSS SettingIn Fusion CSS dialogs, the setting Automatic means, "Format this text the way higher levels in the cascade format this text." The Cascade is a little complex. A picture is worth a few hundred, if not a thousand, words. The diagram below from the NetObjects Fusion User's Guide does a good job explaining how the cascade works.
The BrowserThe browser is the "boss" level. You as a designer can not override custom browser settings. Picky viewers of your site might set up their browsers in ways that will prevent your site from displaying as you designed it. What can you do about this?
Back to CSS Level image map Styles in Site StyleSite Styles are the common page elements that you setup in Fusion's Style View, Text tab. Fusion stores the Site Style CSS formatting commands in the external CSS file STYLE.CSS.
Published HTML pages link to these CSS styles like this:
Some tips:
Back to CSS Level image map SiteThese are styles you can setup only from Fusion's Page View. Fusion stores the Site CSS formatting commands the file SITE.CSS. The published HTML pages link to these CSS styles like this:
TIP:
To add or edit styles that will be available throughout the site (besides those defined as Site Styles in Style View),
Notice that you can define styles at the Styles in site level that change the standard HTML tag elements that you already set in Style View, like or
Spare yourself some grief. Unless you have a very good reason, don't edit the standard HTML elements from Page View. Back to CSS Level image map PageYou setup Page styles from Fusion's Page View. Fusion stores the formatting commands in the portion of just the current page, like this:To create a style that's only available on the current page, from Page View, do this:
TIP: If you really want a different look for a certain style only on one page, you can use a page style with the same name as one defined in the Site.css to override formatting set at the site-wide level. This works, but
Instead, create unique new custom styles, Scope set to Styles in Site. You can override a higher level site style of the same name. But, because it may cause confusion, or not render correctly in some browsers, don't do this. Back to CSS Level image map Selected TextFusion and the W3C give us two ways to apply CSS styles only to selected text within a page.
Using Existing Styles
Using Direct Formatting StylesYou can apply direct CSS formatting to text like this:
Which is better?Notice how much less code you place in the page by calling styles from the external .CSS file style sheets. A "CLASS=" call to an externally named and defined style is way fewer bytes than the extra stuff that must appear in a complex direct CSS style.
Back to CSS Level image map More CSS ResourcesFor more information about the specifics of how to use CSS text formatting in Fusion, please see the NetObjects Fusion User's Guide. Specifically, you want to read the section titled Formating Text:
The Fusion manual has a very good summary of the concepts behind CSS, including the different levels where you can define styles, and how those levels cause formatting to "cascade" from the highest (the user's browser) to the lowest (what the designer defines within an element on an individual page). Other resources: |
||||||||||||||||||||||||||||||