|
|
| |
|
Style sheets are, in general terms, a collection of formatting
rules that control the appearance of content in a web page.
You can implement CSS on your pages three different ways:
|
|
|
Inline: a one-time style placed in the code
|
|
|
Embedded: a style sheet that controls the
elements on one web page
|
|
|
External: one external style sheet that can
control the appearance of many web pages
|
|
|
Many websites, in fact, use combinations of these different
kinds of CSS styles.
An important consideration in the use of CSS styles is
the fact that different browsers (and different versions
of the same browser) render CSS styles differently. In addition
to variations in web browser compatibility, you should be
aware that many other types of browsers exist, such as aural
browsers, TV-based browsers, handheld devices such as Palm
Pilots, and TTY (teletypewriter).
If you want to learn more about the basics of CSS before
proceeding on with a "best practices" analysis,
review some of the materials listed in the More
Resources section.
|
|
What does CSS "best practices" mean?
Most technologies have accepted standards, and CSS styles
have their own set of standards. Although non-standard CSS
practices (including its lack of use) exist on the Internet,
there are many benefits to adhering to the defined standards.
In general, developers should aim to "separate content
from presentation" as much as possible on all web pages.
Proper separation is recommended in order to:
|
|
|
Increase the longevity of your website
|
|
|
Using non-standard practices may seem more convenient
at the moment, but a future version of a browser may
not be so tolerant of shortcuts. Individually changing
all of your web pages in the future could be very
time-consuming and defeat one of the main purposes
of using CSS styles in the first place.
|
|
|
Make your website more accessible—to all users
and devices
|
|
|
Government legislation in some areas has required
websites to be accessible to users with disabilities.
Browsing devices that assist people with disabilities,
such as an aural browser, are especially dependent
on the best use of CSS styles.
|
|
|
Allow you to update and maintain your website with
ease
|
|
|
Properly implemented, CSS styles allow you to make
changes to your website on one page and see those
changes take effect globally across your entire website
instantaneously.
|
|
|
Best practices with CSS in Dreamweaver MX
One of the first decisions you'll have to make involves
selecting which kind of CSS style to use. Below is an analysis
of the different kinds of CSS styles with best practices
in mind.
|
|
Inline CSS
|
|
|
Simply put, you should avoid inline CSS styles. Apart
from any other considerations, using inline CSS means
that you are not taking advantage of the true powers
of CSS-and it means that you are not separating content
from presentation.
|
|
|
Dreamweaver MX uses inline CSS mark-up primarily
for positioning page elements (these positioned items
are called "Layers" in the Dreamweaver MX
UI), or to enable a specific DHTML effect which requires
an inline style to alter an object's properties with
JavaScript.
|
|
|
Embedded CSS
|
|
|
Embedded CSS is less than optimal because it only
affects the style of the page on which it is written.
During an update process, inconsistency across your
site will result if any pages are missed. Additionally,
your style information-which exists on each and every
page of your site-has to be downloaded every time
a user views a page.
|
|
|
External CSS files
|
|
|
External CSS files should always be your first choice.
By creating a CSS file that contains all of the style
information for your website, you can:
|
|
|
|
Maintain a consistent look across all pages that
link to the style sheet.
|
|
|
Easily update the look of all pages by changing the
values in one file.
|
|
|
Make your pages much smaller and quicker to download,
because all of the style information has been removed
to one file.
|
|
|
Other CSS best practices will be mentioned as specific CSS-related
features are outlined below.
|
|
Creating a CSS style in Dreamweaver MX
When you create a new style in Dreamweaver MX, you have
two choices in the New CSS Style dialog box: New Style Sheet
File or This Document Only. Choosing New Style Sheet File
will start the process for creating an external style sheet.
This option requires you to name and save the CSS file before
actually creating a style. The other option, This Document
Only, will embed the style directly into the head of your
document.
|
|
|
|
You can also select an existing style sheet in the New Style
dialog box to edit or add more definitions to it.
|
|
Should you link or import your external style sheet?
After creating your external style sheet, you will need
to attach it to each page (or attach it to a template).
To do this, click the Attach Style Sheet button on the CSS
Panel. The Link External Style Sheet dialog box will appear,
allowing you to browse to the name of your style sheet.
After you've located the style sheet, you can choose to
link or import the external style sheet.
|
|
|
|
Linking to the style sheet is the most common approach.
Selecting the "link" option will attach your
external style sheet to your page by adding the following
markup:
<link href="mystyles.css" rel="stylesheet"
type="text/css" />
All CSS-enabled browsers support the linking option, and
this method should be followed if you need older browsers
(such as Netscape 4.x) to "see" the styles.
If you choose the "import" option, the style
sheet will be attached with the following mark-up:
<style type="text/css">
<!--
@import url("mystyles.css");
-->
/style>
The import method of attaching a style sheet is not recognised
by the older, version 4, browsers. However, it can come
in handy. Developers often use the import method in order
to include CSS styles designed for new browsers while also
linking to an external style sheet to include styles for
Netscape 4.x. This technique is explained in more detail
below.
|
|
One strategy to cover newer and older browsers
You can use both the link and import methods to attach two
different style sheets that, between the two of them, cover
multiple browsers-including Netscape 4.x. One style sheet
only contains values supported in the older browsers; and
one style sheet contains additional or different properties
for the newer browsers with more robust CSS support.
To accomplish this, you first attach the style sheet for
the older browsers using the link method. Then, select import
to attach the style sheet for newer browsers. The resulting
code will look similar to this:
<link href="oldbrowsers.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
<!--
@import url("newbrowsers.css");
-->
</style>
The version 4 browsers will completely ignore the imported
style sheet and render the page according to the values
in the linked one, leaving you free to fully use the capabilities
of CSS for those browsers that support it. This approach
eliminates the possibility of causing an unreadable page
in older browsers.
|
|
The CSS Property inspector
You can now easily switch into CSS mode within the Dreamweaver
MX Property inspector. By default, the Property inspector
displays the original font tags in HTML mode. To switch
the Property inspector into CSS mode, click the CSS/HTML
toggle (the small "A" next to the font pop-up
menu). Instead of the font tag list, you will be presented
with the list of CSS styles currently available.
|
|
You can always toggle back into HTML mode to work on a non-CSS
based website. |
|
Ready-made style sheets
A particularly exciting new CSS-related feature in Dreamweaver
MX is the inclusion of ready-made CSS style sheets. New
users to CSS can begin by experimenting with one of these
ready-made style sheets.
To get started, choose File > New. In the New Document
dialog box (under category) select CSS style sheets. A whole
list of ready-made style sheets will appear in the right-hand
pane. To implement best practices, you should choose one
of the style sheets marked Accessible.
|
|
|
You can now save this document into your site folder and
attach the CSS file to your pages as described above.
|
|
Design Time style sheets
This convenient Dreamweaver MX feature allows you to apply
a style sheet so you can see how your site really looks
while you are still in Design view. This style sheet will
not appear on your live site. From a best practice viewpoint,
this feature is especially useful. If you are using the
import and link method described earlier (with two style
sheets), attaching a Design Time style sheet will allow
you to design your website using one of those two style
sheets. When you want to see how the page looks with the
other style sheet, you can easily change the style sheet.
Design Time style sheets will also be helpful for developers
who are using style sheets that will be housed on the server-side
(with, for instance, ASP, PHP, or ColdFusion Application
servers) or accessed with JavaScript on the client side.
These server-side style sheets are another way to cope with
the lack of CSS support in older browsers. However, in previous
versions of Dreamweaver, this approach restricted you from
seeing the effect of the style sheet applied to your page
while you were designing. Design Time style sheets allow
you to apply your style sheet so you can work visually within
Dreamweaver. Another benefit to using Design Time style
sheets is that when you upload your site files, you won't
have to remember to go through the site removing unnecessary
style sheets.
|
|
Validation
Whether you have created your own style sheet or used and
edited a ready-made style sheet, validating your CSS styles
will help to ensure that you are not accidentally using
any non-standard tags or incorrect code. Frequently, problems
with CSS will disappear once the style sheet is validated
and the errors corrected.
Dreamweaver MX does not have a CSS validator, but you can
accomplish this by using the W3C
CSS Validation Service on the W3C website. Alternately,
you can validate your HTML or XHTML mark-up from within
Dreamweaver MX by choosing File > Check Page > Validate
Markup (for HTML) or File > Check Page > Validate
as XML for XHTML.
|
|
Dreamweaver MX provides you many tools that will assist
you in the development of your CSS-based websites. With
Dreamweaver MX and a solid understanding of CSS and the
importance of writing valid, accessible CSS code, you
are
well on your way to creating websites that will stand the
test of time.
|
|
More Resources
|
|
For basic information about CSS Styles, see:
|
|
|
|
The Dreamweaver MX Help documentation.
To access this material within Dreamweaver MX, choose Help
> Using Dreamweaver > Adding Content > Inserting
and Formatting Text > About Cascading Style Sheets. Also,
try out the Designing with Cascading Style Sheets tutorial
in the Tutorials section. Even experienced Dreamweaver users
would do well to check out the new CSS capabilities by reading
through these excellent help files.
|
|
|
|
|
|
About the author
Rachel Andrew runs her own web solutions company in the
UK—edgeofmyseat.com,
the company website also being home to various "web
standards"-focused articles and Dreamweaver extensions.
Rachel is involved with the Web
Standards Project on the Dreamweaver Task Force, and
hopes to encourage best practices in the support and use
of W3C Standards in Dreamweaver.
When not writing code, Rachel spends time with her daughter,
tries to encourage people to use Debian GNU/Linux, studies
with the Open University, and enjoys a nice pint of beer.
|
| |
