SSI lets you reference an external element in multiple web pages, so that you can simply update the element rather than having to update all the web pages individually. Or you can include an element that is contstantly changing (current time or temperature)
An SSI is delimited by HTML comment characters, begins with a # character, and must be kept on a single line. The terminating comment characters --> must be preceded by a space. Here's a specified include of an external HTML fragment:
<HTML><HEAD><TITLE>SSI Demo</TITLE></HEAD>
<BODY>
<--#include virtual="whats_new.html" -->
...page contents...
</BODY></HTML>
This page must have a filename extension such as .shtml which tells the server to parse in the HTML fragment in whats_new.html:
<IMG SRC="new_header.gif">Here's the latest update...
The fragment does not include <HEAD> or <BODY> tags, which would be redundant in the composited page.
As defined by W3C, HTML 4 now deprecates (disapproves of) a lot of familiar tags and attributes in favor of style sheets, and future browsers will include full implementations of styles. (Current browsers aren't fully style-compliant, so you don't need to sweat styles much yet.) In theory at least, style sheets offer better layout control and easier site maintenance. The basic idea is to separate style from content. All your web pages can reference one external style sheet, so you could spruce up all your web pages by re-doing just the style sheet they reference.
Since style sheets define rules for tags like <P> and <LI>, you should get in the habit of including closing tags for these so the styles terminate when appropriate.
Style sheet rules have a fairly straightforward syntax: selector { property: value }, e.g.,
H1 { color: red; font-face: Arial, sans-serif }
P { color: black; font-face: Times New Roman; font-size:
12pt }
Here the biggest headlines are in a red Arial font while paragraphs are 12pt. Times New Roman. Note that you can combine multiple property:value specifications in a single rule, separated by semi-colons.
The "cascading" refers to a hierarchy: your page can reference global styles in a separate document, include page-specific styles in its <HEAD> section, and use local styles in-line. Local styles override page-specific styles, which override referenced global styles.
Local in-line styles override higher-level styles, although specifying styles for each paragraph kind of defeats their purpose:
<P STYLE="color: black; font-face: Verdana, sans-serif">"Oh no!" she gasped...
It makes more sense to put a block of styles in the <HEAD> section defining standard behaviors for particular tags, and just include the tags in the <BODY> section.
<HTML><HEAD>
<STYLE TYPE="text/css">
<!--
H1, H2, H3 { color: red; font-face: Arial, sans-serif
}
P {font-size: 12pt; font-face: Times New Roman,
serif }
-->
</STYLE></HEAD>
Note that you can group selectors in comma-separated lists.
Alternately, you can create an external style sheet with a .css filename extension, and link to it from one or more HTML documents. The <LINK> tag is included in the <HEAD> of the HTML document:
<HEAD>
<LINK REL="STYLESHEET" HREF="master_styles.css" TYPE="text/css">
</HEAD>
You can only link to a single style sheet from a document. An alternative is to import a style sheet, but only IE4 currently supports multiple style imports.
The <DIV> and <SPAN> tags are special HTML tags designed for styles. They have no pre-defined properties. <DIV> is a block-level tag that can contain other block-level or in-line elements.
<DIV STYLE="color: #CC0000"><H2>Wow, that hurts!</H2></DIV>
<SPAN> is an in-line tag:
You'll <SPAN STYLE="font-style: italic">love</SPAN> it!
You can defined contextual selectors, such as a special style and color for emphasized text in a list item:
LI EM { color: red; font-style: italic }
Note the lack of comma between LI and EM. You define multiple contextual selectors, separated by commas, in a single style definition:
H1 I, H2 I, H3 I { color: blue }
Styles can be inherited by "child" elements from their "parent"
elements. For example, styles defined for the <BODY>
tag will apply to everything within the BODY unless overridden
by another style applied to a specific element.
As noted previously, you can define classes of elements. Class names begin with a period:
H1.crisis { color: red }
H1.normal {color: black }
P.greybox { background-color: #333333 }
and then distinguish styles with a CLASS attribute:
<H1 STYLE="crisis">Broken drill!</H1>
<H1 STYLE="normal">Patient slow to revive</H1>
<P STYLE="greybox">Upon reviving, the patient...
Or you can define a generic class (remember the leading period):
.crisis { color: red }
and use this with different elements:
<H1 STYLE="crisis">Broken drill!</H1>
She revived slowly...<I CLASS="crisis">"Aaaagh!"</I>
CSS includes some "pseudo-classes" which can used with the anchor <A> tag:
A:link { color: blue }
A:visited { color: black }
A:active { color: red }
These are equivalent to link color specifications in the <BODY>
tag.
To turn off link underlining, create a style sheet rule for the <A>
tag in curly brackets:
A { text-decoration: none }
To turn off underlining only for specific links, create an <A> tag class:
A.nounderline { text-decoration: none }
and reference this class in the link tag:
<A CLASS="nounderline" HREF="http://www.psycho.com/mad_dog">
CSS also includes some useful "pseudo-elements" that can take unique styles, e.g.
P.first-line {font-weight: bolder }
which bolds just the first line of a paragraph, or
P.opener.first-letter { font-size: 250%; font-style: italic }
which makes the first letter of the first line extra large and italic.
The preceding style examples reference properties defined in W3C's
first CSS specification. CSS2 was released in May, 1998. Note
that browser support for these styles will be spotty for some time.
Here's a quick summary of some basic CSS properties:
|
font-family: Times|Helvetica|...
|
CSS treats page elements (paragraphs, images...) like boxes, so you can define various width, padding, border and margin styles for different elements.
CSS provides much better typesetting and positioning controls, including element overlapping.
There's lot more, but you can obviously see W3C's intent to replace
a lot of conventional tags and attributes with styles. Don't panic,
styles are still emerging, and the old standard tags they're trying to
replace will work fine for some time to come.