AS/DSPS
|
|
Web Accessibility AS/DSPS |
| Cuesta Home... DSPS... Web Access... Using CSS... CSS Exercise |
Create a folder for all your web pages on the desktop. Name the folder with your first initial and last name. Store all your web pages, CSS, and images in this folder, or in subfolders within this folder.
Create a very simple web page with a heading in heading 1 style, some subheadings in heading 2 and 3 styles, a few paragraphs of text, a numbered list, a bulleted list, an image or two, and a hyperlink. If you prefer, you may copy the test.htm file. To do this, right click on the hyperlink and select SaveTargetAs, then save it in your folder.
You will be using this web page to see the effects of the style sheet you develop.
Open FrontPage, go to the File menu, select New, select Page, go to the Style Sheets tab, and select one of the predefined CSS templates, or select normal for a blank CSS. Save the CSS file in your folder by using SaveAs in the file menu. Use the filename style.css. The CSS file may be modified in Front Page.
To apply styles, you must first create a link to the style sheet from your web page. Open the web page in Front Page, go to Normal view, from the Format menu select Style Sheet Links, navigate to your style.css file, and click OK. Change to Preview to see your web page. To apply any new classes you have created, return to Normal view, select the text to be modified, and select your class from the Style drop down list box on the Formatting toolbar.
To modify your style sheet in FrontPage, open it, then select Style from the Format menu. In the List: drop down list box, select All HTML tags. In the Styles: list box, select the style you would like to modify, such as h1 for heading 1, b for all the default text in the document, p for paragraphs, li for bulleted list items, or a for hyperlinks. Select Modify, then change the font, paragraph, border, numbering, or position. You can create your own "classes" by selecting New, entering a class name such as .tinytext then defining the properties for that class. Class names begin with a period, unless the class is specific to a style. For a style which only applies to paragraphs, you could use p.stylename as the class.
In Notepad, create a new text document, enter the appropriate text, making sure you define each style with curly braces, { and }, and separate each characteristic within the curly braces with semi-colons. Save the file as style.css in the same folder as your web pages. For examples of the code which can be entered into the CSS file, see the CSS Handout.
Open your web page in Notepad. The external style sheet is "linked" to your web page with the link tag, as shown on the fourth line below. If your CSS file is in the same folder as your web page, then the command below will work. If the CSS file is in a different folder, you will need to make sure the href points to that folder.
<html>
<head>
<title> CSS Example </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Now save the web page and view it in your browser. Does it still look the same? If not, check the spelling on the filename. If that still doesn't solve the problem, there may be a syntax problem in the CSS file.
Make changes to the CSS.
Change the color and font size of the headings. Change the color of hyperlinks.
Add a background image, try repeating it just horizontally or just vertically, set it so it doesn't scroll with the page. Experiment with the page spacing, the spacing between paragraphs or between headings.
After you've made changes to the CSS, save the file, then go to your browser and click the refresh button. The changes to your CSS should show up. It's easy to bounce back and forth between notepad and your browser to make and view changes.
If you want to obtain the Cuesta College look and feel, you may use the line of code below to link to the Cuesta College style sheet. Visit the Cuesta Look page for more information on obtaining the Cuesta College banner, style sheet, and templates.
<LINK REL="STYLESHEET" HREF="http://www.cuesta.edu/includes/styles.css" TYPE="TEXT/CSS">