Dreamweaver Tutorial
Cascading Style Sheets are something every webmaster should learn to utilize, however it can be complicated to code manually. However, CSS is not hard to learn and with the Dreamweaver point and click tools, it is easier than ever. Whether you are new or an expert when it comes to CSS, the built in Dreamweaver CSS tools can help you out a lot. Dreamweaver Templates save you time when doing website design.
This tutorial is made for the person who owns Dreamweaver, is curious about cascading style sheets and wants to learn how to put it to use.
There are three (3) Types Of CSS: Internal, external, or an inline css style sheet.
To create an external style sheet 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 one or two CSS definitions.
You might create a CSS definition called ‘background’ and make the color red.
You then save the CSS style sheet as something like ’samples.css’.
Next, you would open an html file in the same folder that has some text in it and you 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.