FONT tag added greater control over the appearance of a document. The designer can specify the details of the font used in the page.
Font information can be embedded in a web page. Use of this has been rare up to now, but Bitstream now supports both Navigator and IE on Windows (Navigator only on the Macintosh) so time will tell.
Big problem is that the FONT tag does not span table cells.
All my pages have looked like they were written back in 1994, so hopefully they should still display on ancient browsers. However, the net result is they are a little dull. However I can easily change this, without embedding any display specific information into the HTML page using Cascading Stylesheets.
A broad term used to refer to several methods of applying style elements to HTML pages. A stylesheet cascades when there is an order of importance that a browser can apply to multiple stylesheets. The order from lowest to highest importance
Style sheets separate style (CSS1) and layout (CSS2) from the structure of content (HTML). Using linked stylesheets the look of an entire site can be changed by changing a single file.
Style rules specify how to display HTML elements and rules can be grouped together to make a stylesheet. A HTML page can be influenced by one or more stylesheets. The resolution of conflicts is a key element of the CSS specification, based on each style rule having a weight. In general the most specific style wins.
A stylesheet can combine several stylesheets to reduce redundancy. A particular style will be inherited by other influenced aspects of the HTML page, e.g. if you set the text colour of a paragraph, all tags in that paragraph will inherit the text colour.
Readers and authors can influence the presentation of documents.
The huge advantage of CSS is the removal of hard coding (FONT tags) making pages compatible with any browser.
A rule consists of two parts, a selector and a declaration. The declaration has two parts a property and a value.
H1 { color: red; }
P { font: 12pt verdana; }
All HTML tags are potential selectors.
Selectors can be grouped to save space
H1, H2, H3 { font-family: Helvetica; }
H1 { color: blue; font-size: 14pt; }
The is a way of breaking down style rules into very precise pieces, i.e. almost a custom built HTML tag.
H1.loud {color: lime; font: 24pt verdana; }
H1.soft {color: blue; font: 14pt arial; }
.loud {color: yellow; font-family: geneva;
font-size: 14pt; }
In the HTML
<H1 class="loud">Look at me!</H1> <H1 class="soft">Not me!</H1>
Using inheritance just list the differences, e.g. <EM> text in a <H1> as bold blue
H1 EM { color: blue; font-style: bold; }
Used for even finer control. Pseudo-elements are used to address sub-parts of elements, and pseudo-classes address different element types, e.g. different types of Anchors.
A:link { color: red; }
A:visited { color: blue; }
A:active { color: yellow; }
Four ways
Using the STYLE attribute to a HTML tag mixes style with content and loses the advantages of style sheets - it is supported but discouraged.
<P STYLE="font-size: 18pt"> This paragraph is in 18-point text. </P>
Insert a style sheet at the top of each page. This will ensure that different elements of the document will all look the same throughout the page.
<HEAD>
<TITLE>Style Element Example fonts</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: blue; font: 18pt Arial bold }
P { color: green;
font-size: 12pt;
font-family: Arial, Geneva, sans-serif;
text-indent: 0.5in }
A { text-decoration: none; color: red }
-->
</STYLE>
</HEAD>
The real power of style sheets comes when you link to an external file. The file contains the same rules as the STYLE block at the top of a page.
BODY { background: white; color: brown }
H1 { font: 18pt Arial bold }
P { font: 12pt Arial; text-indent: 0.5in }
A:link { color: red }
A:visited { color: blue }
A:active { color: yellow }
Place these rules in a file style.css. To link a page to this style sheet
<LINK TITLE="new" REL=stylesheet
HREF="style.css" TYPE="text/css">
In the LINK element the REL attribute defines the type of link. The REL=stylesheet is the key, it links the current page to the referenced file.
Import multiple style sheets with the
@import url(http://www.style.com/cool);
command inside the STYLE element. With the import command, multiple style sheets can affect the same document simultaneously.