Another powerful tool that can be used much in the same way as a server side include is Cascading Style Sheets (CSS). CSS permits the separation of content and formatting. All the formatting of fonts, colors and layout are defined in the heading of an HTML document as styles. Throughout the document, sections of text are associated with these styles. In the end, a single change to the header can reformat the whole page, or even an entire site.
Until now, all of the formatting you have done has been line by line. If text was to have a certain font, that font was "started" and "terminated", line by line. Here is an example.
<font size="4" face="Verdana, Arial, Helvetica, sans-serif"><strong>EDUC565
- HTML Essentials</strong></font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Web page
development software has come a long way in the last ten years. It is
now possible to create a web page without knowing anything about HTML.
Unfortunately, the pages created in this manner look like it. Even the
best HTML editor will need a little help once in a while, and that is
why every web author needs to know the basics of HTML.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Here are
the HTML tags that you need to know how to use. The following pages give
examples of each. </font></p>
|
Here is what the HTML would look like
| EDUC565 - HTML Essentials
Web page development software has come a long way in the last ten years. It is now possible to create a web page without knowing anything about HTML.
Unfortunately, the pages created in this manner look like it. Even the best HTML editor will need a little help once in a while, and that is why every web author needs to know the basics of HTML.
Here are the HTML tags that you need to know how to use. The following pages give examples of each. |
Notice each paragraph has font-face, font-size and font-weight (bold, in the case of the first line).
If the font needed to be bigger, each individual line of HTML would have to be modified. But with CSS, all the font definitions can be inserted into the header of the file and one change "cascades" through the the entire document. The "style" section is italized for emphasis in the following example.
<head>
<title>CSS Example</title>
<style type="text/css">
<!--
p.MainHeading {font-size: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
p.MainParagraph {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
-->
</style>
</head>
<body>
<p class="MainHeading">Main Heading</p>
<p class="MainParagraph">Paragraph text.</p>
<p class="MainHeading">EDUC565
- HTML Essentials</p>
<p class="MainParagraph">Web page
development software has come a long way in the last ten years. It is
now possible to create a web page without knowing anything about HTML.
Unfortunately, the pages created in this manner look like it. Even the
best HTML editor will need a little help once in a while, and that is
why every web author needs to know the basics of HTML.</p>
<p><p class="MainParagraph">Here are
the HTML tags that you need to know how to use. The following pages give
examples of each.</p>
</body>
</html>
|
Each line in the body of the page has a style. If the "style" section is modified, all lines on the page automatically reflect the change.
EDUC565 - HTML Essentials
Web page development software has come a long way in the last ten years. It is now possible to create a web page without knowing anything about HTML.
Unfortunately, the pages created in this manner look like it. Even the best HTML editor will need a little help once in a while, and that is why every web author needs to know the basics of HTML.
Here are the HTML tags that you need to know how to use. The following pages give examples of each.
|
Server Side meets CSS
It is possible to use a single CSS file on every page of a web site. A special "link" code is used in the heading of the HTML to designate an external file as a page's CSS.
<link rel="stylesheet" type="text/css"
href="my565StyleSheet.css"> |
If an absolute reference is used, the same exact code can be used on all pages of a web site.
The external stylesheet can be modified, and all pages using the stylesheet are automatically updated. The form of the external stylesheet will be as follows:
@charset "utf-8";
/* CSS Document */
<!--
body {
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
margin-top: 10px;
margin-left: 10px;
}
p.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
}
p.style2 {
font-size: 18pt;
color: orange;
}
a:link {
color: blue;
}
a:visited {
color: blue;
}
a:active {
color: blue;
}
a:hover {
color: light steel blue;
}
-->
|
More references about CSS:
http://www.w3schools.com/Web/web_css.asp
http://www.w3schools.com/css/css_examples.asp
http://www.html.net/tutorials/css/
http://friendlybit.com/css/beginners-guide-to-css-and-standards.
List of colors.
|
