Style Sheets Guide
=Selector Shorthand Notations=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Selector Grouping
[IE3B1 | N4B2 ]
Multiple Selectors can be addressed in a
single style declaration by separating them with commas.
- Example:
- H1, H2, H3
{ font-family: helvetica }
Contextual Selectors
[IE3B1 | N4B2 ]
HTML elements are nestable, and there are situations where you will want to apply styles
in only some element nesting contexts. Contextual Selectors make this possible. By using
a space separated list of Selectors (tags, Pseudo-Elements, Pseudo-Classes, Classes or
IDs), a search pattern is established. Nesting order is established with the left-most
Selector being the highest level parent element. The Selector on the right-hand side
is the element the property will apply to. Keep in mind that any valid Selector type is valid
to use (even the other shorthand ones listed here.)
- Examples:
- Apply a red font color to only those emphasized elements in level 1 Headings:
- h1 em
{ color: red }
- Apply an image background and font size to all Keyboard sections in Division Class 'special':
- div.special kbd
{ background: url(image.gif);
font-size: large }
- Use strikethrough text on list items with at least two Unordered List structure ancestors
- ul ul li
{ text-decoration: line-through }
Class Selectors
[IE3B1 | N4B2 ]
CLASS is a new HTML tag attribute that can be applied to any tag for use in
External and Document
Level Style Sheets. Classes establish grouping schemes for identifying HTML tags within a
Style Sheet. Different HTML tag types can share the same Class Name value - this
allows an entire class to be identified by a common label.
[To see more about how these attributes are specified within HTML tags, see the
pages on DIV and SPAN]
- Usage:
- A CLASS attribute may be used to reference either all tags or only selective tags within the
Class. A period (".") is used in the Selector to identify what follows as a Class Name.
If the author wishes to address a specific element within the Class, use as a Selector the element
joined to the Class Name by a period (ex: 'H1.classname'.) To specify ALL elements
in the class, use only the Class Name with a leading period as a Selector(ex: '.classname'.)
- Examples:
- All tags in CLASS 'redtags':
.redtags
{ color: red }
- Heading Level 1 tags in CLASS 'redtags':
H1.redtags
{ color: red }
ID Selectors
[IE3B1 | N4B2 ]
ID is another new HTML tag attribute that can be applied to any tag using
External and Document
Level Style Sheets. It is an alphanumeric string used to
give a single tag a distinct identifying label. Two tags may not share the same unique ID.
[To see more about how these attributes are specified within HTML tags, see the
pages on DIV and SPAN]
- Usage:
- To address a specific singular tag, use its distinct ID#. When using
it as a Selector, the ID label must be preceded by the '#' sign (ex:
'#foobar1'). Using the ID is all that is necessary to identify a single
tag instance, so the HTML tag name is omitted.
- Example:
- The specific STRONG tag with ID: 'abc123':
#abc123 {
font-size: x-large }
Boring Copyright Stuff....