Content

Sample files

Review the task ahead

The Citrus Café page before applying any styles.
Figure 1. The Citrus Cafe page before applying any styles.

Applying the basic styles

Persuading Internet Explorer to apply CSS to HTML5 tags

The JavaScript file can be served either from your site or from the Google Code content distribution network (CDN). The following instructions describe both methods.

  1. Open index.html in Code view, and select Source Code in the Related Files toolbar, if necessary, to view the HTML structure of the page.
  2. Create a new line immediately before the closing </head> tag.
  3. Click the Script button in the Common category of the Insert panel/bar, or select Insert > HTML > Script Objects > Script. This opens the Script dialog box.
  4. Click the Browse for folder icon alongside the Source text box, and navigate to the javascript folder in the Citrus Café site. Select htm5.js and click OK (or Choose on a Mac).
  5. Click OK to close the Script dialog box. The following code is inserted into the <head> of the page:
<script type="text/javascript" src="javascript/html5.js"></script>

This applies the local version of the script.

If you want to use the Google Code CDN, amend the src attribute like this:

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
  1. The only browsers that need this script are Internet Explorer 8 and earlier, so wrap the <script> tag in the following Internet Explorer conditional comment:
<!--[if lte IE 8]> <script src="javascript/html5.js"></script> <![endif]-->

Styling the body and logo

  1. Switch to Design view. Open the CSS Styles panel, and click the New CSS Rule icon at the bottom right of the panel to open the New CSS Rule dialog box.
  2. In the New CSS Rule dialog box, use the following settings:
    • Selector Type: Tag
    • Selector Name: body
    • Rule Definition: desktop.css

    All basic rules will be defined in desktop.css, so use this setting all the time until you start creating the alternative rules for different resolutions in Part 3.

  3. Click OK to open the CSS Rule Definition dialog box.

    In the Type category, set Font-family to Trebuchet MS, Arial, Helvetica, sans-serif, and color to black #000 .

    In the Background category, set Background-color to #66B034.

    In the Box category, set Margin and Padding to 0, and leave the Same for all check boxes selected.

    Click OK to create the style definition. The background turns a lime green, and the font is changed.

  4. Create a new CSS rule for the container <div> . This uses an ID, so set Selector Type in the New CSS Rule dialog box to ID, and Selector Name to #container. Click OK.
  5. In the Box category, set Width to 840px.

    Set Margin Top and Bottom to 0, and Right and Left to auto.

    Click OK. The page's content is centered in a fixed width.

  6. Position your insertion point inside the Citrus Café heading, and click <header#logo> in the Tag selector at the bottom of the Document window.
  7. Open the New CSS Rule dialog box. Dreamweaver should automatically select Compound as the Selector Type, and suggest #container #logo as the Selector Name. Click the Less Specific button once so the value in the Selector Name text box is just #logo, and click OK.
  8. In the Background category of the CSS Rule Definition dialog box, browse to images/lrg_logo.jpg for Background-image, and set Background-repeat to no-repeat.

    In the Box category, set Width to 100% and Height to 138px.

    When you click OK, the Citrus Café logo is inserted as a background image at the top of the page, but the <h1> and <h2> headings sit on top of it.

  9. Open the New CSS Rule dialog box. Set Selector Type to Compound, type #logo h1, #logo h2 in the Selector Name field, and click OK.
  10. Select the Positioning category in the CSS Rule Definition dialog box, and set Position to absolute, and Top to –500px minus 500 .
  11. When you click OK, the two headings should disappear. If Design view fails to refresh, press F5 or toggle Live view on and off.

    The text headings are no longer visible in a visual browser, but they will still be detected by search engines and screen readers for the blind.

  12. Select File > Save All Related Files to save your changes to the style sheet.

The top section of index.html should now look like Figure 2.

The logo is now in position, but the rest of the page content has moved up.
Figure 2. The logo is now in position, but the rest of the page content has moved up.

Styling the menu

Creating the basic menu styles

Let's begin by creating the basic menu before adding flourishes of CSS3 goodness.

  1. The first task is to move the menu below the logo. Your first instinct might be to add a top margin to the <nav> element, and Design view seems to share the same opinion, but Figure 3 shows what happens if you do.
Adding a top margin to the <nav> element pushes the logo away from the top of the page.
Figure 3. Adding a top margin to the <nav> element pushes the logo away from the top of the page.
  1. In the Box category of the CSS Rule Definition dialog box, set Padding Top to 150px, and deselect the Same for all check box.
  2. When you click OK, the menu moves below the logo in Design view.

    However, if you turn on Live view, the content below the menu moves up to obscure it. Let's fix that by creating a rule for the maincontent <div> .

    The <div> uses an ID, so set Selector Type to ID in the New CSS Rule dialog box. Set Selector Name to #maincontent.

  3. In the Box category of the CSS Rule Definition dialog box, deselect both Same for all check boxes. Set Padding Top and Bottom to 10px, and Padding Right and Left to 0. Set Margin Top to 80px, and click OK.

    There's still some overlap in Live view, but that will be eliminated when the menu items are floated.

  4. You can continue using the New CSS Rule and CSS Rule Definition dialog boxes, or work directly in the style sheet. To save time, here are the basic style definitions that need to be added to desktop.css:
ul { padding:0; margin:0; } nav ul { list-style: none; margin-bottom: 15px; font-weight: bold; font-size:20px; } nav ul li { float: left; } nav ul a { display: block; width:140px; padding: 10px; text-align:center; text-decoration: none; color: #fff; border: 1px solid #618A37; margin: 5px 0px; }
  1. Turn on Live view. The top of the page should now look like Figure 4.
The basic styles turn the unordered list into a series of buttons.
Figure 4. The basic styles turn the unordered list into a series of buttons.
  1. Save desktop.css.

Adding rounded corners to the menu

  1. In Dreamweaver CS5.5, open the CSS Styles panel and click the Current button.
  2. Activate Live view, and click one of the menu items. This should display the properties for the nav ul a style rule, as shown in Figure 5.
The CSS Styles panel in Current mode displays the properties for the menu buttons.
Figure 5. The CSS Styles panel in Current mode displays the properties for the menu buttons.
  1. Click the Add Property link at the bottom of the Properties pane in the CSS Styles panel, and select border-radius from the list. This adds a tiny icon that looks like a plus sign and a triangle in the field alongside (circled in Figure 6).
Click the icon to set the values for rounded corners.
Figure 6. Click the icon to set the values for rounded corners.
  1. Click the icon to display the border-radius settings. Make sure the “Same for all” checkbox is selected, and click the up arrow in the Top Left number stepper. With each click, the number increases by 1. At the same time, Live view applies rounded corners to the menu buttons, as Figure 7 shows.
Live view changes the size of the rounded corners in real time.
Figure 7. Live view changes the size of the rounded corners in real time.
  1. When you're satisfied with the rounded corners (8px seems about the right amount), click away from the settings panel to close it.

  2. Right-click the new listing for border-radius in the Properties pane of the CSS Styles panel, and select Go to Code. This opens desktop.css in Split view with the insertion point at the beginning of the line that defines the border-radius property.

    Select that line, as shown in Figure 8, and copy it to your clipboard.

Select and copy the border-radius style definition.
Figure 8. Select and copy the border-radius style definition.
  1. Paste border-radius property twice inside the nav ul a rule, so you have three copies of the same line.
  2. Edit the first instance of the border-radius property by prefixing it with -moz- like this:
-moz-border-radius: 8px;
  1. Edit the second instance by prefixing it with -webkit-. The nav ul a style rule should look like this:
nav ul a { display: block; width:140px; padding: 10px; text-align:center; text-decoration: none; color: #fff; border: 1px solid #618A37; margin: 5px 0px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }

Why do you need three versions of the same style definition? It's because browsers are introducing implementations of CSS3 properties incrementally, often on an experimental basis. Prefixing the property with -moz- for Firefox and -webkit- for Safari and Chrome ensures that the style rules are recognized by those browsers, but are ignored by others. The latest versions of all three browsers now recognize the official border-radius property, but you need the browser-specific versions to support older versions.

Internet Explorer and Opera also have their own prefixes: -ms- and -o- respectively. However, they’re not required for border-radius.

It's important the the official CSS3 property is listed last to ensure that the official version overrides the browser-specific version in browsers that support it. Because the browser-specific versions are sometimes experimental, you want to ensure that the stable, official version is applied to your styles wherever possible.

Adding a drop shadow to the menu

  1. With Live view active, click one of the buttons in the menu to select the nav ul a style rule in the Properties pane of the CSS Styles dialog box.
  2. To access the browser-specific properties, you need to switch to Categories view by clicking the icon at the bottom left of the CSS Styles panel (see Figure 9).
The browser-specific properties are listed only in Category view.
Figure 9. The browser-specific properties are listed only in Category view.
  1. Expand the Webkit category at the bottom of the Properties pane, and scroll down to find -webkit-box-shadow (the properties are in alphabetical order).
  2. Click the icon to open the panel where you make the settings. (It's the same icon as you used for the rounded corners.)
  3. Although Color is the last option in the panel, click the color box to open the color swatches panel. Then click the right-facing arrow at the top right of the swatches panel, and select Color Format > rgba() from the menu (see Figure 10).
Dreamweaver CS5.5 now supports all color formats in the CSS3 specification.
Figure 10. Dreamweaver CS5.5 now supports all color formats in the CSS3 specification.

    This changes the format Dreamweaver uses to specify color values, allowing you to set its alpha transparency.

  1. Use the eyedropper tool to select the black color swatch. This specifies the color as rgba(0,0,0,1), which is opaque black. You’ll change the transparency later.
  2. Now set X-Offset and Y-Offset to 1px, and Blur radius to 3px. As you make the changes, you can see the drop shadow being applied in Live view. Because the color is opaque black, it’s rather heavy, but it will come right as soon as you fix the transparency.
  3. Click away from the panel to close it. The value in the -webkit-box-shadow field should now look like this:
1px 1px 3px rgba(0,0,0,1)
  1. Click gently in the field to enable it for editing.
  2. Transparency in rgba() format is controlled by the final number, which must be between 0 (totally transparent) and 1 (totally opaque). Change the final number to 0.3 like this:
1px 1px 3px rgba(0,0,0,0.3)
  1. Press Enter/Return to save the change. The menu buttons should now have a subtle drop shadow, as shown in Figure 11.
Changing the opacity results in a subtle drop shadow.
Figure 11. Changing the opacity results in a subtle drop shadow.
  1. As with the rounded corners, you need to edit desktop.css to add the browser-specific property for Firefox and the official CSS3 property. Right-click the -webkit-box-shadow value in the Properties pane and select Go to Code.
  2. Copy and paste the -webkit-box-shadow property declaration twice, and edit it like this:
-moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px; -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px; box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

Adding a text shadow to the menu

  1. Click the third icon from the left at the bottom of the CSS Styles panel to display only those properties that have been set.
  2. Click one of the menu buttons in Live view to make sure the nav ul a style rule is still selected.
  3. Click the Add Property link in the Properties pane, and select text-shadow from the list.
  4. Click the icon to open the settings panel, and click the color box. Select the black color swatch. Dreamweaver remembers your choice of rgba().
  5. Set X-Offset, Y-Offset, and Blur radius to 1px each, and click away from the settings panel to close it.
  6. Gently click the value in the text-shadow field to edit it, and change the transparency to 0.8.
  7. Press Enter/Return to save the change. The menu should now look like Figure 12.
Adding the text shadow makes the menu pop.
Figure 12. Adding the text shadow makes the menu pop.
text-shadow: 1px 1px 1px rgba(0,0,0,0.8)

Adding transitions to the menu buttons

  1. Add the following style definitions to desktop.css:
nav ul a:link, nav ul a:visited { background: rgba(255,255,255,0.2); } nav ul a:hover, nav ul a:active, nav ul a:focus { background: rgba(255,255,255,0.4); }
  1. Now for the final CSS3 flourish. Create the following style rule:
nav ul li:hover { margin-top:-10px; }

    This moves each menu button 10 pixels up when you hover over it.

  1. The movement is abrupt, but the CSS3 transition properties can smooth the movement. Amend the nav ul li rule like this:
nav ul li { float: left; -webkit-transition-duration:.5s; -webkit-transition-property:margin-top; -webkit-transition-timing-function:ease-in-out; -o-transition-duration:.5s; -o-transition-property:margin-top; -o-transition-timing-function:ease-in-out; -moz-transition-duration:.5s; -moz-transition-property:margin-top; -moz-transition-timing-function:ease-in-out; transition-duration:.5s; transition-property:margin-top; transition-timing-function:ease-in-out; }
  1. Save desktop.css.

Note: All the main browsers, except Internet Explorer (including version 9), now support the transition properties.

Completing the main styles

Styling the mission statement

The mission statement is in an <article> element that has an ID, so you can use an ID selector to style it.

  1. In desktop.css, create the following style rule:
#vision { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:32px; font-weight:bold; background-image:url(../images/lrg_hero.jpg); background-repeat:no-repeat; }

  1. You now need to work out how much padding to put around the text, and deduct it from the width and height of the image. After experimenting, I decided to put 40px on the left and 370px on the right, a total of 410px. Deducting that from the 819px of the image leaves 409px for the width. I also put 60px of padding on the top, but none on the bottom. That leaves 237px for the height. So, although the background is 819 x 297, the height and width of the content is 409 x 237.

    The background shows through the padding around the content. You need some space below the background image, so add a bottom margin of 20px. Also adjust the vertical spacing of the text by setting line-height to 1.2. The amended style rule should look like this:

#vision { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:32px; font-weight:bold; line-height:1.2; background-image:url(../images/lrg_hero.jpg); background-repeat:no-repeat; width: 409px; height:237px; padding:60px 370px 0 40px; margin-bottom:20px; }

Styling the pods

  1. In desktop.css, create the following class definition:
.pod { background: #fff; padding: 10px; width: 244px; float:left; margin-right: 13px; }

This gives the pods a white background with 10px of padding all round. The width of each pod is set to 244px, but the 10px padding on either side makes the overall width 264px. Adding 13px of margin to the right of each pod creates an overall width of 831px. However, the final 13px margin can be ignored because the background shows through margins. So, the overall width of the three pods floated side by side will be 818px, just one pixel different from the overall width of the background image for the mission statement.

The 13px right margin on the final pod doesn't need to be removed because the space available within the container <div> is 840px.

  1. Turn off Live view, if necessary, and click inside the "Today's specials" heading of the first pod.

    Click <section> in the Tag selector to select the entire pod, and apply the pod class from the Class pop-up menu in the Property inspector in HTML mode.

  2. Repeat the previous step with the "Events" and "News" <section> elements.

    The first two pods float alongside each other, but the "News" pod is pushed down the page, because the images protrude from the first two (see Figure 13).

The images are too wide for the pods.
Figure 13. The images are too wide for the pods.
  1. Fix the problem with the protruding images by adding the following class definition to desktop.css:
.podContent { margin-top:10px; width: 244px; height:181px; overflow:hidden; }
  1. In Design view, select the photo of the salad in the first pod. Then select <figure> in the Tag selector.

    The Class pop-up menu in the Property inspector displays pod because the value is inherited. Reset the value of the pop-up to podContent. The image is now constrained inside the pod.

  2. Repeat the previous step with the photo of the Café tables.
  3. Put your insertion point inside one of the paragraphs in the "News" pod, and click <article> in the Tag selector. Apply the podContent class to it.

    The three pods now line up, as shown in Figure 14.

After the images have been constrained, the pods line up.
Figure 14. After the images have been constrained, the pods line up.
  1. With the insertion point inside the third pod, click <section.pod> in the Tag selector.

    Type news in the ID text box in the Property inspector, and press Enter/Return to confirm the change.

  2. You can now create two descendant selectors to target the content in the "News" pod. Add the following definitions to desktop.css:
#news .podContent { margin-top:12px; overflow:auto; } #news .podContent p { margin-top: 5px; margin-bottom: 5px; margin-left:6px; font-size:15px; }

    These rules override the overflow property in the other two pods, and adjust the formatting of the paragraphs.

  1. Fix the headings in the pods by adding the following definition:
.pod h1 { background: #CCC; color: #000; padding:5px; background-image:url(../images/icon_chevron.png); background-repeat:no-repeat; background-position:95%; font-size:16px; font-weight:normal; margin: 0 0 10px 0; }
  1. Because the headings are wrapped in links, you need to create a class to remove the underline. It's also recommended to set the display property to block when you wrap block-level elements in links. Add the following definition to the style sheet:
a.block { text-decoration:none; display:block; }
  1. Put your insertion point inside one of the headings, and click in the Tag selector. Apply the block class using the Class pop-up menu in the Property inspector.
  2. Repeat with the other two headings in the pods.
  3. One last tweak for the pods: the dates in the "News" pod are wrapped in <time> elements. Set the font-weight property to bold and give each element a uniform width like this:
time { font-weight:bold; display:inline-block; width:2.5em; }

Setting the display property to inline-block applies the width to the

Styling the footer

The styles for the footer are very straightforward, so don't need any explanation.

  1. Add the following style definitions to desktop.css:

footer { padding: 10px 0; clear:both; color: #fff; } footer p { margin:0 0 5px 0; } #phone { font-weight:bold; color: #000; } #facebookTwitter { float:right; margin-right:25px; }
  1. Click inside the phone numbeClick inside the phone number, and select <p> in the Tag selector.
  2. Click the down arrow to the right of the ID text box in the Property inspector, and select phone from the list that appears. There's only one unused ID selector in the style sheet, so it should be the only one listed.
  3. Select File > Save All Related Files.

In Live view, your page should now look like Figure 15.

The completed HTML5/CSS3 page.
Figure 15. The completed HTML5/CSS3 page.

That completes Part 2 of this three-part tutorial series. In Part 3, you'll use CSS media queries to optimize the page for devices with lower screen resolutions, such as mobile phones and tablets.