Ramapo Masters of Science
in Educational Technology
Tools and Concepts of Data Analysis: Dataweb
Setting Up Your Dataweb Folder (home)
Overview | Page Properties | Divisions and IDs | Classes | Elements within Divisions
External Style Sheets | Linking to an External Style Sheet | Editing Existing Styles
Overview: CSS 1
Cascading Style Sheets are the preferred method of formatting your web pages, and Dreamweaver offers excellent support for this technology. As with most technologies, CSS has developed over time. CSS1 involved basic formatting while the more recent CSS2 includes strong support for positioning with CSS. Good use of CSS has the advantage of making it easy to format your site consistently and to make changes rapidly. Formatting can be applied uniformly to similar elements such as paragraphs or hyperlinks by assigning styles to the html tags that define each element. Styles can also be applied to whole pages, regions of a page, or even individual words through the use of Divs, Spans, Classes and IDs.
In order to proceed with this lesson Download the the practice file
-
File | Save As
-
Type a good name for the page (csspractice1.asp)
-
Select Webpage, HTML only form the Save as type dropdown
-
Navigate to Your project folder using the Save in dropdown
-
Check that you have reached the proper location | Save
-
Click Page Properties
-
Choose the Appearance menu
-
Choose from the available options
-
Choose the other categories and make settings as desired
Creating and Formatting Divisions with IDs
Formats can be applied to sections of a page called
divisions. You should define these divisions based on the
function of the page seciont you are formatting. The top line is a
header or page title. The bottom two lines document the site and should
be considered a footer.
To
create and format a page division:
-
Select everything you want included in the division | Insert | Layout Objects | Div Tag
If the format applies to only one section of the page and is only used once as is the case in this example, create an ID name.
-
Type a name in the ID field (without spaces) | New CSS Style
Styles may be stored in an individual page or in a separate page. For now:
-
Choose This document only | OK
There are many settings that can be made. They are grouped in 8 menus. The first is type and involves the appearance of text on the page. If you do not make changes, the text will inherit the characteristics assigned to the page or containing tag.
-
Make sure the Type category is selected
-
Select "Uppercase" from the case dropdown
-
Select the Background Category
We would like a background color that differs from the main background. This is set in the Background menu
-
Make sure the Background category is selected
-
Select a background color
-
Select the Block category
-
Make sure the Block category is selected
-
Select Center from the text alignment dropdown
-
Select the Borders category
We would like the outside edge of this region defined by a thin border.
-
For Style Choose "Solid"
-
For Width Type 1
-
Choose a Color
-
OK
Now we will repeat this process formatting the footer section at the bottom of the page. Since the footer only appears once on a page we will define another ID to format it.
Select all text in the footer | Insert | Layout Objects | Div Tag
Type the name in the ID field | Click the New CSS Style button
OK
-
Select font size 10
-
Select Italic for the style
-
Select the Border category
In this example we will set a top border but not right, left, or bottom borders:
-
Uncheck all three Same for all boxes
-
Set top style to Solid
-
Set top Width to 1
-
Set Top Color to match your headers and hyperlinks or to another color as desired
-
When all settings in all categories are complete, click OK
Sometimes you wish to create a style that will be multiple times within the same page. For this we must create a class. This process is very similar to creating an ID, but remember, unlike an ID, a style can be used many times on the same page.
-
Select the first letter of the first paragraph on the page
-
Check that the Style option is selected
-
Give the style an appropriate name (drpcaps)
-
OK
-
Check that the Type category is selected
-
the appropriate categories to make style changes | OK
Formatting Elements within Divisions
At times we may wish to alter the styles of a particular element such as a paragraph, but only apply that style in particular circumstances. On this page we wish to remove the top padding from the paragraph in the footer but not other paragraphs on the page. This can be done either with classes or styles. Note that the text in the footer is contained in a paragraph that is contained within the footer Div.
-
Select the text in the footer
-
Note the paragraph tag in the status bar is selected and that it is preceded by the footer div tag (which in turn is within the Body tag)
-
Click the New CSS Rule button
-
Check that the This document only option is selected in the Define in section
-
Verify that Advanced (IDs, pseudo-class selectors) is selected from the Selector type options.
-
The name for the tag is already created based on the text you selected
-
OK
-
Click the Box category
-
Type 0 in both the top padding and top margin boxes
-
OK
This removes the top space from the paragraph in the footer and brings the text closer to the line. If you wish to add back in some of the space, return to the style by double clicking in, uncheck the same for all box for the padding section, and add a few pixels of padding to the top.
Exporting Styles to an External Style Sheet
Now that we have created the styles for our page, we can export them to an external document. This will allow us to reuse the styles throughout our website without having to recreate them. If a particular style applies only to one page, we can still store that style in the page, but all styles that "define the look of our site" should be exported to an external sheet. To do so:
-
Make sure the CSS Panel is Open
-
Drag the bottom edge of the panel down if needed to expose all the styles
-
Click the first style
-
Depress and hold the shift key
-
Click the last item
-
Right Click the selected area
-
Choose Move CSS Rules
-
Verify that "A new style sheet" is selected in the Move Rules To section
-
OK
-
Type a name for the stylesheet
-
Navigate to the project folder
-
Save
Linking a page to an Existing Stylesheet
Once styles have been created in an external style sheet, you can link that style sheet to as many pages as you wish. This is an excellent way to format your entire site consistently. To link to an external style sheet:
-
Right click in the CSS Styles Pane
-
Choose Attach Style Sheets
-
Verify that Link is selected in the File/URL box | Browse
-
Browse to the project folder
-
Select the CSS file
-
OK
-
OK
-
The CSS Panel now shows the styles
Once a style has been created either on a page or in an external style sheet, it can easily be edited. Remember that if the style exists in an external style sheet, changes to that style will be reflected on any pages linked to that sheet. To edit a style:
-
Double Click the style name in the style panel
-
Move through the 8 style categories making changes as desired
-
OK
Site Designed and Maintained by rsciorra
Last Updated
02/15/08