| CSS Text | MoreCSS Text | CSS Structure | Images / Background | CSS Linking | Quick Reference |
Cascading Style Sheets comes in two flavors: 1) the handling of text, CSS1 and CSS2, 2) positioning of elements CSS-P. This first installment talks only about the handling of text. The next installment will deal with positioning.
The main purpose of text based CSS is to separate content from design. What that means is that a style sheet can be made separate from the content of a web page then loaded from an external file. This gives a consistency of layout from one page to the next in terms of headings, colour, font, and size. If you take a look at the source code of this page you will see there is not much style sheet information in the code. Most of the style sheet information comes from external source, which you can download here.
The first thing you need to do in order to make use of a style sheet, either from a local or external source, is to make the browser aware you are including a style sheet. This is done by using a set of STYLE tags which includes a TYPE attribute as in <Style Type = "text/css"></Style>. The call for an outside source is similar and will be discussed later. The rules for the style sheet go between these script tags. Style sheet rules can also be included within the element they describe such as <P Style = "color: red">. Except in special cases, this defeats the whole purpose of style sheets. If you are including your style sheet in your HTML document, the style sheet goes in the head portion of you document. For example:
<html>
<head>
<title>Style Sheet Demo</title>
<style type = "text/css">
<!-your style sheet rules-->
</style>
<body>
</body>
</html>
The selector specifies what element(s) are to be effected by the declaration. The declaration determines what effect the rule will have. In the above rule, H1 is the selector and {color: red} is the declaration.
You notice that the declaration has two parts, the property and the value. The property is to the left of the colon and is a characteristic the selector possesses. The value is a precise specification of the property. In our example, "color" is the declaration's property and "red" is the value.
To keep your style sheets short, you can group your selectors and declarations. For example, if you wanted to have all your h1, h3, and h5 to be red, and your h2, h4, and h6 to be blue, you could write the following: H1, H3, H5 {color: red} and H2, H4, H6 {color: blue} Notice that the header elements are separated by a coma (,).
Likewise, if you want several different declarations for an element, you can group them together as one rule. For example, if you want an H1 element to be red, centered and underlined, you would write the following: H1 {color: red; text-align: center; text-decoration: underline} Notice that each declaration is separated by a semi-colon (;).
A class selector is and identifier you use to assign a style to an element in the body of your HTML document. To apply a class selector, you first invent an identifier (name) for the class. You can pick any name you want, but it should be meaningful to what you are trying to do and consist of all letters (numerals are excepted as long as the name does not begin with a numeral.)
The class identifier goes in both the style sheet rule section and the element for which it is assigned. For example:
<html>
<head>
<title>Style Sheet Demo</title>
<style type = "text/css">
.redheader {color: red}
</style>
<body>
<h1 class=redheader>This heading will appear red</h1>
</body>
</html>
</code></pre>
</body>
</html>
Notice the class selector starts with a period and is followed by its identifer (.redheader). The declaration comes next. In the body of the document, the heading tag, <h1 class=readheader> the class identifier is contained in the <h1> tag. This makes the <h1> follow the rule in the style sheet; the text is coloured red. The .redheader class can be applied to nearly any tag in the HTML document, such as <ol>, <<li>, <p>, or <hr>. This has some distinct advantages for editing your document. If you wanted to change the colour of the headers, you would only have to make the change in the CSS rules rather than at every element in the document. Keep in mind that you can not apply more than one class to an HTML tag. If you want to use a class to apply more than one attribute to a tag element, it needs to be done at the class declaration level.
The ID attribute is similar to the class attribute with an important difference. The value of an ID attribute must be unique throughout the document. Every element of a document can have an ID, but all the values must different. An ID selector is denoted by a hash mark (#). Its name, like the class name, is chosen by the author. An example will clarify this.
The ID selector<P ID = redtext> Here is a paragraph of red text</P>
<h1 ID = redtext>a red heading</h1>
You can add a style rule to a particular element in your HTML document. If you had a page with all text defined to be blue, and you wanted one paragraph to be red, then you could specify the red text by including a style rule with the particular paragraph tag. Here is the syntax: <P Style= "color: red">This is your red paragraph</P> Notice that the declaration in this case is between quotation marks. This is the only time quotation marks are used with CSS. <P ID = redtext> Here is a paragraph of red text</P>.
You can imagine that with all the different style sheets applying to one document, there can be confusion as to which rule will be applied where. This brings up the importance of inheritance and precedence. Inheritance does apply to CSS. For instance if you make a rule that says all text in the body will be blue, then elements within the body will also be blue. That means all <p>, <h1> and <b>, will be blue. They inherited the blue colour from the body tag of the document. If the text is black and you give one paragraph a blue colour, all the <ul>, <b>, and <em>s within that paragraph will also be blue, while the remainder of the text will be black.
With all the different style sheets, Classes, IDs and Selector attributes, how can you design what you want and be sure it will show as you design it? Trial and error is the sure way to determine how it will work, but there are rules of precedence you can follow that will give you good control right from the start. To be short and simple as possible, lets say the more specific the rule is, the higher the precedence. A rule that refers to the body of the document will have low precedence; any rules pertaining to a particular tag will have higher precedence. The highest precedence is a style attribute included inside a particular tag. Keep these simple rules in mind as you script, and you will be able to keep closer control.
A contextual selector is one that takes into account the context in which the style is applied. The style is applied to an element only if the element is in a particular context. Suppose you have a <h1> element that is specified as red text, H1 {color: red}. Within this H1 element you have some text that you want to be blue when you call for an <EM> tag. You can specify this within the <EM> element which only works for that one <H1> tag, or you can make it work throughout your document by setting a style sheet rule. Here is the syntax. H1 EM {color: blue}. This can be confusing because it looks like a style sheet rule that combines two or more selectors, but the difference is that there are no comas (,) between the elements, they are separated by white space. You can make the context go as deep as you want by adding more elements to the selector.
Lets suppose you have a body of text that is black. In the middle of a paragraph you want to have a bold line of text that is red with one word emphasized and green. This is how you would code it.
P B {color: red}Now, throughout your document, a paragraph with bold text would be red. If you emphasize a word it will be green
This is CSS at its most basic yet a lot can be done by following what has been shown here. There are many important pieces of this puzzle missing from this page. Subsequent pages will cover this material. The properties and values of declarations are missing here. Without them, you will not be able to do much with CSS no mater how well you understand the syntax. There is a list of the properties and values for text at this url.
| CSS Text | MoreCSS Text | CSS Structure | Images / Background | CSS Linking | Quick Reference |