Dreamweaver Training NYC Blog

Dreamweaver Training New York wrote a free tutorial for beginners to learn cascading style sheets (CSS) with Adobe Dreamweaver and we are reposting it here to recommend you read the article. To learn CSS for web design we recommend you register for Dreamweaver training.

Search engines have always shown a preference for CSS based layout over table, based layout. CSS allows you to separate your design from your content. Old-school web design taught to control placement of text and graphics using tables. The purpose of tables is to organize tabular information into rows and columns. Tables would be appropriate for an income statement or balance sheet showing financial data, and tables can and should be used in database-driven web sites. CSS separates the content (text and images) from the layout (color, size, position). The reason CSS is cascading is because the CSS can be in three locations: an external file, in the html document head, or inline in the html body. The specificity of CSS says start with the formatting in the external file, but if the same rule is defined in the html head then add the additional formatting on top of the external CSS rule. While many designers have begun to use CSS layout, most do it incorrectly. Good CSS layout should only require 50-60 rules to accomplish all formatting, anything more should be considered CSS sprawl.

CSS is comprised of three selectors: tag, class and id. There is a fourth hybrid selector called compound that combines any two or more selectors. Each selector is comprised of properties (color, size, position.). CSS is similar to using paragraph and character styles in ms word or Adobe InDesign.

To better understand CSS, this tutorial will create the NY SEO Expert website.

For instructions on the define a site process refer to our earlier blog post on How to Define a Website with Adobe Dreamweaver

To download the files required to follow this tutorial, click here.

Add a new file to the site and name it index.htm. For instructions on how to add a file to your site, review this post.

1. Open the new index.htm file and set the page properties:
   1. In the Appearance category:
      1. Set all margins to zero.
      2. Set the background color to: #1b2429 (The dark blue/grey in the photoshop file; The hexadecimal code was obtained using the eyedropper tool to sample the darker color).
   2. In the Title/encoding category:
      1. In the Title box type:
      2. IT Company – Developing Ideas – IT Solutions – Computer Help – Call 212 555 1212
2. In order to define the CSS Advanced ID Div tags you need to divide the Photoshop document into pieces and measure the width and height of boxes using the ruler tool.
   1. Use the image menu > image size command to get the width and height of the finished page; You should see the width is 775 pixels and the height is 680 pixels.
   2. Measure the distance from the top of the page to the bottom horizontal rule below the tagline that reads SOLUTIONS FOR A DIGITAL WORLD, this will be the header div. I measured the height as roughly 172 pixels but just round that off to 170 pixels to simplify measurements.
   3. Measure the distance from the top of the page to the top of the logo; I measured it as 22 pixels.
   4. Measure the distance from the left edge of the page to the left edge of the logo; I measured roughly 10 pixels. Measure the width and height of the logo; I measured the width as 230 pixels and the height as 55 pixels.
   5. To the right of the logo, measure the width and height of the colored rectangle with the Home, Help and Site map text; I measure the width as 485 pixels and the height as 86 pixels, which I round off to 85 pixels; Also, use the eyedropper to get the hex color for the blue/grey; I measured #282f39. This will be the background color of the HeaderRightBox div.
   6. Measure the height of the orange menu bar; I measured 39 pixels but will round off to 40 pixels for simplicity. Also measure the distance from the bottom edge of the menu bar to the top edge of the horizontal white line above the tagline; I measured 10 pixels; This will be the bottom margin of the menu div. Also, use the eyedropper to get the hex color for the orange; I measured #d7350f. This will be the background color of the menu div box.
   7. Measure the distance from from the top white horizontal line to the bottom horizontal white line surrounding the ‘tagline’ text “SOLUTIONS FOR A DIGITAL WORLD”; I measure the height as 30 pixels. This will be used for the height of the tagline div. Also, measure the distance from the bottom of the horizontal white line below the SOLUTIONS text to the top of the white box with Services Overview; I measured roughly 10 pixels; This will be the bottom margin for the tagline div.
   8. Measure the width and height of the left column, from the top of the picture of the couple to the bottom edge, just above the orange footer bar; Measure the width but stop where the colors shift; Also, use the eyedropper to sample the blue/grey background color. I measured the height as 430 pixels and the width as 240 pixels. I measured the color as #282f39
   9. Measure the width and height of the right column (the white rectangle); I measured the width as 495 pixels and the height as 430 pixels;
   10. Measure the height of the orange footer bar and use the eyedropper to sample the orange color; I measured the height as 65 pixels; I measured the color as #d7350f
   11. Now we will use these measurements to create the CSS Advanced ID selectors in Dreamweaver. We’ll need to return to measurements again later to determine the margins of all the text
3. In Dreamweaver, at the bottom of the CSS panel, click the + button to add a new CSS rule. In the New CSS Rule dialog, change the selector type to Advanced ID, type #wrapper for the name and Define In This Document Only; Click the OK button to display the CSS Properties Dialog;
   1. In the CSS Properties dialog, change the category to Box;
   2. Set the width of the box to 100% (not pixels) and click the OK button.

4. Insert the wrapper div onto the page; From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command; In the Insert Div Tag dialog set Insert to: At Insertion Point set the ID to: wrapper and click the OK button

5. Now we will define the box for the header; The header will contain the logo box, the HeaderRightBox, the menu box and the tagline box;
   At the bottom of the CSS panel, click the + button to add a new CSS rule.
   In the New CSS Rule dialog:
   change the selector type to Advanced ID
   type #header for the name
   Define In This Document Only;
   Click the OK button to display the CSS Properties Dialog;

   1. In the CSS Properties dialog, change the category to Box;

   2. click the OK button.
6. Insert the header div onto the page nested inside the wrapper;
   Triple Click the place holder text inside the wrapper to select it; Press the delete or backspace key to remove it; DO NOT CLICK ANYWHERE ON THE PAGE
   From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
   In the Insert Div Tag dialog set Insert to: At Insertion Point
   set the ID to: header
   Click the OK button
7. Now we will define the logo div;
   At the bottom of the CSS panel, click the + button to add a new CSS rule.
   In the New CSS Rule dialog:
   change the selector type to Advanced ID
   type #logo for the name
   Define In This Document Only;
   Click the OK button to display the CSS Properties Dialog;
   1. In the CSS Properties dialog, change the category to Box;
   2. Set the width of the box to 230 pixels;
      Set the height of the box to 55 pixels;
      Set the Float to Left;
      Uncheck Margins: Same for All;
      Set the Top Margin to 22 pixels;
      Set the Left Margin to 10 pixels;
      click the OK button.
      Set the width of the box to 775 pixels;
      Set the height of the box to 170 pixels;
      Uncheck Margins: Same for All;
      Set the Left and Right margin to Auto;
      Save the webpage.
8. Insert the logo div onto the page nested inside the header div;
   Triple Click the place holder text inside the header div to select it; Press the delete or backspace key to remove it; DO NOT CLICK ANYWHERE ON THE PAGE
   From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
   In the Insert Div Tag dialog set Insert to: At Insertion Point
   set the ID to: logo
   Click the OK button
9. Now we will define the HeaderRightBox div;
   At the bottom of the CSS panel, click the + button to add a new CSS rule.
   In the New CSS Rule dialog:
   change the selector type to Advanced ID
   type #HeaderRightBox the name
   Define In This Document Only;
   Click the OK button to display the CSS Properties Dialog;
   1. In the CSS Properties dialog, change the category to Box;
   2. Set the width of the box to 485 pixels;
      Set the height of the box to 85 pixels;
      Set the Float to Right;
      In the Background Category:
      Set the Background Color to: #282f39
      click the OK button.
10. Insert the HeaderRightBox div onto the page nested inside the header div after the logo div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select #logo;
    set the ID to: HeaderRightBox
    Click the OK button
11. Now we will define the menu div;
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #menu the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
    2. Set the width of the box to 775 pixels;
       Set the height of the box to 40 pixels;
       Set the Clear to: Both
       Uncheck Margins: Same for All;
       Set the bottom margin to 10 pixels;
       In the Background Category:
       Set the Background Color to: #d7350f
       click the OK button.
12. Insert the menu div onto the page nested inside the header div after the HeaderRightBox div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select # HeaderRightBox;
    set the ID to: menu
    Click the OK button
13. Now we will define the tagline div;
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #tagline the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 775 pixels;
       Set the height of the box to 30 pixels;
       Uncheck Margins Same For All;
       Set the Bottom Margin to 10 pixels;
       In the Border Category:
       Uncheck all the boxes: Same for all
       In the Style column:
       Change the Top and Bottom to Solid
       In the Width Column:
       Type 1 pixel for Top and Bottom
       In the Color Column:
       Set the Top to White and the Bottom to White
       In the Block Category:
       Set the Text Align to Center
       click the OK button.
14. Insert the tagline div onto the page nested inside the header div after the menu div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select # menu;
    set the ID to: tagline
    Click the OK button
    Save the web page.
15. Now we will define the container div; The container div will contain the left and right column divs
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #container the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 775 pixels;
       Set the height of the box to 430 pixels;
       Uncheck Margins: Same for All;
       Set the Left and Right Margin to Auto;
       click the OK button.
16. Insert the container div onto the page below the header div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag
    To the right, select # header;
    set the ID to: container
    Click the OK button
17. Now we will define the leftcolumn div; The leftcolumn div will be nested inside the container.
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #LeftColumn the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 240 pixels;
       Set the height of the box to 430 pixels;
       Set the Float to: Left
       In the click Background category:
       Set the Background Color to: #282f39
       Click the OK button.
18. Insert the LeftColumn div onto the page inside the container div;
    Select the Placeholder text in the container div (Triple click it) and press the delete or backspace key;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: At Insertion Point;
    set the ID to: LeftColumn
    Click the OK button
19. Next we will define the RightColumn div; The RightColumn div will be nested inside the container after the left column.
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #RightColumn the name
    Define In This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 495 pixels;
       Set the height of the box to 430 pixels;
       Set the Float to: Right
       In the click Background category:
       Set the Background Color to: #FFFFFF (white)
       Click the OK button.
20. Insert the RightColumn div onto the page inside the container div after the LeftColumn div;
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag;
    To the right, select # LeftColumn;
    set the ID to: RightColumn
    Click the OK button
21. The final step in part 1 is to create the footer box. The footer will appear after the container div.
    At the bottom of the CSS panel, click the + button to add a new CSS rule.
    In the New CSS Rule dialog:
    change the selector type to Advanced ID
    type #footer the name box
    Define In: This Document Only;
    Click the OK button to display the CSS Properties Dialog;
    1. In the CSS Properties dialog, change the category to Box;
       Set the width of the box to 795 pixels;
       Set the height of the box to 65 pixels;
       Uncheck Margins: Same for All;
       Set the Left and Right Margin to Auto;
       In the click Background category:
       Set the Background Color to: #d7350f
       Click the OK button.
22. Insert the footer div onto the page below the container div :
    From the Insert Bar, on the Common tab, click the Insert Div Tag button (or use the Insert menu > Layout Objects > Div Tag command;
    In the Insert Div Tag dialog set Insert to: After Tag;
    To the right, select #container;
    set the ID to: footer
    Click the OK button
    Save the web page.