BASIC STRUCTURE of a style sheet is a rule or rules for how particular page elements should be displayed by the viewing browser. The two main parts of a style sheet rule are the selector and the declaration. The selector *selects* the element to be defined and the declaration defines the instructions.In turn, the declaration is made up of two parts, property and value, although it may take several pairs of property and value. Declarations must be enclosed in curly brackets { } and multiple properties must be separated by semi-colons [ ; ]. Different properties take different types of values, such as size or color.
There are three ways to apply style sheets to your pages:
CREATING STYLES is a bit confusing at first but with a bit of practice, gets easier so let's start out with an embedded application. Open your web editor... we're going to type the code for now but many web editors have style sheets assistants. Start a new page with the basic html coding:
- I
NLINE style sheet use is akin to using font tags or other currently in use presentation definitions. Use of inline styles is best used for over-riding higher level embedded or external styles.- E
MBEDDED styles are placed at the head of the page, using the <style> element.- E
XTERNAL style sheets are referenced in one of two ways, linking or import, from multiple documents.
<HTML>
<HEAD>
<TITLE>CSS Example 1</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
The <STYLE> tag must go within the <HEAD> tags. It must also include a type attribute. At present, the only available attribute for type is text/css. Within the style tag, you must next place a comment tag <!-- --> so that non-style reading browsers will ignore the contents and not place the content text visibly on your page. So, with a gap for the style instructions, we now should have:
<HTML>
<HEAD>
<TITLE>CSS Example 1</TITLE>
<STYLE type="text/css">
<!---->
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Next we will add an actual style. First choose a selector, we'll use the <H3> and, since this page is in Arial, we'll give it a font-family of Courier and color it green as well as making it italic. [The standard structure tags have been dropped from the code example]
<STYLE type="text/css">
<!--
h3 {
font-family: Courier;
font-style: italic;
color: green
}
-->
</STYLE>
With the above to look at, we can see some structural requirements. First you name the tag (selector) you are defining. Then, you place a left curly bracket { then you declare the properties and values using a colon : after the property and a semi-colon ; to separate multiple properties. The statement may be written out on one line as:
h3 { font-family: Courier; font-style: italic; color: green } but it makes for easier reading and error checking to stack it as in the example above.Now, add a few <H3> lines to your document:
<HTML>
<HEAD>
<TITLE>CSS Example 1</TITLE>
<STYLE type="text/css">
<!-- h3 {
font-family: Courier;
font-style: italic;
color: green
}
-->
</STYLE>
</HEAD>
<BODY>
<H3>one heading in Courier italic green</H3>
<H3>another heading in Courier italic green</H3>
<H3>and a third heading in Courier italic green</H3>
</BODY>
</HTML>
Now, if you have been lazy, you can cut and paste the above code to a page to view with your browser. If you've done it for yourself, preview or view your work, or cheat and take a look at example1.html. Experiment by changing the property values say from green to red or removing one, font-family for example.
On to more...
| Intro | |
| Getting Started | Context/Cascade |
| Properties & Values | Classes |
| Resources | |
| © MaMaT | htmlhelp.rootsweb.com | Last edited on 14 Nov 1999 |