ITEC 745 - CSS Introduction

What are Cascading Style Sheets?

CSS is a language that defines HTML presentation to browsers and provides "a mechanism for adding style (for example, fonts, colors, spacing) to web documents", according the the W3C. In a nutshell, CSS is a series of layout definitions that controls colors, fonts, sizing, placement and other presentation elements and was created with the idea of replacing HTML presentation tags and hacks introduced by browsers.

Style sheets provide a number of benefits, one of the most profound being that they allow users to escape from the limitations of HTML and avoid the use of a number of deprecated tags. Additional benefits include:

with the use of an external style sheet, users can centralize the styles for an entire site in one file, allowing for sitewide changes to be made in one place.
promotes standardized design
a number of style sheets (and a script) can be used to offer different styles to different users (based on browser detection, user selection)
the file sizes of your web pages will be reduced by reducing the amount of code necessary to control visual elements
CSS allows greater control over design and lay out than HTML

Even though CSS has been a recommendation of the W3C since 1998, adoption has only become prevelant in more recent years because of uneven support for CSS among the various browsers. Recent version of browsers (IE 5.0 and up; Netscape 6 and up) provide more steady support with only some subtle elements of the latest CCS2 rendition being unsupported. (browser compatibility chart)

Here's a nice example of CSS in action, albeit, a little more advanced than we will get in this course. CSS Zen Garden shows you the dramatic difference a style sheet can make to an HTML page.

Structure

Style sheets consist of rules that describe how page elements should be displayed. Each rule (or style) has two parts, a selector and a declaration (see above). The selector is positioned on the left of the expression the element, HTML tag or part of the document that is to be affected by the rule. The declaration consists of a property and a value for it.

There is a particular setup for how CSS rules should be written and the punctuaton used. The declaration is always enclosed in curly brackets "{ }". The property is separated from the value with a colon " : ". A declaration can also contain multiple property:value pairs but they are all terminated with a semicolon " ; ".

example: li {list-style-image: url(images/arrow.gif);}

Types of Style Sheets

There are four main types of style sheets

Inline
Embedded
External
Imported

Inline styles are placed within an HTML document body at an exact element of code.

Embedded Style Sheets are placed in the <head> of a web page and affects only that page.

External Style Sheets can be thought of as the highest form of style sheet, since they realize some of the most profound benefits for the user.

Imported style sheets can be use to combine style sheets but are most often used ot hide declarataions from Netscape 4 browsers.

Two Main Style Sheet Types

There are two main ways Cascading Style Sheets can be implemented,within HTML pages(internally) or externally.

Embedded or Document Style Sheets

These are style sheets embedded in HTML pages which is positioned in the <HEAD> of a document between the <STYLE> and </STYLE> tags.

example (note: HTML comments protect the style declarations from appearing in older browsers. CSS comments allow you to document sections or particular information within your style sheet.)
<STYLE TYPE="text/css">

</STYLE>
The other variation of the Embedded or Document Level Style Sheet is the Inline Style which is the method by which you can assign an individual style within the HTML code right at the location you aim to affect.

example

<P STYLE="color: maroon; background: yellow">I am maroon</P>

External Style Sheets

example

<link href="itec845.css" rel="stylesheet" type="text/css">

The external style sheet is actually merely a text document (like an HTML page) with the proper formatting for individual styles.

External style sheets are used to centralize content for an entire website or collection of pages to one single file. This allows for sitewide changes to take place far quicker than if styles are distributed throughout individual pages. Additionally, it allows style references to be located and shared in one location outside of the web pages thereby reducing the file size of html pages.

Cascade and Inheritance

The word 'Cascading' in CSS refers to the fact that a document can call from multiple external style sheets as well as contain embedded styles in the <head> and inline styles within various HTML tags. CSS has rules which determines which rule takes precedence when multiple sheets, embedded and inline styles compete or conflict.

In general, the closer the tag is to the actual elements, the greater its inheritance. In general

inline > embedded > external > @import (not mentioned here)

1. User-defined style
2. Inline styles
3. Embedded styles
4. Linked styles
5. Imported styles
6. Default browser styles

There are a series of other factors that go into deciding inheritance including specificity but we will not go into that here. Read more below if you wish:
http://www.w3.org/TR/REC-CSS2/cascade.html

Note: Appending an "!important" tag to the end of a declaration will give is precedence over most other references. (ex. H1 {color: white !important}

Using CSS in Dreamweaver MX 2004

As with all parts of the course, we will be using Dreameaver to proxy our setup and building out of style sheets. This requires a careful combination of understanding of CSS rules and concepts with the methods the DW uses to make CSS happen. With DW MX 2004, a basic understanding of CSS concepts becomes more important as some key interface changes mesh its tools further with the real world CSS code building out underneath the interface.

The Dreamweaver CSS Tools

The tools used to help create and manage style sheets can get confusing but once you get used to using this cast of characters, they will become your friends which will help you build and edit your style sheet with ease.

CSS Panel

This appears under the "Design" panel and is where you work with style sheets in Dreamweaver. From this panel, you can get an overview of the styles within attached style sheets. For those transitioning from DW MX or earlier versions, you'll notice there is no longer the ability to apply styles to your web pages from this panel. This panel is now purely for creating styles. Editing styles from this section will now merely launch the CSS Style Sheet in the code view window. This may be daunting for most of you and one way around this is to right-click the individual style and select "Edit" from the pop-up menu. This will launch the Style Definition window.

Create a Style Sheet

We will be working exclusively with external style sheets in this course (and generally recommend their usage for most websites). The best way to create your new external style sheet is using the New Document window (the same one you use to create new web pages).

Go to "File" > "New" and in the "New Document" window (see below) select "Basic Page" > "CSS". A new blank CSS page will appear in your Code View window. Select "File" > "Save As" and give it an appropriate name such as "arstyle.css"

Once the new CSS Style Sheet is created, you will need to attach it to pages within your website. You can do this by opening each given web page and, in the bottom of the CSS Panel (see above), click the "Attach Style Sheet" icon. This will link the page to this style sheet and allow you to reference the styles within the sheet for the web page.

Creating New Styles

To begin creating a style, click the "+" icon button in the lower part of the panel. The "New CSS Style" box will appear (see below).

You have the choice of creating (see "Define In") an "external" style sheet file or embedding the style sheet within the web page you are working on -- "This Document Only" -- which places the style sheet rules into the <head> of the document.

Creating Selector Types

Remember from the graphic above that the Selector is that part of a style tag that There are three choices for setting up a new style in Dreamweaver, Class, Tag and Advanced, which can be plainly seen as the choice in the "New CSS Style" window.

Class: Otherwise known as Custom Classes, this selector is for creating your own unique style tags. When you create a Redefined HTML Tag (below), for say the <H2> element, all instances of that element will be affected. But with Class selectors, you can selectively apply the style to individual instances of tags.

Tag: As the name suggests, this allows users to create styles associated with a specific HTML tag. When the "Redefine HTML Tag" item is selected, the "Tag" drop down menu displays a choice of most HTML tags This will affect all instances of the tag throughout the website and effectively replaces the styling of the tag. Keep in mind, use of this selector requires some knowledge of HTML tag names.

Advanced: the selector is commonly used for creating link rollover effects but is generally used to split up Redefined HTML Tags for multiple purposes or conditions. For instance, you may have redefined an HTML <td> tag to have a blue background but you may need it to have a green background in another location. Selectors let's you create a split version of the tag:

Defining Your Styles

After you have selected your style "Type" and appropriately selected the "Tag", you can apply the style definition. The window below will appear allowing you to define the style in eight categories. These categories are part of Dreamweaver's way to make it simpler for you to create styles and the categories do not represent any CSS rules but are setup as a guide for your output. Based on your selection, Dreamweaver generates the appropriate declarations for you style sheets.

Applying Styles Within Your Web Pages

Styles can be applied to text or other items within your web pages using the Property Inspector's Style Drop Down Menu (this changes from the MX version where the CSS Styles panel also allowed users to apply styles). CSS styles listed in the menu will preview their particular style attributes for easier selection.

Tag Inspector

When double-clicking a style from the CSS Panel, it will launch open your style sheet into the Code View window, presenting the large dollop of your css code (see below). While this might make the code-weary frantic, there is a tool in the panels that provides some measure of support for editing styles directly from the code: the tag inspector. Located under the "Tag" panel, when specific parts of the tag are selected, the window will show the Rule at the top of the window for the element and show the CSS Properties below. Each individual property can then be reviewed and selected for its declaration elements.

Font Properties, Page Properties and Dreamweaver Magic

You may not have noticed that when adding Fonts, altering Page Properties or messing with other select presentation elements, DW MX 2004 now adds them as styles. So some of you already have styles within your web pages but either don't know or don't know how they got there.

While this is a well-meaning addition to DW, it does mess with your desire to control all styles through your external style sheet. This is because these styles are added as embedded styles. For now, the message here is be careful when using these tools to change styles.

CSS Templates in Dreamweaver

Dreamweaver MX includes pre-made CSS design sets that you can apply to your pages. These include text and color schemes and are a good way to get your feet wet playing with style sheets (but don't steal these for your assignment).

To use these stylesheets:

Go to "File" > "New" and in the New Document window (under the General tab), select "CSS Style Sheets".
A list of pre-made style sheets will appear in the adjacent column. Select each and the Preview window will provide an example of the style.
After finding one you like, click the "Create" button. The stylesheet will become embedded in a new document. Save it within your site and then link the appropriate pages to it as an external style sheet.

Prompting Other CSS Editors

You can also use outside editors for you style sheets in Dreamweaver. Some prefer using programs like Top Style or Notepad to work directly with the code.

Go to "Edit" > "Preferences" > "File Types / Editors" and in that window, review the existing Extensions. If ".css" is there, select it to see what external application it refers to. If it is not there, you will need to add it.

Click the "+" button above the Extensions window. In the square that appears in the box, type in ".css".
Next, click the "+" button above the Editors window. In the dialog box that appears, navigate to the location of the application you wish to use (select the ".exe" file in windows.