Você está na página 1de 12

Dreamweaver:

Cascading Style
Sheets

Goals of the Workshop


This workshop seeks to introduce participants to Cascading Style Sheets (CSS) and how
to apply them using Dreamweaver MX. At the conclusion of the workshop, participants
should be able to:
• Understand the benefits and limitations of CSS
• Create an internal sheet
• Create an external style sheet
• Attach an external style sheet to a page
• Design a basic page using CSS to control positioning rather than tables

A Bit of History
HTML was originally intended to identify elements of a web page, not to control how the
page looked on the screen. As the web evolved from a purely text-based medium to a
more varied format, web designers wanted more control over the look of their pages.
Eventually, HTML included more design elements (such as the ability to change font
colors), but the process was still tedious for large sites.

CSS was developed to address the needs of web designers to exercise greater control over
how their pages looked. It allows you to separate your content and your design in your
code. Using CSS you can very easily make significant changes to how you pages look on
all of the pages in your web site in a matter seconds. In addition, advanced users of CSS
can exercise very precise control over the placement of elements on the page without
having to use tables. As a result, pages can load faster and CSS also allows web designers
to break free of the “boxy” design that is often the result of designing with tables.

However, there are problems with CSS. Not all browsers render CSS correctly. For a
chart showing which CSS elements are supported by which versions of Internet Explorer
and Netscape Navigator visit this resource:

http://www.w3schools.com/css/css_reference.asp

CSS at Work
Visit the following web site to get a sense of one way CSS is applied to easily and
dramatically change the way a page is displayed:

http://www.w3schools.com/css/demo_default.htm
Applying CSS
CSS can be applied in three ways:
1. Inline Style
2. Internal Style Sheet
3. Attached Style Sheet

Using Inline Style to implement CSS negates many of the advantages of using CSS, so
we will not devote time to it in this workshop.

Creating an Internal Style Sheet


Open the page called sample.ht ml in the workshop file folder. This illustrates a simple
page where the text identified by the HTML tag <H1> is displayed in a blue sans-serif
font by nesting a font tag within each occurrence of the <H1> tag. Look at the source
code:
<H1><FONT FACE=”sans-serif” COLOR=”#3366CC”>First
Title</FONT></H1>

Using traditional HTML, each time the <H1> tag is used we have to nest the font tag to
achieve the desired result. If we later decide that we would rather have the <H1> text
displayed in red we would have to go through and manually change each font tag. Using
CSS makes the task much easier.

Open Sample2.html in Dreamweaver. Let’s recreate the same effect using CSS.

ü Go to Text > CSS Styles > New


ü Choose Tag as the
Selector type.
ü Select h1 from the drop
down list as the tag we
wish to redefine.
ü Select This document
only as the location to
define in.
ü Click OK
ü The CSS Style Definition
Window will pop up.
ü Type sans -serif in the Font box
ü Type #3366CC in the Color box
ü Click OK.
ü The new effect is applied to all instances of the <H1> tag in the document.
Because we elected to define the style in this document only, Dreamweaver added some
code in our <HEAD> section of the document:

<style type="text/css">
<!--
h1 {
font-family: sans-serif;
color: #3366CC;
}
-->
</style>

If we wanted to change the style of the main text on the page we could repeat the process
above but define the <P> tag instead and end up with something like this:

<style type="text/css">
<!--
h1 {
font-family: sans-serif;
color: #3366CC;
}
p{
font-family: Georgia, "Times New Roman", Times, serif;
color: #990000;
}
-->
</style>

We are not limited, however, to simply redefining how HTML tags are displayed. CSS
allows us to create custom styles that can be applied anywhere, regardless of the HTML
tag associated with the element we want to customize.

To Create a Custom Style


ü Go to Text > CSS Styles > New
ü Choose Make Custom Style (Class) as the Selector type.
ü Type .headline
ü Select This document only as the location to define in.
ü Click OK
ü Change the font characteristics as in the illustration below:
Creating a
custom style
called headline

ü Click OK
ü On your page, select some text.
ü Go to Text > CSS Styles > headline
ü The style will be applied to the text you selected.

Creating a External Style Sheet


You can also define your CSS styles in a text file that is separate from your actual web
page and “attach” the style sheet to the web page. This method offers several advantages.
First, your stylistic elements are further separated from your HTML, leaving your HTML
cleaner. Second, the same styles can be used on multiple pages within a site without
having to duplicate the style definitions on each page. Simply attach the style sheet to
each page where you would like the styles used. In Dreamweaver, you could even make
the code that attaches the style sheet a part of a template, further simplifying dramatic site
wide changes that could take hours or days if the design elements were created with
simple HTML. Simply change the external style sheet and upload it to your server. The
changes are made. If you used an internal style sheet as part of your Dreamweaver
template, you would still have to upload all the pages that use that template. External
style sheets save time and effort. But you do need to be aware of how styles are inherited
(see “What’s Cascading About CSS? Below).
To make an external style sheet and attach it to your current document, simply Text > Css
> New; then elect to define it in a New Style Sheet.

Give the sheet a name when prompted. Then define your styles as you normally would.
The style sheet will be saved with a .css extension. In your HTML document a line will
be added to your <HEAD> section:

<link href="test3.css" rel="stylesheet" type="text/css">

This code tells the browser to load the file test3.css and apply the styles defined in that
file to the current document.

Notes:
ü You can attach more than one external sheet. However, be aware of inheritance
rules (see “So What’s Cascading about CSS?” below). Also, some older browsers
have trouble with importing more than one style sheet.
ü To attach an already created style sheet to your current document:

1. Go to Window > CSS Styles


2. Click the icon to Attach Style
Sheet
3. Browse to find the sheet you wish
to attach.
4. Pick whether you would like to
“link” the sheet or “import” it. In
most cases, these are
interchangeable. Older browsers
that do not offer complete CSS
CSS will ignore sheets that are
imported. The “link” method also
allows additional attributes that
we will not discuss here.
Or:
1. Text > CSS > Attach Style Sheet
Follow steps 3 & 4 from above
To Turn an Internal Style Sheet into an External One
ü File > Export > CSS Styles
ü Name your file
ü Note that this copies the current internal styles into a new external sheet. It does
not remove the internal styles from your current document, nor does it attach the
newly created external sheet to your current document.

Some Commonly Requested Settings

Changing Links
With CSS you can control the look of your links. No longer do you have to be satisfied
with blue underlined text. CSS uses what is called pseudo-classes to redefine the
appearance of links. (You don’t need to know why it is a pseudo-class, but if you have a
burning desire to know, you can read http://www.w3.org/TR/CSS1#pseudo-classes-and-
pseudo-elements.)

√ Start to define the style as you


would any other one.
√ Choose Use CSS Selector
√ For the selector, type “a:”
followed by the state of the
link you wish to define.
√ Links have 4 states. See the
table below. You can define
each state independently.
√ You can define any or all of
the states.
√ NOTE: The order in which you define them is important. Do them in the
order listed below:

Link Type Description


a:link The normal state of a link, with blue as
default color.
a:visited The state of a link after a user clicks a link;
its default color is purple.
a:hover The state of a link when the user moves the
pointer over it like a rollover.
a:active The state of a link when it is selected by
the user, its default color is red

Indenting Paragraphs
To create a paragraph that is indented as is the standard in the print world, adjust the text-
indent of the <P> tag or of your custom style.
Hanging Indents
Hanging indents are often used in bibliographies and look like the following:

Davis, John, and Peter Edwards. The True History of Presidential


Campaigns. New York: Watts, 1982.

To create the same effect with CSS, set the text- indent to a negative number, and then set
the margin- left to the same number’s positive equivalent. For example:

.hanging {
text- indent: -25px;
margin- left: 25px;
}

A Watermark
ü In the <Body> tag, select the background image you would like to use.
ü Set the image to No-Repeat
ü Set the attachment to Fixed
ü Set the horizontal and vertical position to where you would like the image to
appear.

Example:
body {
background-image: url(watermark.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}

So what’s an em anyway?
You are often asked when working in CSS if you would like to use ems, exs, px, points,
picas, inches, etc. when setting your font size or indentations. These are typographical
units of measurements. However, even if you are familiar with some of them from
printing, they sometimes have special meanings in CSS:

em in standard typography is equal to the width of the letter 'm' in the current
font. However in CSS, an em is considered to be the size of the user's default
font-size. So, in a default IE install, 1em will be 16px.

ex is like em, but it is equal to the height of the lowercase 'x' in the current font.
However, in CSS, an ex is considered to be half of one em. In a default IE
install, 1ex will be 8px.

pt stands for 'point', a typographical unit of measurement equal to 1/72 inch. On


72dpi (dots per inch) media, 12 point text will be 12 dots high (or 12/72 inch);
on 96dpi media it will be 16 dots high, but still 12/72 inch. Note that most
personal computer operating systems use dpi values as if they corresponded to
real inches (which they infrequently do) that actually refer to virtua l inches
that vary in size according to display resolution and size. For example, 12
point text on a Windows PC using a 17" CRT display and 96 dpi will be about
13/72" tall at 800x600 display resolution, but only about 10/72" tall at
1024x768 display resolution.

px stands for 'pixel', the smallest element on a computer screen. It is inadvisable


to specify font sizes in pixels because they can't be resized by the sight-
impaired who use Internet Explorer, and will be a different real size on a
display with a different resolution and/or size.

You can also use absolute measurements such as centimeters and inches, but those
measurements should be avoided when designing for the web since the various computer
monitors used will make them useless.

So what measurement should you use? Web designers disagree, although there are only
two top runners. Most use either pixels or ems. Ems have the advantage of being
resizable by the user in the browser (in IE, go to View > Text Size). Pixels are fixed.

For an example of the debates, see: http://archivist.incutio.com/viewlist/css-discuss/1482.

So What’s “Cascading” about CSS?


Style Sheets are called “cascading” because they follow specific rules that determine how
they are applied to the elements on a page. The easiest way to understand this concept is
to define the same tag (such as <P>) using both an inline style and as part of an attached
style sheet, but define the tag differently in each case.
ü Open Sample2.html.
ü In this file we defined the <p> tag to have a color of #990000 using an internal
style sheet.
ü Now to this page, attach the external style sheet we created called sample3.css.
(See explanation above about how to attach an external style sheet.) Remember
that in this external style sheet we defined <P> to have a color of #006633.

When we apply the external style sheet…nothing happens (at least not with the <P> text).
This happens because styles defined in an external style sheet have a lower priority
than styles defined in an internal style sheet.

The rules of inheritance are as follows, where #4 has the highest priority:

1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML eleme nt)
So, an inline style (inside an HTML element) has the highest priority, which means that it
will override every style declared inside the <head> tag, in an external style sheet, and in
a browser (a default value).

Designing without Tables


The positio ning elements of CSS give web designers a great deal of power and flexibility
with their page layout. Historically, designers have used a combination of tables,
transparent images, and the <spacer> tag to control the placement of elements on the
page. This method presents all sorts of problems, however. Because browsers must
download all the portions of a table before beginning to display its contents, pages load
slower. Readers used by web surfers with visual impairments may be confused by table
layouts and “invisible” images used to control spacing.

CSS offers an alternative.

Look at the following examples:


ü http://www.wired.com/
ü http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

Neither one of those pages uses tables for layout purposes. (Note: there is one table on
the Wired page, but it is content that is taken from a service—the stock quotes). In
addition, the second page illustrates how CSS can be used to wrap text around images as
designers might do in a print publication.

Let’s design a simple page that has a banner type area across the top, navigational links
down the left side, and a main content area…and let’s do it without tables.

Open the file “rough.html” in our working folder. This is page contains the unformatted
text of our page. When we are finished with it, however, it should look like this:
This
page
was
designed
without
using
any
tables,
just CSS

Steps:
ü Text > CSS Styles > New
ü Create a new style sheet and to attach by using the folling settings:
Tag: Body;
Selector Type: Tag;
Define In: New Style Sheet File
ü Name the css file “rough”
ü Redefine the attributes of the <body> tag as follows:
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
ü Redefine the attributes of the <H1> as follows:
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
ü Redefine the attributes of the paragraph tag <p> as follows:
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
ü Redefine the attributes of hyperlinks (the <a> tag) as follows:
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;

At this point, let’s exit out of the style sheet and see how the application of the style
sheets affects our page. … The text colors are different than the default, but the layout is
still basically the same. We have more work to do.

ü Let’s add the pseudo-class elements for the links. Open the style sheet and
manually add the following lines:
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
ü Define a new class named .header as follows:
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right
borders: 0px */
line-height:11px;
background-color:#eee;
ü Exit out of the style sheet editor.
ü Apply the .header class to the text “Academic Technology Support” using
<DIV> tags
o Highlight the text;
o Insert > Layout Objects > Div Tag
ü Define a new class named .leftmenu as follows:
position:absolute;
top:100px;
left:20px;
width:150px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
width:150px;
ü Exit out of the style sheet and apply the new class to the series of links at the
bottom of the page by using <DIV> tags.
ü Create a new class named .content as follows:
margin:0px 50px 50px 200px;
padding:10px;
ü Apply the .content class to the text in the page beginning with the “Example
of…” and ending with “Another link”, once again using <DIV> tags.

You should now have a page that resembles the one above.

Useful Resources:
The official Web Consortium page for CSS:
http://www.w3.org/Style/CSS/
CSS validator:
http://jigsaw.w3.org/css-validator/

Academic Technology Support

Karen King, Director


kingk@etsu.edu, 423.439.8611

Erik Bledsoe, Technology Development Coordinator


bledsoe@etsu.edu, 423.439.8615

Myra Jones, Technology Development Coordinator


mjones@etsu.edu, 423.439.8614

Você também pode gostar