This is a short introduction to adding Style to your Web pages. It is intended to provide a taste of programming in the CSS language and how to integrate it with standard HTML. The good news is, with CSS many new and dynamic effects are possible in web documents. The bad news is CSS is essentially an entire new markup language in and of itself.
STYLE is the term used for a group of properties that define how an HTML element or document will appear when viewed in a browser. A Style Sheet (not necessarily a contiguous page or sheet) describes the element's default characteristic set of styles. Style Sheets are normally derived from multiple sources and have a specific order of precedence when the definitions of a style option conflict. Basically, style sheets append style or layout rules to HTML tags by:
Pseudo classes (defined below) may also be used in specific cases.
| Grouping provides for the assignment of a single style declaration to multiple
elements. Example: H3,H4,H5,H6 { margin-left: 2% } This provides a left margin of 2% of the window width to apply to the use of elements H3, H4, H5 and H6. |
|
| Inherited values are values passed from a parent element to a child
element. Child elements are elements enclosed by the start and end tags of the parent. |
|
| Class are used to select data items (objects). A Class is defined by a name
preceded by a dot. It is called using the "STYLE=" attribute. The dot does not
appear in the value of STYLE. Example - style defined: .colorRed { color: red } Example - style used: <P class="colorRed">This text is red.</P> |
|
Class |
Pseudo-classes are fictional element types. In CSS1 only the anchor
element (A) can act as a pseudo-class. Normally 3 types of fictional A
elements are created, the: Unvisited Link, Visited Link, and Active
Link. Pseudo links can be combined with normal classes to choose
different styles for different link sets.
Example - style defined: A:link { background: transparent; color: blue } Example - style defined: A:visited, A:active { background: transparent; color: red } Example - style used: <A HREF="...">title</A> Example - style defined: A.foot:link { background: transparent; color: blue } Example - style used: <A Class=foot HREF="...">title</A> |
| IDs are used to select data items. An ID is a string preceded by a "#" symbol.
It is called using the "ID=" attribute. The "#" does not appear in the value of ID.
Example - style defined: #Item2 { color: red } Example - style used: <P ID="Item2">This text is red.</P> |
|
Context |
Used when styles are to be applied to an element when it is used in a
specific context. They are created and used in a parent-child context. The style
element defined is applied to the child when it appears with its parent.
Example - style defined: H5 EM {color: red } Example - style used: <H5>This </EM>color</EM> is RED </H5> but This </ EM > color </EM> is NOT. |
Pseudo Element Applies only to block level elements |
First-line pseudo-elements allow sub-parting the element's first line
and attaching a specific style exclusively to it. It may be combined with
normal classes.
Example - style defined: P:first-line {color: red } Example - style used: <P>This line is red. The rest aren't. </P> Example - style defined: P.initial:first-line {color: red } {Ex. with class="initial"} |
Pseudo Element Applies only to block level elements |
First-letter pseudo-elements allow sub-parting the element's first
letter and attaching a specific style exclusively to it. It may be
combined with normal classes.
Example - style defined: P:first-letter { font-size: 200%; color: red } Example - style used: <P>This letter is red and twice as large.</P> Example - style defined: P.initial:first-letter {color: red } {Ex. with class="initial"} |
Style definitions may be incorporated in HTML in four ways. These are:
These documents will discuss and provide examples for each of these methods. However, the documents themselves are based upon the first two methods.
As with all languages, CSS has its own "style" or notation. Aside from Class and ID declarations, each style declaration starts with a tag name followed by a list of style properties enclosed in braces. The properties are listed within the braces followed by a colon and the value for the property. Each "property/value" pair is separated by a semi-colon. As an example:
<STYLE type="text/css">
...
BODY {
color: black; background: aqua;
margin-left: 5%; margin-right: 5%;
font-family: Helvetica, "Times New Roman", sans-serif;
}
...
</STYLE>
In this snippet, the STYLE element is used to set (some of) the properties in the documents BODY statement. These are: set the text color to black and the background color to aqua; place 5% (of the window width) margins on either side of all standard text; and use the Helvetica font. It additionally says that if the Helvetica font isn't available, use Times New Roman, or as a last resort if it isn't available, Sans-Serif. This was copied from this document's style sheet. Note that for any items defined in both the Style Sheet and in the document <BODY ...> statement, the Style Sheet values take precedence.
It is seen that names were used for the colors. This is only my habit. Numeric values such as "rbg(255,0,0)" or Hex notation "#FF0000" may also be used. In these notations the numbers refer to the amount of red, green, and blue tint in the color. In decimal notation the number range from 0 - 255, and in Hex from 00 to FF with the latter (255 or FF) being maximum for that color. A more complete discourse on color may be found at Web_Tint.html (when I write it).
A look at the page source also reveals another interesting item in this
example. The Font size, style, and color change was defined in the Style
Sheet in element PRE. This was done because it is anticipated that many such examples
will be used in the document.
i.e. The actual coding uses the tag notation:
<PRE> example code </PRE>Rather than:
<FONT SIZE=-1 COLOR="black"><B> example code </B></FONT>
A lot easier. It is also a good idea to stop using the FONT tag in your HTML pages as it is now considered a deprecated (old - no longer supported) tag.
Three "gotchas" were found in writing this page:
If it is likely that the same styles will be used in several documents an external style sheet should be considered. It can be attached to a document either by Linking a full sheet or by importing additional styles to compliment the ones defined in an internal style sheet.
To use the Link Element, the Style Sheet must be a separate document. Linking is accomplished by including a line of the form:
<LINK REL="stylesheet" HREF="externalStyle.css" TYPE="text/css">
in the header section of the document. The "REL" attribute must be set to "stylesheet" for the sheet to load correctly.
When a document needs "additional style", beyond what is in the document's style sheet, the @import declaration is used. It must be the first declaration in document's Style Sheet. Local declarations will take precedent. It is legal to use multiple @import declarations. In that situation each subsequent declaration over-rides the preceding one when conflicts arise.
<style type="text/css">
@import "anotherStyle1.css";
@import "anotherStyle2.css";
H1 { margin-left: -5%;}
...
</style>
Other CSS & CSS Related pages:
