Selectors and Classes


The Need for More Than HTML Commands as Selectors.

CSS rules consist of style difintions, that is, properites and values
applied to existing HTML commands. An example is:

p {font: 14pt verdana: color: red;}

With this rule all <p> tags in the source code will result in
only one type of text style as defined by the p rule.
However, web pages often need more then one type of text style
and therefore will need more HTML selectors to create other text
style rules. For example the h1 - h7 commands can also be used to
define text style.

h1 {font: 11pt new roman times: color: blue;}

Also the body command can define a text style on the web page.
The following is a list of most of the HTML commands that can be used
as a means to define text style in a web document.

body, p, h1 - h7, ul, ol, li, table, td

Inline and Block Selectors.

Notice that of the selectors listed that some of them are block
commands. Block commands simply mean that after the text they effect
there will be a double-spacing effect to start the next paragraph
two lines down. The block selectors are: p, h1 - h7, ol, and ul.

The body, li, table and td selectors are inline, meaning that after effecting
the text they break only to the next line and therefore do not create
a new paragraph.

Class Selectors

Webmasters may not want to use all the reserved HTML commands
for new style rules. They may want these commands to be use for their
intended uses and instead design rules using created selectors called
classes.

Class rules start with a period, and have a name choosen that resembles their use.
For example, to create a class selector for small red text a webmaster could
write a class selector that distinguishes itself from HTML command selectors as:

.smred {font 10px arial: color: red;}

This is a new rule applied to a selector created by the webmaster for a
specific use; to style small red text. It's name smred is descriptive of its
function but not required. It could be called any name and still work.

Writing Code for a Class Selector

To apply the rule to the source code a <div> or <span> tag is used.
A <div> command is suppose to be a block selector and the <span> command
is an inline selector.

<div class="smred">This will be small red arial text in the browser</div>    OR,
<span class="smred">This will be small red arial text in the browser</span>



In this example the following red text was defined by this class selector rule:

.smred {font: bold 10px arial: color: red; letter-spacing: 2px; }
and written in the HTML code as <span class="smred">Four score and ....</span>

Four score and seven years ago our fathers brought forth on this continent,
a new nation, conceived in Liberty, and dedicated to the proposition that all
men are created equal.




In this example the following gray text is defined by this class selector rule:

.comic-sans {font: 12px/16pt "comic sans ms"; color: gray; text-transform: uppercase;
  word-spacing: 3px; letter-spacing: 1px;}
and written in the HTML code as <span class="comic-sans">Four score and...</span 

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.


The background for the above boxes has the following background properties:

{background-color: rgb(255,208,98); background-image: url('bg-3.gif');
  background-repeat: repeat-x;}



To Top