 |
 |
BasicsCascading Style Sheets - Formating the Webpage
How it Works
Historically there were a limited number of options when it came to formatting a webpage. There were simple tags like <b>...</b> which causes the text between the tags to appear as bold. One could also include attributes in a tag which would cause the text to be a particular size or color or font, such as <p color="red" font="Times" size="5">...</p>. In both cases one would have to enter this code wherever one wanted that feature, and if you wanted to change the features at a later time, one would have to find each occurraence of that format and change.
Cascading Style Sheets allow the webmaster to identfy the features of a text in a central location and apply that set of features to numerous text and when the webmaster changed the style sheet the new features would apply to all text wherever it had been set. So if you define the attritbutes of a paragraph with Times font and you wish to change it to Helvetica, you can change that feature in the style sheet and it will change wherever it was applied. Features of images and layout can also be defined in style sheets as well as text.
There are actually two different ways to create a Cascading Style Sheet. One can create the style within an HTML document and those styles will apply only to the features in the HTML document. These will appear in the <head> portion of the HTML document between the tags <style>...</style>. Below is an example of this method of creating styles.
<style type="text/css">The second and even more versatile method is to create a separate document which is linked to numerous webpages and when one makes a change in this style sheet, it will apply the change to wherever that style was applied on ALL the webpages that are linked to that style sheet. The code for connecting the external style sheet to a webpage is in the <head> portion of the HTML document and may look like this: <link href="yak.css" rel="stylesheet" type="text/css" />. The external style sheet itself would be named yak.css and may look something like this:
.test {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #C00;
}
</style>
@charset "UTF-8";
/* CSS Document */
a:link {
color: #660;
text-decoration: none;
}
.leftlink {
background-image: url(images/leftlink.jpg);
background-repeat: repeat-y;
padding-left: 15px;
margin-left: 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
While these examples have only talked about formatting text, one can also format images, the general layout of the entire webpage and more recently by using coding called CSS3 even generate animation and special effects.
In DreamWeaver
In DreamWeaver, one can create CSS Styles by first creating the style and then applying it to the feature. The steps typically are to go to Format in the Menu bar and select CSS Styles in the dropdown menu.
The first time and for each new style one chooses New. Typically there are three decisions to make at this point:
First, if the style type is a class it may be applied to more than one feature on a webpage, if it's an ID it may be applied to only one feature on the webpage such as a portion of the layout, if it's a tag then every time you use that tag the style will apply, or lastly a combination of the above.
Secondly one needs to name this style or choose the desired tag. Be carefully not to use terms that are already used in designing webpage, such as body which is already a tag <body>.
Thirdly one will decide if this style applies only to this webpage, that is, this HTML document, or if it will be on a separate external document which can be connected 
or linked to and apply to several webpages or HTML documents.
After clicking on OK, a new window will appear. On this window the options here will be discussed in other pages: text, images, and objects. There are also options in CSS3, that may not be included in all DreamWeaver programs.