Post on 06-Jan-2016
description
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
<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 one paragraph
only
Basic Styles
RECAP from
lesson 4
<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>
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>
<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.lrc.edu">Lenior-Ryhne</a></p>
<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.google.com">Google</a></p>
<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.cnn.com">CNN</a></p>
Will use the respective formatting from the stylesheet
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
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 with="50%"></td>
</tr> </table> </body></html>
Will use the respective formatting from the stylesheet
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
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
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>
</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
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
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>
</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?