|
Cascading style sheets are a way of controlling the look and feel of your entire site using one document. This document is usually called styles.css and is a css document. CSS can save you allot of time and effort when trying to update the look and feel of your website.
- Start with the template you created in the first three classes
- Create styles for the different elements you will want in your site
- this step takes a little foresight to determine which elements you may want. I would suggest at a minimum of having a style for headers, sub-headers, bulk content, links and very small text
- type some text for each of these styles
- create a temporary style for each piece of text. this is easiest to do via the size and color of the text
- rename the different styles to something that will be easy for you to remember.
- save your document
- create a new document of the type CSS.
- Save this new document in your site root folder as styles.css
- Pull the styles from your html template document into your new styles.css document
- go to the code view of your html template
- copy all the code from inside the <style></style> tags
- Paste this all into styles.css. you should not include the actual <style></style> tags themselves
- save this document
- go back to the code view of your html template
- Delete everything inside the <style></style> tags of your document including the tags themselves
- Attach your new style sheet to your html template
- open your template html document
- go to File --> CSS Styles --> Attach Style Sheet
- browse to your styles.css document in your site root folder.
- Click OK
- All the styling you applied to the text in this document earlier should now look correct again.
- You can now make changes to your styles.css document and see how they affect your design
The following two links are to example css documents that use a variety of the different styles you can apply to your site. For ease of reading you may want to copy the code in these files into a css document in dreamweaver.
Classes: these are styles that apply to all occurrences of a tag on your website. they are used to control major look and feel elements on your website.
Styles: These are used for applying a style to a particular item such as a piece of text. This is what we created in the demonstration
Style Class combination: this is a hybrid of the two and allows for more control of your different elements.
The following link is a list of all the different properties you can set using CSS. the site explains what they do and how to use them. http://www.blooberry.com/indexdot/css/propindex/all.htm
|