Make Money Online!
Hi, I'm Ben and I own Create a Great Website! I'm currently earning well over $1,500 plus per month online in my spare time, and I want to show you how you can do the same.
Fill out the form below and I'll send you my free guide to create a great website and how you can earn money online just like I do! You won't be disappointed.
Make Money Online!
Dreamweaver CS5
Cascading Style Sheets in Dreamweaver CS5
This tutorial introduces the use of cascading style sheets in Dreamweaver CS5.
Cascading Style Sheets (CSS) have revolutionized the formatting of web pages.
They are a collection of formatting rules that control all aspects of the appearance of a web page. They operate on all aspects for formatting, including text and paragraph formatting. Style sheets are portable and flexible.
The structure of Cascading Style Sheets is that there is a selector, a property and a value. A typical CSS statement looks like this:
body {background-color: #00FF00;}
This says that for the selector body (i.e. the body of the page) the property (its background color) has a value of #00FF00 (which is green).
With this basic structure there are then three ways of applying CSS.
1. Using an HTML attribute tag
Firstly, you can apply it by using the HTML attribute tag. In this case in the body of a web page the code might look like this.
<html>
<body style="background-color: #00FF00;"}
<p>This is the text in the page with the green background</p>
</body>
</html>
The <html> and </html> tags denote the start and end of the HTML code. The <body> and </body> tags denote the start and end of the body of the page.
In effect this style is "hard coded" into the page and we've declared it specifically to be green. To achieve the same result elsewhere we would do the same again.
2. Use a Tag Style
Secondly, we can actually create a Tag Style. In this example we effectively change what the body tag itself does to make the background green.
<html>
<head>
<style type="text/css">
body {background-color: #00FF00;}
</style>
</head>
<body>
<p>This is the text in the page with the green background</p>
</body>
</html>
This means that wherever the body tag is used in the active document it will have its background-color attribute set to green.
3. Use External Styles
This is the preferred way of using CSS, and the main way that we will be using it.
The approach is to gather all of the formatting information into a style sheet and then to keep this style sheet as a separate entity. It can then be attached (applied) to any web page.
Assuming that we have a style sheet called Test1.css, the HTML code needed in a page to use this style sheet would look like this.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test1.css" />
</head>
<body>
<p>This is the text in the page with the green background</p>
</body>
</html>
although this will only make the page background green if the style sheet actually contains the command that makes the body green.
Finally, we'll be looking at four types of styles, each of which has its uses. Here is a brief description of each.
1. A Class is a custom style that you can apply to a range or block of text. A Class has a name that begins with a period.
2. An ID is a style that is attached to a current HTML tag. ID names begin with a #.
3. A Tag style redefines a current style and attached it to a current HTML tag (like the body background color example above).
4. A compound style is used for formatting a specific combination of tags.
Don't worry if you can't remember these yet, or understand the differences, as we'll be covering that in the coming sections.
More Dreamweaver Tutorials
All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5
Find this website useful?
It will appear on your page as: Cascading Style Sheets in Dreamweaver CS5
Share this Webpage
This site proudly build with Site Build It!
