Style Sheets

The use of separate documents called style sheets to format your web page is the topic of Chapter 6 of Creating Web Sites: The Missing Manual. Style sheets are useful in that they can be reused and keep style separate from your web page makes it easier to manage HTML. There are also more options for formatting when using style sheets as opposed to placing it within HTML.

CSS stands for cascading style sheet. CSS is a method of assigning meaning to the elements of Web page(s). Whereas HTML defines the structure of a Web page, style sheets designate how a Web page will appear.

Three Types of Styles:

1. External Style Sheet- a style sheet where the information on the formatting of the Web page is saved to a separate file. This is the simplest way to utilize style sheets since the formatting rules can be applied to numerous pages. They also more effective due web browser caching (when a browser keeps a copy of the downloaded file on the user's computer and it is not necessary to download the file again). It is therefore faster for a user to visit the same site again.
2. Internal Style Sheet- a style sheet where the formatted information is placed within an HTML document. The information is embedded within the portion of the page. Internal style sheets are not used very often. They are only used when one would like to provide to another person with the Web page and want to keep it all in one file.
3. Inline Style Sheet- when the style sheet is embedded within an HTML tag. This is not the best idea since it can get excessive and messy with both the style sheets and the HTML code mixed together.

The book goes on to describe that CSS1 will be taught in the book since it is supported by most leading web browsers.

Style sheets are comprised of rules pertaining to formatting within a Web page. Rules are formed from three elements:

1. Selectors which identify what is to be formatted.
2. Properties which describe the kind of formatting to be applied.
3. Values which establish the property.

Selectors are identified by the curled braces symbol {and}. The formatting information is within the braces. The rules are listed separately with the use of a semicolon (;).

When applying a rule to a number of items a selector can be chosen that includes all the items and each item is separated by comas.

Some Things to Note About the Style Sheets System:

1. A single rule can format a large amount of HTML.
2. The amount of formatting is in the hands of the web designer.
3. Two different rules can be created to effect the same component.
4. Certain tags have style rules attached to them such as the bold tag. These rules can be superseded through the use of style rules.

How to Create a Style Sheet

1. Create a new file in a text editor.
2. Type a rule into the style sheet.
3. Save the document with a name ending with the extension .css.
4. Open the html file that accompanies the .css file.
5. Add a link to the HTML file so that the style sheet will work with the file. The link tag should be added to the head portion of the page. The link tag is comprised of three rules: rel shows that a link is associated with a style sheet, type explains how the page is encoded and href shows where the style sheet is located.
6. The HTML document should then be saved. Then open the document in a browser. When the browser opens the HTML file it will locate the link thereby instructing the browser to search for the style sheet and employ the rules it contains.

Something to note: Dreamweaver has prebuilt style sheets.

The cascading in Cascading Style Sheets refers to the manner in which the browser determines which rules take priority in situations where there are many rules. Browsers apply style sheet rules in the following order:

1. Inline style or rules within an HTML block.
2. Internal style sheets which are within a head tag.
3. External style sheets.
4. The browser default.

The best way to format an individual tag is by utilizing class selectors.

The concept of style inheritance is the idea that when a formatting rule is employed to one element that contains further elements the result is that the rule is applied to all the elements. Certain style properties are the exception the rule for example margin rules are not inherited. There are also instances where rules overlap. In this case the rule closest to the tag is applied.

There are two color properties: text color and background-color. The background-color is employed within the body tag. The end result is that the text color will be applied throughout the document. If the background color is applied to a single element then the result is that the color is only that portion.

Color can be applied to a document in three ways:

1. Using the color name; however there only sixteen color names that can be applied in this way.
2. Hexadecimal color values are three digit numerical codes that begin with a # sign. The three numbers represent the red, green and blue elements of color.
3. RGB color values assign how much of the red, blue and green values are needed to result in that specific color. This logical method of color creation is based on a numerical system where the numbers range from 0 to 255. Number 255 is white and number 0 is black.

In the past there was a great deal of thought given to the need colors to be web-safe. Today computer are capable of display at least 65,536 colors so this does not come into play except when web pages are displayed on small portable devices like cell phones or palm pilots. To ensure that pages appear as you would like them to it is best to test how your web site looks on different types of computers.

There are numerous color picking tools on the web. Dreamweaver has its own color picking tool.

Black text and white backgrounds are classic and are easily readable. They also work well with pages that contain colorful pictures.

Some good ways to incorporate color into a web site include:

• Using a monochrome site which incorporates black, white and an additional color.
• Using a lightly shaded background color.
• Using a colored box to emphasize important parts of the web site.
• It is recommended that one not use white text since it is difficult to read.

There is no way of knowing what fonts are available on a users computer so web designers use font families. There are sans-serif fonts which have a streamlined appearance such as Arial. There are also serif fonts that have small curlicues in the top right and bottom left corners like Times. Serif fonts are used in print because of their excellent readability.

It is best to stick with standard fonts since not every user will have that font on their computer and the appearance of the web site could look entirely different from what the designer intended. The worst case scenario is that the text could be unreadable.

These are standard fonts:

• Times
• Arial and Helvetica
• Courier

The following fonts are found on most Window and Mac computers (it may not be available if a user is using Unix)

• Veranda
• Georgia
• Tahoma
• Comic Sans
• Arial Black
• Impact

There is no way to have complete control over the font size on your web page since users have the option of changing the font size on their browser. For this reason web designers should not use extremely small fonts or excessively large fonts. It is best to test ones Web page in various browser and at various text sizes.

Text can be sized in three different ways:

1. Using absolute sizes where text is assigned its size using one of the size value keywords. The seven standard sizes are: xx-large, x-large, large, medium, small, x-small and xx-small. The medium size is the standard text size browsers use (12 pts). Large text is about 15 points, x-large text 18 points and xx-large is 27 points. The problem with absolute sizes is that browsers can change text size on its own. For instance Internet Explorer changes a font size of small to standard size so if one needs text to be smaller one needs to actually chose x-small for a small size to appear on the screen.
2. Relative sizes are utilize one of two relative sizes; larger or smaller. One can change sizes up or down using a plus sign (+) and a number. For instance +2 would indicate that the text size would actually go up 2 increments in size.
3. Exact sizes represent the actual size of the font in pixel units. This the most exact way to control font size. The number and the letters px (pixels) should appear next to each other without a space otherwise the rule may not work properly in certain browsers. Using exact size text can make it difficult for certain users to view ones Web page.

Text Alignment and Spacing

Most web text is aligned to the left of the browser window. Text can also be centered, aligned to the right and justified. Justified text does not work well for the web since there is no word-splitting rule so longer words cannot be divided as they are in print. There can be gaps and white space on the page.

Spacing can be adjusted utilizing the margin property. Eight pixels is the standard margin for Web browsers. To narrow a margin the margin-top and margin-bottom properties are adjusted to align that one specific margin. The margin-left and margin-right properties can be adjusted in the same way to control the amount of space on the left and right sides of the Web page.

Borders are used to divide portions of content. There are three basic border properties:

1. Border-width or the thickness of the border.
2. Border-style or the various types of line styles.
3. Border-color or the color of the line.

Thinner borders are more aesthetically pleasing in design. In order to create a border that stands out three other properties are often used in conjunction with a border:

1. Background color which creates the a floating box design.
2. Changing margin spacing between the border box and page. Often the margins are increased to keep the images or text within the box from appearing too other content in the page.
3. Padding is used to increase the spacing within the element so that there is ample room between the text and the border.

Style sheets can be used to create appealing separators such as changing the style of a horizontal rule tag. The width can be adjusted using the width property and the percentage of the lines length. The line can be made thicker or thinner using the height property and utilizing pixels to define the thickness. Borders can also be used to separate sections with in a page resulting in an interesting appearance. For example, a horizontal rule can be heightened utilizing a double border style.

Class selectors enable one to separate rules from tags. This method entails dividing Web page content into conceptual groups or classes and then applying distinct formatting to each specific class. Class-specific rules are constructed using a two part name. The first part of the name conveys what the tag rule applies to and the second part (located after the period) is the class name. The class name is comprised of letters, digits and dashes however, the first character must be a letter. ie. p.review. The purpose of the class name is to give a brief description of the content to be formatted. It is important to add the class name to the tags that pertain to that class attribute within the HTML document. The class name within the tags must match the class name in the style sheet in order for the browser to interpret the formatting.

CSS comments can also be used to note the meaning of each class. The CSS comments being with the characters /* and end with */.

Division tags are used to easily apply class attributes to a Web page. Otherwise a class attribute would need to be physically input into every tag within a Web page. The division tag allows one to group together whatever sections of a Web site one would like to. Style sheet inheritance is the reason that the division tag works. Utilizing division tags a great time saver.

A class rule can be constructed without a tag name as long as it has a class name. To create this type of rule the first portion of the selector is left blank (before the period). This type of rule is useful in that is can be applied to any tag as long as it has the correct class name. This rule denotes the formatting type as opposed to the content type.

Class rules within a style sheet are useful in defining the rules of a Web site. One can compose a single style sheet to define all the design elements of your Web site.