Cascading Style Sheets is something every webmaster should learn to use, however it can be complicated to code by hand. Fortunately, the built in Dreamweaver CSS tools make it simple as pie as you'll see in this introductory lesson.
Whether you are a total newbie when it comes to CSS or you are an expert, the built in Dreamweaver CSS tools can help you out a lot.
This tutorial is designed for the person who owns Dreamweaver, is curious about CSS and wants to learn how to put it to use.
CSS is not hard to learn and with the Dreamweaver point and click tools, it is easier than ever.
3 Types Of CSS:
You can have an internal, external, or inline css style sheet.
In this tutorial, I will discuss an external style sheet, which I think is the most useful when working on a website with more than 1 page.
To create an external stylesheet with Dreamweaver, simple click 'New' and under 'Basic Page' choose 'CSS'.
This will give you a blank style sheet.
The next thing you want to do is experiment and create 1 or 2 CSS definitions.
You might create a CSS definition called 'background1' and make the color green.
Then save the CSS style sheet as something like 'sample1.css'.
Next you would open an html file in the same folder that has some text in it and 'attach' the external style sheet.
You attach the sheet by selecting the 'Text' dropdown menu and choosing 'CSS Styles' then 'Attach Style Sheet'.
Once you have attached an external style sheet to a webpage, you can make changes to the external style sheet and change the content page. This is especially important if you have a website with multiple web pages.
The concept is, that by attaching an external style sheet to all of your web pages, you can update many web pages instantaneously by changing the one CSS style sheet that is attached to them.
In this manner, a large corporate website with 20,000 pages could be updated with new colors and fonts in less than 15 seconds!...Simply by changing the one external CSS style sheet.
So you see how useful CSS style sheets can be.
To get started, simply go into your HTML code after you have attached an external CSS sheet to your page in Dreamweaver. You can take any tag like a tag and start typing in a CSS class.
For example, . If you start adding a css class to any of these tags, Dreamweaver will start to auto-complete it for you and you can choose which class you want to add from a dropdown menu.
You can also use this to style page backgrounds, table backgrounds, fonts, and much more!
You only have to learn the fundamentals of CSS and then experiment with Dreamweaver and I promise you'll be capable of using CSS with Dreamweaver in a matter of a few hours.
To learn more about Dreamweaver and Cascading Style Sheets, you can watch step by step videos at http://www.dreamweaverhowto.com
Jay Gilbert offers step by step guides for people who want to sell info products online. Sign up for the free Dreamweaver tips training course.
