Sesame Street

Sesame street started as an experiment and after 40 years it is still experimenting
NPR Story


Favorite Quote

"Envy is a waste of time. You already have all you need."

CSE625 - CSS

Not ignoring the obvious*

CSS (Cascading Style Sheets) has nothing to do with the Cascade Mountains. Style sheets is the title given to documents or, in some cases, parts of documents that describe how the page will look. We'll start with just formatting the text, the size, the style, the font, the color. Then we'll slip into using it for layout, where things are on the page.

Style sheets can be a part of the single webpage document, or it can be a document of its own affecting formatting and styling on several webpages. The latter lets you make one modification on the CSS document and it changes the appearance of all the webpages linked or connected with that CSS. Talk about nifty if you want to revise all your (hundreds) of webpages.

* CSS is relatively new among amateur website designers and we could side step it, but now Dreamweaver forces it in our path.

Basics | Editing | Features

CSS Basics - Starting from the Beginning --------------------

One of the easier ways to create a CSS stylesheet in Dreamweaver is to click on Format in the top Menu and then on CSS Styles in the drop-down menu. At first you will, of course, select New.

There are three primary choices you need to make.

The first (top one on the screen) is class, ID, Tag or Compound.

Class is most often used at first. This will be features you wish to use more than once in a document, such as the font style, size, color used in each paragraph. Another might be for titles or section headings.

ID is unique from Class because it can only be used once in a document and typically defines a section fo the document like the top banner, the bottom footer, the left column or the main section.

Tag is for defining a standard tag that HTML coding using routinely like <p> for paragraphs or <blockquote> for indented quotes in the body of the text.

Compound is a combination of the above an requires a bit more experience and typically an uncommon ability to understand complexity.

The second is a name that you give to this set of features.

Several guidelines include: use simple and short names; use no spaces or special character; use names different than what Dreamweaver is already using; and use names that logical fit how your features will be used, such as myheader, mymain, denvysfooter.

Thirdly at the bottom of the page:

you must decide if this CSS style will be used only in this document, in a separate stylesheet so that it can be used for many webpage documents, or one of the existing stylesheets you already started. If you chose the "separate stylesheet" option, you will need to return to Format in the top Menu, click on CSS Styles and then Attach StyleSheet and follow through.

Click OK, and make your choices. There will be more about the choices later.

Then, like a fourth step, to apply these features to a portion of your document, such as text, 1) highlight the text to be affected, 2) click on Format in the Menu bar, 3) click on CSS Styles in the dropdown menu and finally 4) click on the name of the style you wish to apply.

CSS Editing ----------------------

To change, edit or modify a particular style in Dreamweaver, click on CSS Styles in the far right column of windows (If the CSS Styloes window is not visible, click on Window in the top Menu bar, and then on CSS Styles.) Click on All and then double click on the name of the style you wish to edit.

If you wish to apply a different style to some text, highlight the text and repeat the "fourth step" described above.

You can also edit your style definitely in the code, either at the top, in the <head> in the current document, if you chose for this document only, or in the separate stylesheet, which you access by clicking on the stylesheet name just above the code in Dreamweaver. This is a bit more challenging and typically should not be tried on the first date.

CSS Features ------------------------

The number of features of available are overwhelming and will not be itemized here. I recommend that you go to w3schools.com and click on the CSS options.

When this writings speak mostly to the quality of text, CSS styles allow you to deal with numerous features about how the page looks including positioning, margins, borders and on and on.