- Website Design Tutorial
CSS Styles: Dreamweaver CS4/CS5 and CSS Styling for Text
Format your website text using CSS style sheets in Adobe Dreamweaver CS4/CS5
Once you have completed the CSS & XHTML programming to build your site using Adobe Dreamweaver CS4/CS5, you need to make your website text look cool using CSS Styling. On completing this tutorial series step you will have finished the cool website shown on the left.
As part of our free CSS website design guide this tutorial teaches you the important step of how to format your website text using CSS styles in Adobe Dreamweaver CS4/CS5.
Prerequisite Knowledge
You need to have some basic CSS programming knowledge. At least you need to read our CSS Styles Tutorial.
You Are Here ::: Home >> Free Tutorials >> Website design with Dreamweaver CS4/CS5 & Fireworks CS4/CS5 >> Site Layout Design
Step 6: CSS Styles for your website text using Dreamweaver CS4/CS5
So far you have learnt how to program your website's layout using Adobe Fireworks. Once you have programmed your website design, you need to format your website text using CSS style sheets in Adobe Dreamweaver CS4/CS5. For this you need to open the styles.css file you created in the previous step. Now add the following styles for formatting your web page text elements.
Title
The Title in the content area should be a H1 tag. Copy-paste the following style and make any necessary modifications:
h1 {font-size:24px; color:#330033; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin-top:0;}Subheading
The subheading in your web page should be a H2 tag. Copy-paste the following style and make any necessary modifications:
h2 {font-size:18px; color:CC3366; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}Subtitle
We have used a class style called subtitle to use on a few words within a paragraph of text. Copy-paste the following style for it:
.subtitle {font-weight:bold; color:#CC3366;}Links
To set the colors for any links in your content stylize the A tag and its hover property. To do this use the following styles:
a {color:#CC3366;} a:hover {color:#FFCCFF;}Great job! You have now completed the CSS style sheet for your website.
Open index.xhtml and Press F12 to view your completed web page design in the browser! Please check and verify if your website looks like our completed dreamweaver and fireworks website.
Congratulations on having successfully completed this tutorial series! Please continue to our Dreamweaver Templates Tutorial for you to convert this web page into a Dreamweaver Template (.DWT file) and then build the remaining pages of your website.
Back to: CSS and XHTML website programming || Dreamweaver Templates Tutorial
This free website design tutorial series teaches layout design with Adobe Fireworks CS5 and CSS/XHTML website conversion with Adobe Dreamweaver CS5. Learn CSS Web Design by following these simple steps:
- Introduction: Design a Website
- Layout Design: Design your website layout with Adobe Fireworks CS5
- Export Images: Slice and Export your website images with Adobe Fireworks CS5
- Dreamweaver Site: Set-up your website in Adobe Dreamweaver CS5
- CSS Tutorial: CSS & XHTML Programming to build your website with Adobe Dreamweaver CS5
- CSS Styles: Format your web site text using CSS style sheets in Adobe Dreamweaver CS5
Software Required
Compatible Versions of Dreamweaver for this Tutorial
Dreamweaver CS4 | Dreamweaver CS5/CS5.5
Note: For uses of lower versions of Dreamweaver, screenshot images may differ. Please read the CS3 and below version of this web design tutorial series - How to make a Website. Recommended Version: Dreamweaver CS5.5
