WWW programming

WWW programming

Lesson 5

Basic styles, stylesheets, spans,

div and layering

Basic Styles

3 ways to apply styles:

1. Within a basic HTML tag

2. As part of the heading section <head>

3. In an external file called stylesheet

<html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style>

</head> <body> <h1>Simple Stylesheet</h1>

<p>The first paragraph is unchanged</P>

<p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p>

<p>And the last paragraph is unchanged again</P> </body></html>

Changing the style for <h1> in the whole

document

Basic Styles

RECAP from

lesson 4






Changing the style for one paragraph

only

Basic Styles

RECAP from

lesson 4






The Resulting web page

RECAP from

lesson 4

Style Rules

A rule have two parts: a selector and a set of declarations:

body {

background-color: 000255;

}

h1 {

color: #eeebd2;

background-color: #d8a29b;

font-family: “Book Antiqua”, Times, serif;

border: thing groove #9baab2;

}

ClassesYou can use classes create your own formatting,

that you can call later:

<html> <head> <title>The Unofficial LR CC Website - Promo Page 1</title> <style>

h1.myway{ color: “#eeebd2”;

background-color: “#d8a29b”; font-family: “Book Antiqua”, Times, serif;

border: thin groove #9baab2; } </style> </head>

<body><h1 class=myway> This is a heading formatted my way</h1><h1>This is an unformatted heading</h1>

</body></html>

The resulting web page

The style sheet (an example)

body { background-color: "#eeebd2";

margin: 5px 5px 5px 5px; }

h1{ color: "#eeebd2"; background-color: "#d8a29b"; font-family: “Book Antiqua”, Times, serif; border: thin groove #9baab2; }

h2{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; border: thin groove #8b007c; }

h3{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; }

The style sheet (more..)

em{font-weight: bold;

font-style: italic }

hr{margin-right=10%;margin-left=10%;

}

p.link{ color: "#8b007c";

text-align=Left; font-family: “Lucida Casual”, Times, serif;

font-weight: bold;font-size: 10pt;margin-left: 0%;

}

p{text-align=justify;

font-family: “Bookman Old Style”, Times, serif;margin-left: 10%;

}

strong{font-family: Arial, sans-serif;font-size: 12pt;color: red;

}

th{ background-color: "#b2a474";

color: "#b8007c";align=center;

}

table{padding: 2pt 2pt 2pt 2pt;

}

td.firstcol{ background-color: "#00acac";

font-weight: bold;align=center;

}table.main{

padding: 0px 0px 0px 0px; }

The style sheet (more..)

Notice : no headings body or other tags

Using the Stylesheet

<html> <head> <title>Bill Smiggens Inc</title>

<link rel=StyleSheet href="./Stylesheet.htm" type="text/css" media=screen>

</head> <body bgcolor="#ffffff" text="#362e00"> <! -- start of table -->

<table class=main> <tr> <! -- the logo --> <td colspan=2 align="center" bgcolor="#000000"> <img src="hammer.jpg"ALIGN=RIGHT HSPACE=1 VSPACE=0

BORDER=1 WIDTH=750 HEIGHT=50 ALT="Bill Smiggen's hammer image"></td>

</tr>

Links the stylesheet

Will use the respective formatting from the stylesheet

Using the Stylesheet<tr> <td bgcolor="#7cb98b" with="20%" valign="top">

<! -- and then the links -->

<h2 align="center">links</h2> <hr with="50%">

<h3>

<p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">

<a href="http://www.yahoo.com">Yahoo</a></p>


<a href="http://www.lrc.edu">Lenior-Ryhne</a></p>


<a href="http://www.google.com">Google</a></p>


<a href="http://www.cnn.com">CNN</a></p>


Using the Stylesheet <br><hr with=50%"><br>

</h3></td>

<td with="70%"><! -- The information -->

<h2>About our company</h2><p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>

<hr><h3>More about our company</h3><p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla


<hr with="50%"></td>

</tr> </table> </body></html>


The resulting Page

Using the style formats

h1{ color: "#eeebd2"; background-color: "#d8a29b"; font-family: “Book Antiqua”, Times, serif; border: thin groove #9baab2; }

h2.some{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; border: thin groove #8b007c; }

.anyelement{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; }

Applies to all h1 headings

Applies only when the class is called by an h2 tag

Can be called by any element tag (h1, h2, h3, p etc)

Divisions

To format a section using a class you can use divisions:

<div class=anyelement><h2>About our company</h2><p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla




</div>

Span

To format a section using a class you can also use spans:

<h2><span class=anyelement>About</span> our company</h2><p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla




</div>

NOTE: The use of span should be limited to DHTML documents in general, and normally should be used very carefully, as it takes away brower control and

makes it hard to maintain or change formatting

Layering text<html> <head> <title>layering</title> </head> <body>

<h1>layering text</h1><div style="z-index: 2; left: 50px; top: 250px;position: absolute; color: red; text: white;font-size:36pt; border: thin groove;"><p>The TOP TEXT</p></div>

<div style="z-index: 1; left: 100px; top: 225px;position: absolute; color: magneta; background-color: green; font-size:46pt; border: thin groove;"><p>Additional text</p></div>

<div style="z-index: 4; left: 10; top: 30px; width: 150px;position: absolute; color: black; background-color: yellow;text: white; font-size:18pt;"><p>Text that does not go right across the screen.</p></div>

</body></html>

The resulting web page

In-class discussion

Why use stylesheets?

How can stylesheets be used by large projects?

How can you “enforce” the use of certain fonts or layout?

When is layering text useful?

WWW programming

Documents

Transcript of WWW programming