chapter 1 Stylesheet Fundamentals - Pearson Education• Adding Style to Elements • Classes • Recap • Advanced Projects The Big Projects We’re going to learn Cascading Style

1

ch

ap

te

r

1

Stylesheet Fundamentals

I

N

T

HIS

C

HAPTER

• The Big Projects

• Task: Lay Out the Shelley Homepage in Cascading Style Sheets (CSS)

• Positioning Elements

• Adding Style to Elements

• Classes

• Recap

• Advanced Projects

◆

The Big Projects

We’re going to learn Cascading Style Sheets (“stylesheets”) andDHTML through the course of completing two fairly large, real-world-based projects. The first big project will be creating the home-page of a fictional company, Shelley Biotechnologies, Inc., instylesheets and then adding some serious interactivity with DHTML.

◆

Task: Lay Out the Shelley Homepage in Cascading Style Sheets (CSS)

In this chapter, we’re going to use stylesheets to create the home-page for Shelley Biotechnologies, Inc. First, we’ll position all the

ch01 Page 1 Wednesday, June 23, 1999 2:48 PM

Chapter 1 • Stylesheet Fundamentals 2

elements of the page; in other words, all the text and images,exactly where we want them using

<STYLE>

and

<DIV>

tags.Then we’ll modify some HTML tags so they better suit our pur-poses. These two uses—positioning elements and modifyingHTML tag definitions—are what stylesheets are really good for.

◆

Positioning Elements

The ability to place images and blocks of text exactly where andhow you want them is one of the most important advantages ofCSS. It allows you to design a page with the kind of precision andcontrol that used to be reserved for print designers. You still haveto worry about download time, but the ability to position ele-ments on your Web page is a wonderful thing.

Defining Position with

<STYLE>

The Shelley Biotech homepage appears as shown in Figure 1–1.

FIGURE 1–1

The Shelley Biotechnologies homepage


Positioning Elements 3

The images we’ll be using to create the pages in stylesheetsare slightly different than the ones that would be used in a non-stylesheet layout. The images we’ll be using are shown in Figures1–2 through 1–6.

Here’s how to place the company name (header.gif) at a spe-cific location on the page using stylesheets:

<HTML><HEAD><TITLE>Welcome to Shelley Biotechnologies, Inc.</TITLE>

1.

<STYLE TYPE="text/css">

2.

#companyName{ position: absolute;

FIGURE 1–2

company_name.gif

FIGURE 1–3

logo.jpg

FIGURE 1–4

main_nav.gif

FIGURE 1–5

resource_nav.gif



top: 20px; left: 20px;}

</STYLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

…

</BODY></HTML>

HOW THE CODE WORKS

1.

All the styles and layers of the Web page are declaredinside the

<STYLE>

and

</STYLE>

tags. A

layer

can con-tain any chunk of HTML, including text, tables, images,links, and even forms. A

style

is a modification of anHTML tag. Using the words style and layer in this mannerisn’t technically correct, but it’s how the majority of Webdesigners use the terms.

2.

We’re declaring a layer called

companyName

. The

#

means the contents of the layer are spelled out some-where else in the document, much like intradocumentlinks in regular HTML (for example,

<A HREF="#top">

).

FIGURE 1–6

feature.gif



position:

absolute

means that we’re going to tellthe layer exactly where it’s supposed to go. The otheroption is

position:

relative

, which tells the layerto simply position itself wherever it happens to fall.

top:

20px

and

left:

20px

tells the browser to posi-tion this layer 20 pixels over from the left edge of thebrowser window and 20 pixels down from the topedge of the browser window.

It’s vital that you place all the information about layersinside curly braces

{}

, and end each line with a semicolon. Ifthere’s trouble with your code, always check your curly bracesand semicolons—new programmers often forget them.

Blocking Off Content with

<DIV>

We determine the content of

companyName

inside the

<BODY>

ofthe page.

<BODY BGCOLOR="#FFFFFF">

<DIV ID="companyName"><IMG SRC="images/home/company_name.gif" HEIGHT="128" WIDTH="428" ALT="Shelley Biotechnologies, Inc."></DIV>

</BODY>

The

<DIV>

tag with an

ID=name

attribute contains every-thing that goes in a certain layer. Here, we’re determining thecontent of the layer

companyName

. The only thing in this layer isa single image.

Here’s the code for the rest of the layers:

#logo { position: absolute; top: 9px; left: 304px; }#mainNavigation { position: absolute; top: 138px; left: 25px; }#resourceNavigation { position: absolute; top: 173px; left: 189px; }#feature { position: absolute; top: 194px; left: 19px; }#companyName { position: absolute; top: 16px; left: 29px; }

Notice a layer’s information can be on the same line as long asthere are semicolons between the attributes. The content of these



layers is determined inside the

<BODY>

. We’re not going to spell outevery line of HTML—we just want you to get a general idea.

<DIV ID="companyName"><IMG SRC="images/company_name.gif" ALT="Shelley Biotechnologies, Inc." WIDTH="426" HEIGHT="126" BORDER="0"></DIV>

<DIV ID="logo"><IMG SRC="images/logo.jpg" "Shelley Logo" WIDTH="275" HEIGHT="117" BORDER="0"></DIV>

<DIV ID="mainNavigation"><IMG SRC="images/main_nav.gif" "Main Navigation" WIDTH="561" HEIGHT="42" BORDER="0" USEMAP="#mainnav"></DIV>

<DIV ID="resourceNavigation"><IMG SRC="images/resource_nav.gif" ALT="Resource Navigation" WIDTH="396" HEIGHT="31" BORDER="0" USEMAP="#resnav"></DIV>

<DIV ID="feature"><IMG SRC="images/feature_1.gif" ALT="Salsa!" WIDTH="571" HEIGHT="299" BORDER="0" USEMAP="#feature"></DIV>

Figure 1–7 shows you what the homepage looks like. Whoops. Some of the images are overlapping others, so we’re

not done yet. Let’s look at what’s happening and why.

Stacking with Z-index

Both browsers stack layers according to where the layer occurs inthe code. Layers that occur first (such as

companyName

) are placedon the bottom, and layers that occur later in the code (such as

logo

) are displayed on top of whatever’s already there. Thus, theimage of the logo is above the company name, so it overlaps andhides part of the Shelley Biotechnologies image. There are twoways to get around this: 1) Make the top image transparent so thebottom image shows through. But that won’t work here becausethe logo is a JPEG, and you can’t get transparency out of a JPEG.



Therefore, you have to 2) change the layer stacking order usingsomething new called the

z-index

.

#companyName{ z-index: 1; position: absolute; top: 20px; left: 20px;}

The z-index tells the browser which layer is on top. If youdon’t say which z-index a layer is, it’s assumed to be on a z-indexof zero, and the browser stacks the layers according to their orderin the code.

So, in this case, company_name.gif needs its whitespace to betransparent or we get the same problem we did when logo.jpgwas on top: The upper image overlaps and hides the one below it.

FIGURE 1–7

Screen shot of Shelley Biotech’s homepage



SOMETHING THAT WILL TRIP YOU UP LATER

You’ll notice for feature.gif we included the “ushering in a new age” text in the image. You may have wondered why we didn’t just make the “ushering” text another layer and put it on top of the “Shall We Dance?” image. There’s a good reason for this: If they were on sepa-rate layers, the links wouldn’t have worked.

If you have two overlapping layers and there are clickable images on both those layers, only the images on the top layer will be auto-matically clickable. The browser simply won’t see the clickable images on the lower layer, and nothing will happen when you click on them. This is true even if the clickable images aren’t directly underneath the layer above them. There’s a way to work around it, but it involves some pretty fancy DHTML. We’ll be covering that specific technique

in Chapter 7, “A Really Interactive Quiz: Part One.”

Stylesheets are great for precisely positioning elements onyour page, allowing you greater design freedom and easier layout(no more tables!).

◆

Adding Style to Elements

The other major advantage of stylesheets is being able to modifyHTML tags so they do exactly what you want them to. Your con-trol over these tags can be over individual tags, like

<B>

or <H1>,or you can create whole classes of formatting rules that can applyto many tags.

Modifying HTML Tags

Generally, the only modifications you can make to HTML tagsare changes to how those tags display text. You can’t create newtags or make tags do something totally different, such as makinga <FORM> tag display an image.

We’re going to alter the anchor tag <A>, the bold tag <B>,and the italic tag <I>.


…[ your layer declarations would go here ]…


Adding Style to Elements 9

1. A { text-decoration: none; }

2. B { font-size: 10pt; font-family: verdana, sans-serif; }

3. I { font-size: 9 pt; font-color: #333333; font-family: verdana, sans-serif; }

</STYLE>

HOW THE CODE WORKS

1. Look at A { text-decoration: none;}. In the world ofstylesheets, text decorations are the underlines on hyper-links, so this line of code tells the user’s browser to not dis-play the underlines in links.

2. Now look at B { font-size…}. This line modifies the<B> tag to not only make text bold, but also to make thefont size 10 points, and to display it in the Verdana font.If the visitor doesn’t have Verdana, the browser will usethe default sans-serif font (usually Arial for PC users orHelvetica for Mac users) on the visitor’s system.

3. The last tag modification is what we do to the <I> tag. Weshrink the text size to 9 points, change the text color todark gray (#333333), and display the text in Verdana orthe user’s sans-serif font face.

These are the only tag modifications we’ll be using for thisexample, but there are over a hundred different ways to define atag. Here are a few examples:

color: red; font-weight: bold;font-style: italic;line-spacing: 24pt;

The rest of the modifications you’re supposed to be able to useare available in Appendix A, “CSS Style Attribute Reference.”However, different browsers support different modifications, sotest your code on both the Internet Explorer (IE) and Netscapebrowsers before committing to them.

Be wary of using color names like we did with color: red.You can never be completely sure of how a named color will lookon a user’s browser. With named colors, the browser decides whatcolor “red” is and displays its own version of red. For colors like



black, white, red, and blue, you’ll get similar colors across brows-ers, but be careful if you get fancy with colors like “coral.” It’salways safest to use hex values; for example, color: #FF0000.We’re using named colors here for simplicity’s sake.

To put these modifications to work, we’ll first add a layer forthe text links and copyright information:

#text { position: absolute; top: 200px; left: 10px;}

and then we’ll fill out the following layer:

<DIV ID="text"><CENTER>

<P CLASS="superBig"><A HREF="products/index.html">Products</A> | <A HREF="services/index.html">Services</A> |<A HREF="training/index.html">Training</A><BR><A HREF="commongood/index.html">Common Good Projects</A> |<A HREF="news/index.html">Genetic News</A> |<A HREF="about/index.html">About Shelley</A></P>

<P CLASS="green"><A HREF="search/index.html">Search</A> |<A HREF="sitemap.html">Site Map</A> |<A HREF="jobs/index.html">Jobs</A> |<A HREF="contact/index.html">Contact Us</A></P>

<P CLASS="copyright">© 1999 shelley biotechnologies, inc. all rights reserved.</P>

</CENTER></DIV>

You’ll notice we included a </P> tag, which you almost neversee in plain HTML. However, when you’re using stylesheets, youshould close your <P> tags. You’ll see why this is useful in thenext section, “Classes.”


Adding Style to Elements 11

ABOUT RENDERED FONTSYou may have heard about being able to use any font you want on a Web page using stylesheets. This is true, but there’s a catch: You have to use TrueDoc with Netscape (which costs you money for every font you use), or use OpenType with IE. There isn’t a system that works in both browsers. So our advice is to forget both of these systems—it’s not worth the money or the headache to deal with both of them. If you absolutely have to use a certain font, use an image or a small Flash movie (our forthcoming book on Flash is a great resource).

Our Shelley homepage is laid out correctly and appears asshown in Figure 1–8.

There is another way to modify your HTML tags. You can putthe style directly into the tag itself without having to define it earlier

FIGURE 1–8 The new and improved homepage



in the code. It isn’t used very often and we don’t recommend it,because overuse of this technique can make your code very hard tofollow, especially when there’s a style error and you can’t find whereit’s coming from. Here’s an example:

<BODY> <H1 STYLE="color:red; font-size:24pt; font-family:arial;">Shelley Biotechnologies</H1>



#text { position: absolute; top: 400px; left: 10px;}



A { text-decoration: none; }



.regular{ color: red; }

.superBig


Classes 13

{ font-size: 16pt; font-weight: bold; color: red; }

.copyright{ font-size: 9pt; font-style: italic; text-transform: capitalize;}

</STYLE>

We’ve created three classes here: regular, superBig, andcopyright. Here’s how we could implement these classes in thetext navigation layer we looked at earlier.

<DIV ID="text"><CENTER>

<P CLASS="superBig"><A HREF="products/index.html">Products</A> | <A HREF="services/index.html">Services</A> |<A HREF="training/index.html">Training</A><BR><A HREF="commongood/index.html">Common Good Projects</A> |<A HREF="news/index.html">Genetic News</A> |<A HREF="about/index.html">About Shelley</A></P>

<P CLASS="regular"><A HREF="search/index.html">Search</A> |<A HREF="sitemap.html">Site Map</A> |<A HREF="jobs/index.html">Jobs</A> |<A HREF="contact/index.html">Contact Us</A></P>

<P CLASS="copyright">© 1999 shelley biotechnologies, inc. all rights reserved.</P>

</CENTER></DIV>



See where we’re applying the classes? All of the text in thefirst line of links will be big and bold text, any nonlinked text willbe red, the bottom row of links is smaller, and the copyright infor-mation is smaller still, italicized, and the first letter of every wordis capitalized (see Figure 1–9).

You can also specifically bind a class to a tag. For example:

P{font-weight: bold;font-size: 12pt; font-family: verdana, sans-serif;}

P.small{font-size: 9pt; margin-left: 5em; margin-right; 5em; }

FIGURE 1–9 The altered links using the superBig, regular, and copyright classes


Classes 15

Here’s how to apply the class:

<P>Shelley Biotechnologies is the uncontested leader in affordable biotechnology products.</P>

<P CLASS="small">How often does a company get to say that they don't have any competition? (No, the military doesn't count.)</P>

Notice that the 9-point font size in the P.small class over-rides the 12-point font size in the regular <P> tag.

Now, let’s add a nontag-specific class to the mix:

.cool { color: blue; font-style: italic; }

and create some code that looks like this:

<DIV CLASS="cool">

<P>Shelley Biotechnologies is the uncontested leader in affordable biotechnology products.</P>

<P CLASS="small">How often does a company get to say that they don't have any competition? (No, the military doesn't count.)</P>

</DIV>

All of the text in the two paragraphs will be blue and itali-cized. The first paragraph will be blue, italicized, bold, 12-point,and in Verdana. The second paragraph will be blue, italicized,have wide margins, and be 9 points in size.

You can’t directly combine classes, or include two classes inone definition. For example, this would never work:

<P CLASS="small,cool">

So what do you do when you want to apply two classes atonce? You use the <SPAN> tag.



Tight Control with <SPAN>

The <SPAN> tag is a nice, all-purpose tool to apply style wheneveryou feel like it. Say we’re still using the styles and classes we dis-cussed earlier.

<P CLASS="small">Shelley Biotechnologies is a family-oriented company – <SPAN CLASS="cool">safety is extremely important to us </SPAN>, which is why we require a one-week training period before anyone is allowed to use our flagship product, the Portable BioLab.</P>

<SPAN> doesn’t do anything except apply the class cool to thephrase safety is extremely important to us. If you wanted toapply the classes small and cool to the entire paragraph, youcould do this:

<P CLASS="small"><SPAN CLASS="cool">Shelley Biotechnologies is a family-oriented company – safety is extremely important to us, which is why we require a one-week training period before anyone is allowed to use our flagship product, the Portable BioLab.</SPAN></P>

If you really wanted to go nuts, you could add a nested<SPAN> tag inside the paragraph.

<P CLASS="small"><SPAN CLASS="cool">Shelley Biotechnologies is a family-oriented company – <SPAN STYLE="font-weight: bold; font-size: 16pt;">safety is extremely important to us</SPAN>, which is why we require a one-week training period before anyone is allowed to use our flagship product, the Portable BioLab.</SPAN></P>

You should also note that <SPAN CLASS="small"> should notbe used before the small class is specifically bound to the <P> tag.Current browsers are generally forgiving enough to let you use tag-bound classes with other tags, but it’s a bad habit to get into.

Cascading and Overlapping

We’ve talked a lot about the “Style Sheets” part of Cascading StyleSheets. Now we’re going to look at what the “Cascading” means.


Classes 17

You’ve already seen cascading in action. When a <P> tag isdefined to have a style, that style is carried through all the <P>sin the document. This style cascades down the page. If a <P> taghas a class assigned to it, the class styles apply everywhere insidethat <P> tag. A mini-cascade occurs inside that <P> tag.

You’ve also seen several different ways a tag can have a style:from the actual stylesheet, from classes, and from styling directlyinside the tag. This can result in several styles applying to a singletag. The way browsers deal with these overlapping styles is bydeciding which styles are more important than others. In general,the more specific a style is, the greater importance it has. AStyle attribute embedded in a tag is the ultimate specificity, andwill thus override any rule. The least specific rules are the defaultones set by the browsers; for example, using the Times font as thepage’s default font.

ID Selectors

An ID selector is similar to a class, but is much more limited. AnID selector can only be applied once in a document.

#specialOffer {font-family: gadget, serif; font-size:40;}

To call an ID selector:

<P CLASS="small" ID="specialOffer">

Due to their one-time-only use, ID selectors are rarely used.The only reason we’ve used them is for pure organization: It’shelpful to have all your style information in a single place onyour page. It keeps you from hunting all over your page lookingfor a single style.

RECAP

Congratulate yourself for making it here—that’s a lot of learningin a few pages. You now know how to create layers in stylesheetsand position them where you want to on the page, as well as layerthem in the order you want. You also know how to modify HTMLtags so text is displayed according to your design desires.



ADVANCED PROJECTS

Create a funky, swirling background in Photoshop (read ourbook, Essential Photoshop 5 for Web Professionals, if you don’t knowhow). Then add some images of people to your background andhave some of them overlap each other. Then chop the images upand use stylesheets to place these images on a Web page. Thechallenge is to create a Web page that looks exactly like yourPhotoshop document. Use precisely positioned layers to makeeverything match up.

Documents

chapter 1 Stylesheet Fundamentals - Pearson Education• Adding Style to Elements • Classes • Recap • Advanced Projects The Big Projects We’re going to learn Cascading Style