Collected by
Elizabeth Janson
Home Page

Elements as Selectors

  The selector is the link between the HTML document and the style sheet. Style sheet selectors are the code that preceeds the bracketed definitions. This introduction avoids selectors which have names that are not HTML elements. We are talking about the way the rule is identified in the Style Sheet and then in the HTML listing.

Block elements

Block elements do have line breaks. They may occur in other block elements, and may contain both block and inline elements, but cannot occur in inline elements.
I am taking my lists from HTML4. Go here for more on depreciating elements or here to review familiar elements.

Block elements you can define are:
  • BLOCKQUOTE 
  • TABLE
  • FORM
  • FIELDSET
  • ADDRESS
  • NOSCRIPT 
  • PRE
  • DIV
  • SPAN
  • P
  • UL 
  • OL
  • DL
  • H1 
  • H2
  • H3
  • H4
  • H5
  • H6
  • HR
  • INS 
  • DEL

Inline elements

Inline elements do not have line breaks (are ended by the line break). Can occur in block elements or other inline elements, cannot contain block elements.
I am taking my lists from HTML4

Inline elements you can define are:
  • STRONG 
  • EM
  • BIG
  • SMALL
  • BR
  • SPAN 
  • SUB
  • SUP
  • TT
  • IMG
  • I
  • B
  • A
  • ACRONYM
  • TEXTAREA 
  • DFN
  • CODE 
  • SAMP
  • KBD
  • CITE
  • SCRIPT
  • LABEL
  • BUTTON 
  • INPUT
  • SELECT
also new terms to learn - ABBR, OBJECT, VAR, MAP, Q, BDO, (INS, DEL).

Selector

A selector is a string that identifies what elements the corresponding rule applies to. A selector can either be a simple selector (e.g. 'H1'), a contextual selector (e.g. 'H1 B') which consists of several simple selectors divided by white space, or a grouped selector (eg 'H1, H2) where the simple selectors are divided by commas.

Simple selector

A selector that matches elements based on the element type and/or attributes, and not the element's position in the document structure, is a simple selector.

Contextual selectors

Contextual selectors consist of several simple selectors separated by whitespace. Contextual selectors omit the comma separator and are a lot like conditional statements - the style declarations that follow them are invoked only when certain conditions are met. For example, suppose you'd like all bold italic text in your document to appear in blue Arial.
B { color: blue }
I { color: red }
B I { color: green}
In the example above, the search pattern matches if 'I' is a descendant of 'B',
i.e. if 'I' is inside an 'B' element.

Your contextual selector could look like this:

<HEAD>
<STYLE TYPE="text/css">
B I {color: green; font-family: Arial}
/* this selector is for all bold+italic text */
</STYLE>
</HEAD>
<B>I am Bold</B>, <I>I am Italic</I>,
<B><I>Go on, try it yourself.
Do I look like I'm lying?</I></B>
I am Bold, I am Italic, Go on, try it yourself. Do I look like I'm lying?

Grouping

To reduce the size of style sheets, one can group selectors in comma-separated lists:
H1, H2, H3 { font-family: helvetica }
or combining contextual and grouping,
H1 B, H2 B, H1 EM, H2 EM { color: red }
Which is equivalent to:

H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
Warning : the equivalence is true in this example because all selectors are valid selectors. If one (or more) of these selectors is invalid, the group made of the four selectors is itself invalid, invalidating the rule; then the equivalence is false.

You may want the same element (eg H1) to have different styles at different places in a page.

<H1 STYLE= {background-color:pink}> With the above, the heading</H1> now has a pink background.</P>

With the above, the heading

now has a pink background.

Check if this change will carry forward, by using <H1>Inheritance</H1>

Inheritance

Answer is NO, because the closing tag </H1> ended the style of the H1 element.
It is VERY important that all container tags be CLOSED.

Email
CSS begins here

Back to introduction, or on to Id selectors.

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.