Week 2

Links for Week 2

Basic Cascading Style Sheets (CSS1)

Introduction

HTML tags only allow web page designers very rough control over the look and feel of a page. This leads to static pages that are indistinguishable from other web pages. It also requires that the person writing the page have a knowledge of HTML and the design plans for the entire site. Cascading Style Sheets (CSS) allow the web designer to set down specific design aspects and attach them to the standard HTML tags. At this site bold is always in red, so when the person writing a page places text in bold, the style sheet automatically tells the browser this should be in red. In this case the background color and text color is also set by the style sheet. To see the style sheet click here .

Style Rules

Style rules are created either in a style tag (<STYLE TYPE="text/css><!-- style rules --> </STYLE>) in the head section of a web page or in an external css file. You may have any number of style tags in a given head section. If you have clicked in the head of a page Red Edit will check to see if you are within a given style tag, if so it will put any new styles in this section. If you are in the head and not in a style (or if a style tag does not exist), Red Edit creates a new style tag for your new rules.

Style rules are composed of two parts:

The following sample will tell a browser to display the text in any H1 header as green. 

H1 {color: green}

In addition to standard HTML tags you can set the properties for nested tags. For example if you are creating a web page with c++ code, you may specify that all your c++ code will in a PRE style. If you want your comments to be in green italic, you can set the following style:

PRE I {color: green}

Italic text outside a PRE tag will not be green, but within a PRE tag it will be green.

In addition to selectors based on HTML tags, you can create style rules that use the id of an HTML tag or have a style name. The following is an id definition for the id "inclass"

#inclass {
color: #FF0000;
background: #C0C0C0;
}

When the id of a tag is given the name inClass. If you want an specific H2 to have the inClass style you would simply type:

<H2  ID = "inclass">This is an inclass item </H2>

The result will look like:

This is an inclass item.

The following is an example of a class attribute.

.classattribute {
color: #80FF00;
background: #000000;
font-family: cursive;
font-weight: extra-bold;
font-size: 16pt;

To use this rule on a paragraph use the following:

<P CLASS = "classattribute">This uses class attribute</P>

The result of the attribute setting.

This uses class attribute

It is better to declare class attributes than to use id attributes since a class attribute can be applied as often as you want in a document, but IDs should be unique. (You can get away with things but shouldn't try).

In Class 3

Learn to use Red Edit to create styles. Click here for a complete description.

Positioning

Precise positioning of elements (including overlapping items) is covered in the W3C reommendation commonly called CSS-Positioning (CSS-P). Both Netscape 4 and Internet Explorer 4 (and 5) have implemented a form of CSS-P. Originally, Netscape had provided a tag <Layer> which was supposed to be used to position items, while Internet Explorer intended to use frames. Currently both browsers recommend that the tags DIV and SPAN be used to position items. As long as you are statically positioning items your pages will be viewable in both browsers. Problems occur when you use JavaScripts to position items. This will be discussed later.

The DIV and SPAN Tags

The DIV and SPAN tags have no inherent styles associated with them. DIV is a block level element that displays the material contained in it in its own line. SPAN is an in-line equivalent of DIV that can be used to format information contained in a line. This is an example where SPAN is used to format this section of a sentence. The code for the section within the span follows.

<SPAN  STYLE = "color: #FFFF00;
background: #000080;
">SPAN is used to format this section</SPAN>

It is possible to define styles locally, and from time to time in examples you will see this, but it is always better to define a style as a class or id.

While it is posible to add borders and position a SPAN item, it is not recommended since SPAN is suppose to create in-line styles. On the other hand, DIV is meant for setting a block off from the rest of the page. The following is a block that uses positioning to place items over the main picture.

This is Big

Closed This Sunday - Wednesday

The code for uses three DIV tags and relative positions to create the image at the right

<DIV  STYLE = "position: relative;
width: 280px;
top: 0;
z-index: -1;
left: 0;
border-style:groove; border-width:5px; border-color: #0000FF;
">
<IMG SRC = "../Nice5.jpg">  
</DIV>  

<DIV STYLE = "position: relative;
z-index: 1;
left: 30;
top: -350;
color: #FF0000;
"><H2>This is Big</H2> </DIV>
<DIV STYLE = "position: relative;
width: 250px;
left: 20;
top: -300;
color: #0000FF;
font-weight: bold;
background: #C6C6FF;
text-align: center;
">Closed This Sunday - Wednesday</DIV>

Positioning

Positioning is a very powerful tool, but is probably best used when you want to overlap images, fix their size and position at the beginning of a document or in a small document. In addition, once your DIV section is designated as position, you can make the area visible or hidden. This is useful in creating effects like drop down menus, text rollovers and animation.

The example above was created using a combination of relative position and a table. If you use absolute position to create overlapping images, you must know how many pixels from the top of the page to place your main image and each of your overlying items. By using relative position, you only have to know how large the main image is and then move overlapping images and text up the page (the top is a negative number) and to the left to create the desired overlap.

You will also notice that the width was specified in each style. If you were only checking this page in Netscape you would see the page as it appears. If, however, you failed to specify the width, it would look considerably different in Internet Explorer. Copy the code above into a new page (create one with Red Edit and paste the code above into the new page). Try deleting the width from each of the DIV elements and see how the image changes. Try the same page in Netscape. Whenever you use style sheets check your page in every browser you can. If you look at the source code for this page, you will see that the last part of the page is contained in a SPAN element in which the text color is set to black. This is because the divs above hid the BODY style from the rest of this document in Netscape.

In Class 4

Click here to go to In Class 4.