Style Sheets

Cascading Style Sheets give you excellent control over the visual styling of your pages and allow you to reuse a page design easily. This tools aid you in the development of Websites- particularly when you are working within the realm of a rapid application development cycle. With the help of Style sheets you can define styles that control the position, size, visibility, and other attributes of all the elements in your site.

Creating Style Sheets

1. Click the CSS Styles tab in the Design panel group to open the CSS Styles panel.

   
   Figure-4.1

2. In the CSS Styles panel, click the New CSS Style button i.e. the plus sign (as shown in Figure-4.1, denoted by A).This brings up the New CSS Style dialog box, shown in Figure-4.2.

   
   Figy\ure-4.2

3. In order to add style to HTML tags, you can change Selector Type to tag. In the Tag drop-down list, select h1.
   
4. You can select New Style Sheet File in the define-in drop-down list as shown in Figure-4.3. When you've done that, click OK.

   
   Figure-4.3

5. As soon you click on Ok button, Dreamweaver asks you to define the name of New style sheet as shown in given Figure-4.4. Click the Save button after defining the file name.

   
   Figure-4.4

6. This brings up the CSS Style Definition dialog box as shown in Figure-4.5. Use this dialog box to specify the details of the style you are creating. You can create the tag color of your choice. To set it, select the type category. Then change the Color Property on the right either by clicking on the box or selecting from the color palette or by typing the color code into the box next to it.

   
   Figure-4.5

7. You can set the second of the style characteristics (the center -- alignment), first switch to the Block category and then set the text align setting to center, as shown in Figure-4.6.

   
   Figure-4.6

8. Click OK.

Now go to design view and see the effect immediately. Before you preview the page in a web browser, remember to save .htm file and if necessary, upload the new version of this file.

You can add more styles to your style sheet and can apply the same attribute, value settings to many different tags. In addition you can link your style sheet to the other pages in your website so that all of your web pages adopt the same styles.

Creating CSS Classes

The process of creating a class is virtually identical to the process of creating tag.

1. Click the New CSS style button in the CSS style panel.
   
2. In the resulting dialog box, Type shadow in the name field and choose class from selector Type. Define the new style in your home.css file as shown in Figure-4.7. Then click ok.

   
   Figure-4.7

3. In the CSS style Definition dialog box, Select the Background category and choose any color as background as shown in Figure-4.8. Then click ok.

   
   Figure-4.8

4. Now check your new class in the CSS Style panel attached to the style sheet.
   
5. In the property inspector, there is a field called style. Open the drop-down list, as shown in Figure-49 and select shadow from the style.

   
   Figure-4.9

6. After selecting Shadow, You should see the change in the text background.
   
7. Preview the page in your browser to check that it worked.