Cascading Style Sheets


For Fun – Browser History - http://www.blooberry.com/indexdot/history/browsers.htm also explore rest of site http://www.blooberry.com/indexdot/css/index.html

Cascading Style Sheets (CSS)

Style Sheets separate style from substance by moving the style information out of the body and into the head of your document or into a separate style sheet file.

A style is a group of formatting attributes identified by a single name that controls the formatting of a text block so that changing an attribute of the style instantly reformats all text controlled by the style. A style sheet includes all of the styles for a document. Style sheets reside in the HEAD area of a document and define a series of styles. Styles can define the formatting attributes for HTML tags, ranges of text identified by a class attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines.

Styles can be used to apply properties to an object.  You can define the style and then apply it to the object.  When a style is updated, all objects with that style are updated.  There are three types of styles:  custom styles, redefined HTML tags and cascading style sheet selectors.  Styles can be defined relative to a single page or as an external style sheet that can be applied to multiple pages.

Style sheets work in 4.0 (or later) browsers. Internet Explorer 3.0 recognizes some style attributes, but most earlier browsers ignore them. Use styles to format a single document, or use an external style sheet (that is, one that is stored externally and linked to the current document) to control several documents at once.

What is XSL (XSLT) and XML?

http://webdesign.about.com/library/weekly/aa050498.htm

http://webdesign.about.com/library/weekly/aa051198.htm

webdesign.about.com/library/weekly/aa012401a.htm

Style Sheet Templates From Dreamweaver Mx

Choosing File>New opens the New Document Wizard, which provides 24 various preconfigured external style sheets. A preview pane with the elements the style sheet controls is available, as is a text description of the style sheet. All style sheets can be edited at a later time.

Custom Style

1.      Start a new document.  Type your name.  Press the enter key and type your school.  Press the enter key and type your favorite food.

2.      Save the document in the draglayer folder, call it styles1.

3.      Open the CSS panel (from the Window panel).

4.      Click the New Style button (lower right corner of the CSS Styles panel).

5.      The New Style dialog box should appear.  Click the radio button to select Make Custom Style (class).

6.      Name the style .text1 (style names begin with a period).

7.      Choose This Document Only in the Define In section.  If you do not, Dreamweaver will prompt you to save as an external style sheet (something we do not want right now).  Click OK.

8.      The Style definition dialog box should appear. 

 

9.      Make sure the Type category is selected.  Select a font type, size, and color.  Click OK.

10.  Highlight your name.  Click the text1 style list in the styles panel.  Your name should change.  Highlight your school and click the text1 style list in the styles panel.  If you selected a table, all text in the table would change.

11.  You can click on the Edit Style button (lower right corner of style panel) or left double click on the style to edit.

12.  Make sure nothing is highlighted.

13.  Click the <body> tag to select it (click on the tag located in the lower left corner) and then click the style to apply to all text in your document.

Poem Exercise

1.      Create a new site.  Call it CSS and use the CSS folder found in the Dreamweaver folder located on your C: drive.

2.      Open the file called poem.html

3.      Complete the activity as listed in the handout from http://www.csuchico.edu/stcp/workshops/dw/lesson6/page2.shtml

4.      Close the poem.html file and open the tables.html file.  Complete the exercise as shown in the handout from http://www.csuchico.edu/stcp/workshops/dw/lesson6/page4.shtml

Formatting Examples

Changing link color and link effects

From the pull down "Text" menu in Dreamweaver select "CSS Styles" and then "New Styles".  In the Selector box choose the a:xxxx that you would like to change

Now change whatever features of the link you want to be different.

Links Without Underlines

This bit of code will remove all of the underlines from text links on a Web page. Just insert the code (shown below) between the head tags in your HTML. A word of warning though, this technique should be used cautiously as it may confuse your site visitors, especially those new to the Net.

<style type="text/css">
a{ text-decoration:none; }
</style>

Rollover Text Links

This code changes the color of a text link when the mouse cursor moves over it. It's a nice effect (especially for links with underlining removed) but isn't supported by Netscape. It also goes in the head section of your HTML.

<style type="text/css">
a:hover{color:#FF0000;}
</style>

Highlighted Text

This effect changes the color behind text, creating a very nice highlight effect. It's definitely an easy way to add emphasis to selected text on your page. You can set the highlight color to any color you choose, of course, but be careful that you allow for plenty of contrast between the text and the background color.

<span style="background-color: #FFFF00">Highlighted Text</span>

Paragraph Indent

This code will indent the first line of each paragraph on your Web page by the amount specified. In the code below, I have set the indent to a quarter inch.

<style type="text/css">
p {text-indent: .25in}
</style>

Margins

You can also use CSS to control the margins of your Web page. Simply set the top, bottom, left, and right margins as desired. The code below will set the left margin of all text on your Web page to one inch. Try using negative margins for interesting effects.

<style type="text/css">
p {margin-left:1.25in}
</style>

Redefine HTML tags

The H1 tag

1.      Close the current page and do not save.

2.      Start a new page.  Type in your name and your school.  Format with the Heading 1 command.

3.      Click the New Style button (lower right corner of the CSS Styles panel).

4.      The New Style dialog box should appear.  Select the radio button next to Redefine HTML tag and click OK.

5.      Select h1 from the Tag drop down menu. 

6.      Make sure the Type Category is selected and choose a color.

7.      Select the Block category.  Change the Text Align box to center.  Click OK.

8.      Some people use the Redefine HTML style to remove the underline from links (simply redefine the <a> tag and change the Set Decoration command in the Text category to none).

External Style Sheets

External style sheets are text files with a .css extension.  As with “internal styles”, when you update an external style sheet, all pages using that sheet will be updated.

1.      Close all pages and open a blank document.

2.      Create a new custom style. 

3.      Make sure the top radio button in the Define In section is selected and the drop down menu selection reads New Style Sheet File.

4.      Click OK.  A Save Style Sheet As dialog window opens.  Browse to the CSS folder.  You always want the style sheet in the same folder as your other web pages. 

5.      Name the sheet style1.css and click OK.

6.      The style definition dialog window opens.  Name the style font1.  Make sure the Define In box has the name of your external style sheet (style1.css).

7.      Create your style (change the font, size and color). 

8.      Every time you create a style, make sure the Define In box has the name of the external style sheet.

Attaching an existing external style sheet to an existing Dreamweaver document

1.      Click the Attach Style Sheet button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 to view the buttons at the bottom of the CSS Styles panel

2.      The Select Style Sheet File dialog box will appear

3.      In the pop-up list at the top of the dialog box, browse to locate the site folder or the folder within the site in which the style sheet is located.

4.      Select the style sheet listed in the dialog box to be attached to the Dreamweaver document.

5.      Click Select.

Advanced Examples

webdesign.about.com/cs/csslayouts/index.htm

CSS Web Resources

  1. www.macromedia.com/support/dreamweaver/layout/css/
  2. www.macromedia.com/support/dreamweaver/pages_css.html
  3. www.karljones.com/edu/htc/dw/css.asp
  4. www.webdevelopersjournal.com/articles/dreamweaver_stylesheets.html
  5. www.dmxzone.com/ShowDetail.asp?NewsId=3376 - listing for a book about CSS
  6. web.mit.edu/is/help/dreamweaver/css-mx.html
  7. builder.cnet.com/webbuilding/pages/Authoring/CSS/table.html - List of valid CSS properties
  8. www.lehigh.edu/~www/make_www/IntDreamweaver/css.html
  9. www.lib.umich.edu/knc/howto/web/dwMXstyles.pdf
  10. builder.cnet.com/webbuilding/pages/Authoring/CSSCenter/
  11. hotwired.lycos.com/webmonkey/stylesheets/tutorials/tutorial1.html - lengthy but good tutorial
  12. libweb.uoregon.edu/govdocs/webpub/dw2-2.html
  13. lts.ncsu.edu/instruction/guides/dw_adv/css.html
  14. www.mactia.berkeley.edu/tutorials/dreamweaver/dreamweaver_01/book/17text25.htm
  15. www.lib.berkeley.edu/~fhelsing/10-CSS.doc
  16. staffweb.library.vanderbilt.edu/libtech/tutorials/css/
  17. cat-ti-tude.com/edu/index2.shtml - humorous tutorials
  18. www.arch.usyd.edu.au/~joe/guides/dreamweaver/Help/styles_contents.html#styles - lots of good information
  19. wiscinfo.doit.wisc.edu/ltde/ORFI/wds/Modules/formatting.htm#cssoverview
  20. www.webdeveloper.com/html/html_css_1.html - why use CSS
  21. www.mako4css.com/ - good basics
  22. www.websitetips.com/css/index.shtml - tips and instructions - VERY GOOD LIST
  23. www.thepattysite.com/linkstyles1.cfm
  24. www.blooberry.com/indexdot/css/propindex/all.htm - CSS Property List
  25. www.w3.org/TR/REC-CSS1 - list of declarations
  26. webdesign.about.com/cs/css/ - all about CSS
  27. www.richinstyle.com/bugs/table.html - table of known CSS bugs
  28. hotwired.lycos.com/webmonkey/reference/browser_chart/ - a table to check browser compatibility
  29. graphicdesign.about.com/library/weekly/aa051498.htm - basic CSS information
  30. www.richinstyle.com/guides/attaching1.html - CSS tutorial
  31. staffweb.library.vanderbilt.edu/libtech/tutorials/css/ - nice tutorial
  32. www.mako4css.com/Tutorial.htm - CSS Positioning
  33. www.smartwebby.com/web_site_design/css_styles_tutorial.asp - tips and tutorial

thanks to for the graphics