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.

HTML Text Tags

Chapter 5 of Creating Web Sites: The Missing Manual deals with HTML text tags. HTML was created to give the web designer less control over placement of text because each person viewing the site will see it differently. There is no control over the type of monitor, screen settings or Web browser that a user will utilize. If text is placed exactly on the designer's monitor it may look completely different on a user's monitor; creating a site that the designer did not intend. HTML tags create the fundamental structure of your site. The Web browser interprets the code and displays the elements.

Guidelines Successful Web Sites Use:

1. A web page should be functional in a window with a resolution of 640 x 480 pixels (dots). This is the highest resolution on a Windows 95 system computer. There may be some scrolling involved for the user however, the majority of the page should be viewable to the user. The importance of your page being viewable to this resolution is that it prevents users that utilize an older computer from being able to view your site.
2. One's page should appear at its best at a resolution of 800 x 600 pixels; which is the most common monitor screen size of today.
3. The page should still have a decent appearance when viewed above 800 x 600 pixels.

There are two different types of tags:

1. Logical tags (or idiomatic tags) which define the content type such as headings, quotations, or paragraphs. This type of tag structures your document.
2. Physical tags (or typographic tags) which create formatting such as italics, underlining, boldface. The most popular tags are <b>and <i> tags.

* Note when creating a web or postal address is automatically formatted in italics.

Logical tag can let other programs besides Web browsers analyze HTML documents.

The semantic web refers to the concept of the web as a place where the contents of the page are are most important as opposed to the appearance of the page. It is the stress on the knowledge or information available on the web.

CSS (Cascading Style Sheets)

A CSS is a separate document created to control the formatting of your web page or web site. This is a way of separating the content from the structure of the elements. Using CSS are useful in that they can be reused with other web pages. They also save time because formatting is applicable to a whole document so it is not necessary to add tags throughout a document. Applying physical changes to web page is simpler for this reason.

Basic Text Tags

Numerous tags are used to create block elements which are portions of text sectioned off (using a line break and a small amount of space) on a Web page. Using a block element is a simple way of formatting a document. It does however create automatic spacing between block elements which may not always be the look one is looking for and is where style sheets come in handy.

An inline element is a tag that is placed within block elements for instance the image tag or the line break tag.

The paragraph tag (<p>) is a container tag that distinguishes it as a paragraph of text. In order for a browser to separate a line between paragraphs a line break tag is required. I you apply multiple spaces in a paragraph, it will only indicate one space.

To get more space without a line break, you will need to use a non-breaking space character to instruct a browser to insert a space. Text does not wrap when using this character.

Line breaks are used when one would like a new line but does not require a new paragraph. The line break (<br>) is not a block element so that it can be used anywhere in a document. Line breaks should not be overused since they can create pages do not look right in different sized resolutions. Line breaks should be used for addresses, outlines, poems and anywhere else more control is needed. They should never be used in bulleted and numbered lists.

Headings are section titles located above a paragraph. There are six heading levels with <h1> being the largest and <h6> being the smallest in size. <h5> and <h6> are smaller in size than regular sized text; this is why they are rarely used. Headings are important in that they describe the composition of your document.

Horizontal lines (<hr>) separates text using a horizontal line that runs from one side of its container to the other and separates everything above and below it. Usually horizontal lines are used to separate paragraphs. Sometimes they are used in a small container like a table cell.

Preformatted text (<pre>) differs from the rules of HTML in that it will mimic every space and line break you enter in a web browser. The text will be converted into a monspaced font such as Courier. Monospaced font is font where every letter takes up the same amount of space.

Quotes is a block element which is not often used in a Web page. When it is used it is usually to insert poetry. A <blockquote> tag is used for long quotations. The text display is indented on the left and right sides.

The tag <q> is used to nest short quotations inside another block of text. The majority of browsers will not format the <q> tag and one will be required to format it using italics. The best way though is to add the <q> tag to your style sheet.

Divisions (<div>) are block elements that are utilized to group together one or more block elements. They are extremely useful when added to style sheets because they can implement formatting directly to a <div> tag. The formatting can be applied across many paragraphs at once by simply adding the <div> tag into a style sheet.

A <span> tag is related to the <div> tag. The distinction being that the <div> tag is used for grouping block elements together whereas the <span> tag is positioned inside a block element and around a portion of text. The <span> tag needs to be used in conjunction with style sheets.

Hints for Text on the Web

• Text should be split into small sections. Users like to read long paragraphs.
• Pages should be short; two screenfuls at the most. This makes it easier for users to read and there are then more web pages.
• Content should be divided into many pages because this gives readers the ability to choose what they would like to read and the order in which they read it.
• The most important information needs to be on the first screen. This is the idea of designing above the fold; where interesting content and images are placed at the top of the web page and the user is not required to scroll to get to this information.
• Proofreading is a must in order to create a professional site.
• One should not format excessively until one is familiar with style sheets because style sheets can can give one's site cleaner HTML.

HTML Tags for Lists

There are three types of list tags (which organized text)

1. Ordered lists which assign each item in the list a number or letter. These are useful when sequence is important to emphasize such as when there are series of steps. When you use ordered lists it is not necessary to add the numbers; the browser does the work for you. Numbering is never incorrect and everything is always lined up nicely. Spacing is automatically inserted in the paragraph before the list. Start and type attributes can be used to being the list at a number other than 1. Different letter types and roman numerals can also be used.
2. Unordered lists or bulleted lists. The appearance of bullets can be adjusted to a certain point. When browsers interpret unordered lists they automatically indent each item listed and bullets appear before the content. Different types of bullets can be used including the black dot, empty circle and square.
3. Definition lists which are used to display terms and their accompanying definitions. On a web page the term is aligned to the left and the definition is indented beneath it. Definition lists are useful for producing an online glossary. The tagging in a definition list differs from the ordered and unordered lists. The entire list is wrapped in a <dt>. The inside <dl> tag is where the the terms and definitions are placed with the term wrapped in the <dl> tag (dictionary term). The definition is positioned in a <dd> tag (dictionary term).

A nesting list is a method where a list is placed inside another list to allow one to create multilayered outlines and comprehensive, consecutive instructions. To create a new list inside of a list the <li> tag is used. Different styles are useful to distinguish one level from the next.

Inline character style tags are commonly used formatting tags that can be used within another block element such as a paragraph, heading or list.

• Italics, bold and underline are basic formatting tags.
• Emphasis and strong- The emphasis tag <em> is a logical tag comparable to the physical tag <i> italic tag. In most browsers the same effect is viewed however the emphasis tag is better to use since is it more generic; it signifies that emphasis is needed. The <strong> tag is a logical tag comparable to the bold tag <b>.
• Subscript, Superscript and Strikethrough- The subscript tag <sub> creates smaller text that is positioned at the bottom of the current line. A superscript tag (<sup>) indicates that the text is to be smaller and positioned at the top of the current line. The strike tag (<strike>) interprets the browser to create text that is crossed out.
• Teletype (<tt>) displays utilizing a fixed-width or monospaced font such as Courier. Often it is used to refer to snippets of code.
• There are over 250 special characters supported by HTML. While not all characters are found on your keyboard there are special codes used to indicate them. A complete list of these characters can be found at: http://www.webmonkey.com/reference/Special_Characters

Planning My Web Site

Draft of My Home Page

I worked on a very rough draft of my web site which will be a personal one. I had a lot of trouble uploading my site and pictures. Perseverance is the key to this despite a great deal of frustration. It is hard working out of my element but I am determined to figure this out with the help of a friend and a lot of work on my end.

My Web Site Tools

I decided to use Dreamweaver as my HTML editor since it is the industry standard and it is a good thing to put down on a resume. My image editor will be Photoshop since I used it many years ago. I may find myself using Fireworks too since I am planning to see if this is less involved than Photoshop is. It should be exciting to see how these tools work.

This Week's Web Sites for Review

I found it interesting exploring the three sites featured this week:

W3 Consortium http://www.w3.org/
W3Schools http://www.w3schools.com/default.asp
USF specific tutorials created by Heather Dodge http://www.cas.usf.edu/lis/distance/tutorials/

The W3 site has too much going on. There are an excessive amount of links and it is difficult to find things despite the fact that there is link to "Finding Your Way at W3C" at the top of the main page. It should not be necessary to scroll all the way to the bottom of the page to see all the news articles in the center of the page. I think the W3 site designers got caught up in cramming in so much information that they did not realize how it would appear to a user. It is definitely time for the consortium to redesign the site because it has outgrown its present one.

I really liked the W3 schools site and found it easy to find tutorials on different subjects. The definitions are short, straight to the point and have links for more information on the terms defined. The site has the same problem with the main page- the need to scroll down to the bottom of the page.

The USF site of Heather's is really good overall. The headings are organized logically by subject; the layout is easy to read too as you noted. I did notice that the "Printing from Blackboard" Tutorial was outdated. It refers to clicking on an arrow that is not present in our current version of blackboard.

Power Tools

Chapter four of Creating Web Sites: The Missing Manual deals with HTML editors; how they function and how to determine the best one for yourself.

The first part of this chapter deals with how to choose the best tools to create a Web site. There are three types of HTML editors:

1. Text-based editors which involve text and tags in HTML. These editors differ from using Notepad or Text in that they include thing such as buttons to added commonly used tags.
2. Split window editors also require one to write in HTML however there is a seperate window which displays the work as you write your text.
3. WYSIWYG (What You See Is What You Get) editors peform like word processors in that one does not have to write in HTML. Text and pictures are added like one does using a word processing program. The edior produces the HTML markup.

The author then discusses the types of free HTML ediors available. There are three that are recommended:

1. Nvu which is now defunct and the programmers of this softare have replaced it with Koposer. This is a WYSIWYG program.
2. HTML-Kit which is a text-only editor with a split-preview mode.
3. CoffeeCup Free HTML Editor which is a WYSIWYG editor which is a lesser version of the for purchase CoffeeCup HTML Editor. In the free version one can only work in the text mode.

The author does mention Mid-Level HTML editors but they are not worth the money. He recommends saving up for Dreamweaver or Microsoft Front Page. These are the two types of professional HTML editors that Macdonald recommends. Dreamweaver is the industry standard editor whereas FrontPage is popular among people starting out.

The next part of the chapter consists of the steps to creating an HTML document in the editor chosen and putting it online. The exercises provided helped me to get used to using Dreamweaver.

Some things I noted:

Using the WYSIWYG editing mode may be easier at first but may require a great deal of HTML to examine in the future.