STEP 2 – Create CSS

You should create a CSS file and then the HTML file. In the CSS file, you create the styles that are later implemented in the associated HTML file.

Run Dreamweaver CS4.

A common practice is to save the CSS styles in a separate file called style.css and in a folder called css in the project space.

To create a CSS file, click New – File… option from the main menu.

The New Document dialog box appears. Retain the default selection of Blank Page. In the Page Type: group box, click CSS , and then click the Create button.

 

 

Dreamweaver 4 creates and opens a blank and untitled CSS file for you. Save the CSS file with the name, style.css in the css folder of the project space. To do that, click File – Save from the main menu.

In the Save As dialog box, locate the project space using the drop-down box. In this tutorial, we are using D:\Tableless_Site as the project space.

Click the Create New Folder button to create a new folder.

 

 

When the New Folder appears in the folder list, rename it as css.

Double-click css folder to make it the current folder.

Type style.css in the File name: text field and click the Save button. You have therefore, saved the CSS file, style.css in the D:\Tableless_Site\css folder.

You are now ready to populate the style.css file with appropriate styles using tags and parameters.

The body tag is the first tag that you should create in style.css. Using body tag, you can define the style of the body of the associated HTML page. In other words, the body of the HTML page which is associated with this tag would have the same style as what is defined in the body tag.

You start defining the body tag in the style.css file by typing:

This code denotes that the complete body would be covered by bg.jpg. As the body is wider than bg.jpg, the multiple copies of the image will get spread across the body until all the area is filled up. You have created a background for the Website. All the other images and text area would be later placed on top of the image. The margin:0 code ensures that there will be no white space around the bg.jpg image.

A feature of Dreamweaver CS4 that is worth mentioning here is code completion feature. As soon as you start typing a parameter, the code completion feature shows the available parameters in a list box and lets you select the one you want along with the value.

 

 

In the above image, Dreamweaver CS4's code completion feature is showing all the available parameters for the body tag.

 

 

In the above image, Dreamweaver CS4's code completion feature is showing the Select File dialog box, using which you can select the image from the image folder of the project space.

In this tutorial, we will ask you to type the code rather than using the code completion feature. You may however use this feature if you are comfortable with it.

Like the body tag, another tag which you should define is the a tag. The a tag style controls the style of all the links on the Web page. To declare the a tag, type:

The above code sets the font family and size along with the color of the links.

After creating the body and a tags, you add the div tags to CSS file.

A div tag divides the corresponding HTML page into sections. In the CSS file, you can add style parameters to each of these div tags. The process of adding the style parameters in the CSS file is same as that of the body and a tags.

The div tags that we shall use in our example are:

· mainContent – Used for adding style to the main text that appears on the Web page.

• · menu – Used for adding style to the first menu.
• 
  
• · search – Used for adding style to the search block.
• 
  
• · menumiddle – Used for adding style to the second menu.
• 
  
• · footer – Used for adding style to the footer.
• 
  
• · container – Used for adding style to the vertical middle column of the Web page. All the above components are added in the container.

You add the mainContent div in the style.css file by typing:

A div tag declaration is preceded by a hash (#) symbol. The padding parameter in the above code denotes that the area controlled by mainContent div will have no white border at the top and 20 pixel border on left and right. The text within this area would be of font-family, Verdana, Geneva, sans-serif and size, 12 pixels.

You add the menu div along with three variations in the style.css file by typing:

The menu div code denotes that it is composed of lower_bg.jpg and the image is justified to the right. The width attribute denotes that the image will horizontally occupy 100% of the menu area.

The menu ul div sets the style of the menu item list within the menu area. Both the margin and padding of the menu ul is set to 0. In other words, the outer and inner borders of the menu ul div will have top border of size 0 pixel, bottom top of size 0 pixel, right border of size 0 pixel, and left border of size 0 pixel. The menu ul is right-justified and there is no bullet style (list-style: none) associated with the list.

The menu li div sets the style of the menu items. The items are designed to float to the left and margin:auto denotes that the outer border depends on the browser. The padding-top:5px denotes that the inner border on the top is 5 pixel thick. The bottom margin is 4 pixels and the left margin is 15 pixels. The top and right margins are 0 pixels.

The menu a div sets the style of all the links within the menu area. The display:block attribute creates a block around the linked element. The width of the element is decided by the browser. The height of the element is 22 pixels. The text-decoration:none attribute defines that the linked element will not be shown supporting any style. The default text-decoration for links is underline.

The search div creates the search area with the text field and Search button. You add the search div for styling the search area in style.css file by typing:

The padding parameter in the above code denotes that the search area 20 pixel border on top. The font of the text within this area would be Verdana, Geneva, sans-serif and size, 13 pixels.

Add menumiddle div along with three variations in the style.css file by typing:

The menumiddle div code denotes the second-level menu on the Web page. The structure of menumiddle div is similar to menu div. The menumiddle div is used for defining style properties of the menu area. The menumiddle ul div defines the style for the menu list. The menumiddle li div is for styling each item within the menu list. The image of the drop-down arrow (middle1.jpg) is also assigned to each item using this div. The menumiddle a div is for assigning style to each linked element in the menu.

Add footer div in the style.css file by typing:

The footer div defines the style of the footer area. Like other divs, the footer is defined using padding and margin attributes.

The last div that you need to create is container. Type:

The container div defines the container which holds all the above divs you have defined.

Figure 4: Complete CSS File

 

Save the style.css by clicking the File – Save option from the main menu.

 

< Prev		Next >