Collected by
Elizabeth Janson
Home Page

Element Selectors

  The selector is the link between the HTML document and the style sheet.

The DIV Element

The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different classes of containers, such as a chapter, abstract, or note. For example:

<DIV CLASS=see>
<H1>Divisions</H1>
<P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P>
<P>Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as this note.</P>
<P>The closing tag is required.</P>
</DIV>

Divisions

The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.

Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as this note.

The closing tag is required.

Starting this paragraph as a DIV adjacent to the previous one, you can see how the background is handled.


This time I have placed two <BR> tags before the </DIV> close of the previous paragraph, and another to open this paragraph, you can see how the background is now 'seamless'. Problem is still the space using <P> caused, solved by removing it.

Appearance appears to depend which tags you want to use, as this paragraph is enclosed in <P> and </P> tags. This topic of space, or margins, was started on the page about boxes, has a page to itself, and then spreads to space surrounding lists

The SPAN Element

I have used the script 
<STYLE TYPE="text/css">
<!--
.html { color: red;}
-->
</STYLE>
to colour the tag words, using <strong class=html>SPAN</strong>.SPAN.

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes.

SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled.

Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
  .firstwords { font-variant: small-caps; color=red; background=pink }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN> of a
paragraph could be in small-caps. Style may also be inlined, 
such as changing the style of a word like 
<SPAN STYLE="color: lime; background-color: black; font-family: Arial">
Arial.</SPAN></P>

The first few words of a paragraph could be in small-caps. Style may also be inlined, such as changing the style of a word like Arial.

Email
CSS begins here
Back to CLASS selectors or on to Pseudo classes

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.