CSS Styling for Text

CSS Styles: Dreamweaver CS4+ and CSS Styling for Text

Format your website text using CSS style sheets in Adobe Dreamweaver CS4+

Once you have completed the CSS & XHTML programming to build your site using Adobe Dreamweaver CS4+, 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+.

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+ & Fireworks CS4+ >> Site Layout Design

Step 6: CSS Styles for your website text using Dreamweaver CS4+

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+. 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:

Subheading

The subheading in your web page should be a H2 tag. Copy-paste the following style and make any necessary modifications:

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:

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:

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 CS4+ and CSS/XHTML website conversion with Adobe Dreamweaver CS4+. Learn CSS Web Design by following these simple steps:

Software Required

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!