Cascading Style Sheets are collections of formatting rules that can be used to maintain a preset and consistent look to the content of web pages created in Dreamweaver. CSS styles are a core part of the software and should be used as a means to separate the content from its presentation.
Traditionally HTML tables or frames have been used to organise content on a websites but, using CSS layouts, you have far more flexibility by using <div> tags which enable you to insert content and then position them wherever you like.
Using CSS styles saves a lot of time since, once you have created the rules, all you have to do is apply them to your web pages rather than manually configuring all your formatting rules to each page one at a time. Equally, if you make any changes to the formatting, you can do so through the CSS styles which will update the pages they apply to.
CSS can be created, edited and found in the Style menu of the Properties Inspector.
Creating a style sheet
You have now created a style; to create more, for example, one for titles, another for links etc., just repeat the above steps.
Applying styles to text
Once you have created your styles, you can use the CSS Styles palette to apply them to your text. Just select the text you want to apply one of your styles to, and select it from the palette.
If you take a look at the HTML code in code view, you will see that the CSS style sits within the <style> tag.
Some Tips
Bio - Hollie Miller
Hollie provides Dreamweaver Training for Acuity Training. In her spare time she loves to go to the gym and dress making.
Traditionally HTML tables or frames have been used to organise content on a websites but, using CSS layouts, you have far more flexibility by using <div> tags which enable you to insert content and then position them wherever you like.
Using CSS styles saves a lot of time since, once you have created the rules, all you have to do is apply them to your web pages rather than manually configuring all your formatting rules to each page one at a time. Equally, if you make any changes to the formatting, you can do so through the CSS styles which will update the pages they apply to.
CSS can be created, edited and found in the Style menu of the Properties Inspector.
Creating a style sheet
- To open the CSS Styles palette, click on Window>CSS Styles
- Click the ‘+’ icon to create a new style
- From the pop-up box, create a name for your style sheet, select Make Custom Style and click OK
- From the options, you can now create your custom style by giving it the properties you want for its appearance
- Click OK
You have now created a style; to create more, for example, one for titles, another for links etc., just repeat the above steps.
Applying styles to text
Once you have created your styles, you can use the CSS Styles palette to apply them to your text. Just select the text you want to apply one of your styles to, and select it from the palette.
If you take a look at the HTML code in code view, you will see that the CSS style sits within the <style> tag.
Some Tips
- a:hover for text rollovers – you can use this preset style for text rollovers by choosing the Use CSS selector from the New style sheet option. From the drop down menu select a:hover, choose your preferred formatting options and apply it to the text which you want to change the appearance of, when a mouse cursor hovers over it.
- Changing the appearance of links – by now you will know how to set the font, colour etc. of a hyperlink but, one thing that can really enhance the appearance of your website is to remove the automatic underlining of them. All you have to do is create a new style sheet and select the None check box to remove any decoration from selected text.
Bio - Hollie Miller
Hollie provides Dreamweaver Training for Acuity Training. In her spare time she loves to go to the gym and dress making.
No comments:
Post a Comment