Escolar Documentos
Profissional Documentos
Cultura Documentos
Cascading Style
Sheets
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.
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.
<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.
ü Click OK
ü On your page, select some text.
ü Go to Text > CSS Styles > headline
ü The style will be applied to the text you selected.
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:
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:
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.)
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:
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.
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.
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).
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/