Quick Reference to HTML coding

Index to HTML and CSS design.

Biega Home Page
Index to lots of useful information.


use sponsor request

Class selector  ID selector  Colors   Alignment  Fonts   Precedence   Test yourself

CASCADING STYLE SHEETS - HOW TO USE.

Part 2 - ID and Class - Text Properties

As shown in Part 1, Cascading Style Sheets make design of web sites much easier and reduce the amount of coding required on each page.
Style sheets allow much greater control over the appearance of web pages than was possible with HTML tags alone. However, although the first CSS specifications were released prior to the year 2000, existing Browsers (Netscape, Mozilla, Microsoft Explorer, etc.) implemented them poorly. The most recent Recommendations by the International Standards Group W3C - CSS2.1 (2011)- are now implemented by most Browsers.
This Guide uses only elements that are widely implemented by all Browsers.

Unfortunately, not all Browsers interpret Styles the same way. Microsoft Internet Explorer is notorious for its disregard of widely accepted standards. Some of the worst errors have been corrected in IE v.8 (2011). Those of you who have access to both Explorer and some other Browser (such as Opera or Firefox) can compare how Part 1 appears in each Browser and see the differences.

CLASS

The Selector modifier Class gives you the capabilty to assign different styles to the same Element at different times. Each Class is specified with Period . in front of its name (the name may not start with a numeral). The following example will clarify this:
Let's suppose you wish to have the ability to assign different colors to various elements.
    Specify some Classes, thus:
      .green {color:green;}
      .fuchsia {color:fuchsia;}
Incorporate these in the Style sheet section of your HTML write-up:
<html> <head>
<title>Sample document with colors</title>
<style type="text/css">
.green {color:green;}
.fuchsia {color:fuchsia;}
</style>
</head> <body>
<h1 class="fuchsia">DIFFERENT COLOR FONTS</h1>
<p class="green">This paragraph has green text.</p> <p class="fuchsia">This paragraph has fuchsia text.</p> <p>This paragraph has basic black text.</p> .</p>
</body></html>
This is the resulting web page:

DIFFERENT COLOR FONTS

This paragraph has green text.

This paragraph has fuchsia text.

This paragraph has navy text. No Class assigned, therefore the default applies.

ID

The Selector modifier ID is similiar to Class, but is used only for unique cases, and each ID Selector can only be used once on a page.. Each ID selector is defined with a "#" in front of its name (the name may not start with a numeral).
For example the first paragraph on this page started with <p ID="intro">, and the Style sheet would specify:
#intro {
text-align : center;
color : navy;
font : italic bold 110% Verdana, sans-serif;

}
Look at the first paragraph on this page to see the result.

TEXT AND BACKGROUND COLOR

Note that the property color, used in many elements, specifies foreground color, which usually also includes the text color, so that a separate text color specification is not required, unless you want a different color for a specific Element.
Colors are usually specified by their hexadecimal color values. Hexadecimal color is specified with: #rrggbb, where the rr (red), gg (green) and bb (blue) hexadecimal integers specify the components of the color. All values must be between 0 and ff.
For example, the #ff0000 value is rendered as red, because the red component is set to its highest value (ff) and all the others are set to 0. Go to article color codes for complete details and color charts.
However all Browsers recognize certain colors by name, these names are:
aqua - black - blue - fuchsia - grey - green - lime - maroon - navy - olive - purple - red - silver - teal - white - yellow.
NOTE: Make sure you specify a font-color that contrasts with the background. Silver, white or yellow on the default white background will not be readable! Likewise black on blue or navy backgrounds is difficult to read.

TEXT ALIGNMENT

The alignment of text on the page is a complex subject. It is a major problem because all Microsoft Internet Explorer versions prior to v.8 used their own alignment procedures many of which did not agree with recognized international standards. Here only the most important alignment properties will be discussed.

In all Browsers left alignment of text is the default. However, it is often desired for part of the text to be centered on the page. This is accomplished with the statement within an element such as a header or a paragraph as follows:
h1
{
text-align:center;

}

With standard left-aligned text, the left and right edges run up against page borders, or other insertions. To achieve some separation, use margins, thus:
p { margin-left:10px; margin-right:10px; }
A very useful Element is division, which allows a group of elements such as heading and paragraphs to be lumped together and given uniform color, fonts, alignment, etc. Example:
div {text-align:center; color:green;}.

FONT PROPERTIES

In Style sheets you have the capability to define many properties of the font used in any element of your document. The default font properties of your Browser (which vary considerably) will rule if you do not specify them. The font is usually specified seperately for each Element, For example:
h1
{
font-size:140%;
}

    Font properties are specified in the following order (possible values listed within brackets):
  1. font-style (normal - italic, - oblique)
  2. font-variant (normal (default value) - small caps)
  3. font-weight (normal - lighter - bold)
  4. font-size (may be specified in percentage of default size 110% - in pixels, for example 12px - in em which is width of letter m of the default font - with words, such as small, normal, larger
  5. font-family (Times, serif (the usual default value) - Arial, sans-serif - Courier, monospace) NOTE that a common name and generic type are both given, separated by a comma.
To save space, it is usual to write all the font properties on one line. They must be in the order shown above, for example:
    font : italic bold 110% Verdana, sans-serif;
This was the specification for the font in the first paragraph of this article. You do not have to specify all the properties, but they must be in the required order, NOTE that there are no commas between properties, only the font-family property the specific and generic names are separated by commas. If the names consist of more than word, they must be placed within quotation marks, for example "Times New Roman".

PRECEDENCE OF DIFFERENT STYLES

The later a Style is listed on the HTML page. the higher precedence it has.
    Styles will "cascade" by the following rules, where number four has the highest priority:
  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the "head"of the HTML, but after the link, if any, to the External style)
  4. Inline style ("span style" inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or the default value of the Browser.
Only that property that is specifically specified in the last Style statement changes, all others remain as specified earlier, in reverse order of precedence.
For example, the default text-color in your Browser is probably black.
In the table in the Class paragraph above, the Table style sheet had specified <text-color:navy>, however <p class="green"> and <p class="fuchsia"> were the specific properties assigned to two paragraphs. The third paragraph was specified plain <p>, consequently the default Table text color resulted.

TESTING AND EXPERIMENTING

A sample page design with incorporated Style Sheet may be downloaded to your computer. Use this to experiment and test your knowledge. Download this file (csstest1.html) from the Internet to your computer and follow the instructions included with it.

NOTE: There are many more values and properties available, but the purpose of this article is to give you a quick introduction with only the most commonly used properties and values, those that are recognized by all current Browsers, and even older versions of Firefox, Opera, Safari and, with some minor exceptions, by Microsoft IE older versions.
For a complete reference to all CSS specifications, go to W3schools.com

Continue to Part 3 of the Quick Guide to CSS.
Return to Part 1 of the Quick Guide to CSS.


Return to top of page.
Go to Quick Reference to HTML.