If you have read the introduction to style sheets you will know the reasons why style sheets were invented - mainly to separate a webpage's content from its form. This discussion is designed to teach you how style sheets are actually written. You don't need to read this help in order to use style sheets in HotDog. The Style Sheet Resource Panel lets you use the power of style sheets without having to understand how they work :-)
A style sheet is a set of rules or instructions for the web browser, telling it how to render HTML tags. Designing simple style sheets is easy. One needs only to know a little HTML and some basic terms. For example, to set the text color of H2 elements to red, one can say:
H2 { color: red }
The example above is a simple CSS (Cascading Style Sheet) rule. A rule consists of two main parts:
Selector (e.g., H2) and
Declaration (e.g., color: red).
The Selector can either be a:
Simple Selector, which matches elements based on the element type and/or attributes (e.g., H2, as in the case above), or a
Contextual Selector, which consists of several simple selectors (e.g., H2 B or H2 B I). A contextual selector matches elements based on their position in the document structure.
The Declaration has two parts:
Property (e.g., color) and
Value (e.g., red).
While the example above tries to influence only one of the properties needed for rendering a HTML document, it qualifies as a style sheet on its own. Obviously, you can change far more than the color of text. Combined with other style sheets, you can determine the final presentation of your webpage.
If you are new to styles, use the Style Sheet Resource Manager and Format Font or Format Paragraph dialogs to create styles until you are familiar with the syntax. If you want to get right down to it, the entire style sheet specification can found at the World Wide Web Consortium.
Both webpage authors and viewers can influence the presentation through style sheets. By default, a web browser draws different tags in different ways (take for example H1, H2 - H6). You can tell the browser to render some tags differently.
Sometimes conflicts will arise between the style sheets that influence the presentation. A discussion on the style definitions that end up taking precedence is covered in the section further below on Cascading Order.The remainder of this discussion explores how these style definitions can be written and how they are integrated into your HTML pages.
There are three ways of using styles in HotDog:
External Style Sheets: External style sheets store all the style information in a separate file - that is, linked to by each webpage.
Document Styles: Document style definitions store the style information in its entirety at the top of each webpage.
Inline Styles: Inline style definitions store the style information in the tag to which it applies - it will affect no other tags.
One way of storing all the style definitions is to place them in a separate file that is linked to by all the HTML documents in your web site. This gives you the ability to change the entire appearance of your website by editing only one file. The style definitions are stored in a file with a .CSS extension and the Style Sheet Resource Panel is designed to make the process of creating these .CSS files as simple as possible (follow the tutorial for more details).
External Style Sheet files are linked to in much the same way images are, however, the link is specified within the HEAD tags, using the LINK tag: |
<HTML> |
The LINK tag uses two attributes:
The style definitions have a slightly different syntax when stored in an external file compared with an inline style definition. Below is the external definition used for the H1 tag - (used throughout this help).
H1 { font-family : "Tahoma"; Further style definitions are simply added above or below this definition. Click here to view the HotDog6.css file. |
A document wide style definition actually resides within the document that it affects. Consider the following example:
<HTML> |
Once again, the Style Sheet Resource Manager lets you easily create and manage your style definitions - and allows for the easy conversion of external style sheet declarations into document wide style declarations.
Inline style definitions apply only to the tag in which they are defined. The following simple example shows an inline style definition for the H4 tag.
Below is the default rendering of the H4 tag: Default rendering of the H4 tag.The following HTML code shows an inline style definition used to adjust the browser's rendering of the H4 tag: <H4 style="{color : green;}"> H4 heading with style... </H4> The result is: H4 heading with style... |
In the example above, only the text "H4 heading with
style..." would appear green - all other H4 headings would
appear as usual. The Format Font
or Format Paragraph dialogs
help you to easily create inline styles.
More than one style or style sheet can influence the presentation of your HTML document simultaneously. If you make extensive use of style sheets, you will want the ability to overwrite some style definitions (that is - have another style definition that takes precedence). Therefore, when defining your styles or creating your own style-sheets, you should be aware of the Cascading Order that is used to determine precedence.
The precedence of a style definition is based on each style rule having a weight. The following algorithm determines precedence:
Specified declarations only apply if the selector matches the element in question.
For example, assume the color property of H2 elements are set to the value red as follows: H2 { color: red } The specified declaration, color: red, will only apply if the selector H2 is applied to a text element. Therefore, this declaration would be ignored if the element in question was, say, an image, since the H2 selector would not be applicable. |
If the declaration doesn't apply then the inherited value is used.
To demonstrate, suppose now that there is a H2 element in your HTML document with a bolded element inside, as follows: <H2>This message is <B>extremely</B> important!</H2> If no color has been assigned to the B tag, the bolded word "extremely" will inherit the color of the parent element. That is, it will also appear in red, as follows: This message is extremely important! |
Other style properties are inherited in the same way, though sometimes style properties are not inherited from the parent element to the child element. Usually, it's intuitive as to why properties aren't inherited. For instance, the background property doesn't inherit, since the parent element's background appears by default anyway.
If there is no inherited value, the initial value is used. (This is the case for the HTML element and for other properties that don't inherit.)
By default, the weights of the viewer's rules are less than the weights of rules in the author's documents. That is, if there are conflicts between the style sheets of a webpage that a viewer is loading on to their browser and the viewer's own style sheets, the author's rules will be used. (Both viewer and author rules override the web browser's default values.)
You can also increase the weights of your declarations within your own document. Declarations marked ! important carry more weight than unmarked (normal) declarations.
In the example below, the first three declarations have increased weight, whereas the last declaration for font-style has normal weight. H2 { color: red ! important; background:blue ! important } P { font-size: 10pt ! important; font-style: italic } |
A viewer's rule with an important declaration will override an author's rule with a normal declaration. An author's rule with an important declaration will override a viewer's rule with an important declaration.
Any rules specified in the style sheet itself override rules in imported style sheets. That is, imported style sheets are lower in the cascading order than rules in the style sheet itself.
As with style rules, the author's style sheet override the reader's style sheet, which override the web browser's default values. An imported style sheet has the same origin as the style sheet from which it is imported.
The declarations for more specific selectors will override more general selectors. For example the declarations for the selector H2 B would override the declarations for the selector H2.
If two rules have the same weight, the last rule specified takes precedence (that is, the nearest rule enclosing the element). Rules in imported style sheets are considered to be before any rules in the style sheet itself.
This rule also applies to other tag attributes, as shown in the two examples below, which uses an inline STYLE with the SPAN tag and the COLOR attribute in the FONT tag.
This code: <SPAN STYLE="{color : red;}" > <FONT COLOR="PURPLE" >Test </FONT> </SPAN> will produce purple text, since the FONT tag contains the nearest color rule enclosing the text. Whereas this code: <FONT COLOR="PURPLE" > <SPAN STYLE="{color : red;}" >test</SPAN> </FONT> will produce red text. |
To make things as easy for you as possible, if you use the Format Font Dialog to specify tag effects, a message appears in the dialog to let you know whether your regular tag effects or your inline styles will take precedence.
On a final note, the search for the property value that takes precedence ends whenever one rule has a higher weight than the other rules that apply to the same element.
If you wish to specify a default style property for a document, you can set the property on an element that all other elements descend from. For example, the BODY element can serve this function in your HTML document, as follows:
BODY { color: red; background: url(background_picture.gif) blue}
The example above sets the text color to be red and the background to be an image. The background will be blue if the image is not available. This example will work even if you don't have the BODY tag in your document since the HTML parser will infer the missing tag.
Using the Format Paragraph Dialog.
Using the Style Sheet Resource Manager.
Web Design Groups CSS tutorial.