No prior knowledge of HTML5 or CSS3 is required, but you should have a good understanding of HTML 4.01 (or XHTML 1.0) and CSS2.1. Familiarity with the Dreamweaver user interface (UI) is assumed.

User level

All

Required products

Dreamweaver (Download trial)

Sample files

This is Part 2 of a three-part tutorial series exploring the HTML5 and CSS3 features in Dreamweaver CS5.5. Part 1 shows how to build a web page for a fictional restaurant, Citrus Cafe, using HTML5 structural elements, such as <header>, <footer>, <nav>, <section>, and <article>. In this part, you'll style the page using CSS3 properties —such as text and box shadows and rounded corners—using new tools in the Dreamweaver CS5.5 CSS Styles panel. These properties are widely supported in modern browsers, but you need to use browser-specific properties in combination with the official properties to ensure the widest possible support.In this tutorial, you'll learn how to access the browser-specific properties in the Dreamweaver CS5.5 code hints. You'll also learn how to persuade Internet Explorer to apply styles to the new HTML5 structural elements.

After styling the page for display on a desktop computer, you'll learn in Part 3 how to add CSS media queries to optimize the styles for a tablet device and mobile phone using a site-wide media queries file.

Review the task ahead

In Part 1 of this tutorial series, you built the web page for the Citrus Cafe site using HTML5 structural markup. If you didn't complete Part 1, you should do so before continuing with this part. Alternatively, you can use the download files for this part, citrus_pt2_start.zip. When unzipped, define a Dreamweaver site called Citrus Café with the citrus folder as the local site folder. Use index.html in the site root and desktop.css in the css folder as your work files. The completed files are in the completed folder.

The Citrus Cafe web page is currently completely unstyled, but the content follows a logical structure, which makes it accessible and search engine friendly (see Figure 1).

The Citrus Café page before applying any styles.

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

You now need to style the page with CSS, first for display in a desktop computer. These styles will form the basis for two other style sheets that optimize the page display for screens with smaller resolutions, such as tablet devices and mobile phones. The supplementary styles will be applied using CSS media queries to limit their application depending on the detected screen resolution. Not all browsers support CSS media queries, so it's important to have one style sheet that can be understood by all browsers. That's the style sheet you'll create in this part of the tutorial series.

Applying the basic styles

Although index.html uses HTML5 structural elements that hadn't even been thought of when Internet Explorer 6 was released in 2001, the unstyled page displays correctly in that ancient browser. However, once you start adding CSS to the page, not only Internet Explorer 6, but also Internet Explorer 7 and Internet Explorer 8 fail to apply style rules to the new elements. Fortunately, a little bit of JavaScript magic cajoles these miscreants into compliance. The script keeps Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 happy by creating dummy HTML5 structural elements in the page's Document Object Model (DOM), persuading them to render the styles as expected. So, the first task is to add the script to the <head> of the page.

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.

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.
Create a new line immediately before the closing </head> tag.
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.
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).
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"

Note: Using a local version of the script ensures that the file is always available. Serving the file from a CDN runs the risk (admittedly a small one) that the remote server might not be available, but it has the advantage that the file might already be in the user's browser cache as a result of visiting another site. Since the script is only 2 KB, downloading the file from either source is unlikely to affect the speed of your page.

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]-->
    

This ensures that the script is downloaded only by Internet Explorer 8 or earlier. Other browsers ignore it although it doesn't do any harm if they download it, too .

If anyone visits your site with JavaScript disabled in Internet Explorer 8 or earlier, the HTML5 structural elements won't be styled, but the rest of the page will be. If a significant part of your target audience is likely to be using Internet Explorer with JavaScript turned off, you should replace the HTML5 structural elements with <div> elements or wrap them in <div> elements, and apply the CSS to the <div> elements.

Note: This script must be included in the <head> of the page. It won't work if you add it before the closing </body> tag.

Styling the body and logo

The <header> section contains two heading elements for the main heading and subtitle. This is necessary for search engines and screen readers for the blind. For display in visual browsers, the HTML text will be replaced by a stylized logo with the text in an image.

Note: Instead of using an image for the text, you could use a web font using an @font-face rule. Dreamweaver CS5.5 now supports @font-face rules in Live view. However, using web fonts is really the subject of a separate tutorial. Although they're not difficult to use, you need to be aware of complex matters such as licensing and the font formats supported by different browsers.

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.
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.
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.
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.
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.
Position your insertion point inside the Citrus Café heading, and click <header#logo> in the Tag selector at the bottom of the Document window.
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.
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.
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.
Select the Positioning category in the CSS Rule Definition dialog box, and set Position to absolute, and Top to –500px minus 500 .
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.
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.

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

Moving the headings out of the way has resulted in the rest of the page content moving up, with the menu sitting on top of the logo. You'll fix that next.

Styling the menu

Styling an unordered list for a menu is now widely accepted as one of the most accessible ways of adding site navigation. Thanks to new CSS3 properties being adopted by many browsers, it's possible to achieve effects that previously relied on images and JavaScript.

Creating the basic menu styles

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

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.

Figure 3. Adding a top margin to the <nav> element pushes the logo away from the top of the page.

This doesn't have anything to do with the use of HTML5. It's the old story of adjacent vertical margins merging in CSS. The <header> element has no top margin and the <h1> and <h2> headings have been removed from the flow by absolute positioning, so adding a top margin to the <nav> element pushes the <header> from the top of the page, bringing the background images with it.

Backgrounds are displayed through padding, so the solution is to use padding.

In the New CSS Rule dialog box, set Selector Type to Tag, and select nav from the Selector Name pop-up menu (all the HTML5 elements are listed). Click OK to open the CSS Rule Definition dialog box.

In the Box category of the CSS Rule Definition dialog box, set Padding Top to 150px, and deselect the Same for all check box.
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.
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.
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;
}
    

Turn on Live view. The top of the page should now look like Figure 4.

Figure 4. The basic styles turn the unordered list into a series of buttons.

Save desktop.css.

Adding rounded corners to the menu

This is where users of Dreamweaver CS5.5 and CS5 go their separate ways. The CSS Styles panel in Dreamweaver CS5.5 has new features that make it easy to add rounded corners with CSS. If you’re following this tutorial in Dreamweaver CS5, you need to work in Code view, adding the styles manually to desktop.css.

In Dreamweaver CS5.5, open the CSS Styles panel and click the Current button.
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.

Figure 5. The CSS Styles panel in Current mode displays the properties for the menu buttons.

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).

Figure 6. Click the icon to set the values for rounded corners.

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.

Figure 7. Live view changes the size of the rounded corners in real time.

When you're satisfied with the rounded corners (8px seems about the right amount), click away from the settings panel to close it.
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.

Figure 8. Select and copy the border-radius style definition.

Paste border-radius property twice inside the nav ul a rule, so you have three copies of the same line.
Edit the first instance of the border-radius property by prefixing it with -moz- like this:

-moz-border-radius: 8px;

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

In Dreamweaver CS5.5, you apply drop shadows in the same way as rounded corners (in CS5, you still need to hand-code the styles). However, Live view doesn’t yet support the official CSS3 box-shadow property. So, you need to start with -webkit-box-shadow.

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.
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).

Figure 9. The browser-specific properties are listed only in Category view.

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).
Click the icon to open the panel where you make the settings. (It's the same icon as you used for the rounded corners.)
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).

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.

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.
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.
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)

Click gently in the field to enable it for editing.
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)

Press Enter/Return to save the change. The menu buttons should now have a subtle drop shadow, as shown in Figure 11.

Figure 11. Changing the opacity results in a subtle drop shadow.

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.
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

The text-shadow property was originally part of the CSS2 specification, but it was dropped because of lack of browser support. Ironically, once that happened, browsers started to support it. So, text-shadow is back in CSS3, and because of its CSS2 pedigree, it doesn’t need a browser-specific prefix. Dreamweaver CS5.5 applies it through the CSS Styles panel in the same way as rounded corners and drop shadows, but CS5 users need to keep on hand-coding.

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

Figure 12. Adding the text shadow makes the menu pop.

Note: If you're using Dreamweaver CS5, you need to add the following property manually to the nav ul a style rule:

text-shadow: 1px 1px 1px rgba(0,0,0,0.8)

Adding transitions to the menu buttons

The final additions to the menu buttons apply a translucent white background with a different level of transparency in the hover state, together with an animation effect. The easiest way is to hand-code the style definitions in the style sheet.

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); 
} 

    

These two rules add a translucent white background to the menu buttons using the rgba() color format. In their normal or visited state, the white background has an opacity of 20%. When in the hover, active, or focus states, the opacity increases to 40%, adding a highlight effect to the buttons.

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.

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; 
} 

    

It looks like a lot of typing, but there are three basic properties: transition-duration , transition-property , and transition-timing-function . You need to use the browser-specific properties, but they're all the same apart from the prefix, and they all take the same values.

This sets the duration of the transition at half a second, and applies it to margin-top, easing (slowing down) the transition at the start and finish.

Save desktop.css.

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

Completing the main styles

The remaining parts of the page use standard CSS2.1. The main points to notice concern the background to the restaurant's mission statement, and the smaller images in the pods.

The background image to the mission statement (lrg_hero.jpg) is 819 pixels wide and 297 pixels high. However, the text needs to be constrained to the left side by padding. Because padding is added outside the content of an element, you need to subtract the value of the padding from the width applied to the <div> element.

The other point is that there are three pods under the mission statement. That leaves only 273 pixels for each pod, including the gaps between them. However, the images in the first two pods are both 302 pixels wide. They have been made that size because med_hero.jpg, the background image that will be used in the design optimized for tablet devices is 669 pixels wide. In the tablet design, there will be just two pods under the mission statement, so the images need to be displayed at their full width. To make them fit the narrower pods in the desktop version, the overflow property of the pod's content needs to be set to hidden.

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.

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;
}
    

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

The pods under the mission statement share the same styles, although the "News" pod needs some that are slightly different. The common styles need to be created with classes. The "News" pod can use an ID to tweak the common styles. The classes haven't been applied to the HTML markup, but it's easier to create the style rules first. Once the rules have been added to the style sheet, you can apply the classes through the Property inspector.

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.

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.
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).

Figure 13. The images are too wide for the pods.

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;
}
    

This sets the width to the same as the pod class, but there's no padding, so the podContent class will sit neatly inside the padding of the pods. The height is set to the same as the height of the images, and the overflow property is set to hidden , effectively cropping the 58px of image protruding to the right, but in a nondestructive way, so the full width will be seen by other devices.

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.
Repeat the previous step with the photo of the Café tables.
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.

Figure 14. After the images have been constrained, the pods line up.

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.
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.

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;
}
    

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;
}
    

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.
Repeat with the other two headings in the pods.
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 elements, neatly aligning the text in each item.

Styling the footer

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

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;
}
    

Click inside the phone numbeClick inside the phone number, and select <p> in the Tag selector.
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.
Select File > Save All Related Files.

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

Figure 15. The completed HTML5/CSS3 page.

As you have seen, you can apply CSS to the new HTML5 elements in the same way as with HTML 4.01 and XHTML 1.0, using tag selectors, classes, IDs, and the full range of compound selectors. Dreamweaver lists the HTML5 tags in the New CSS Rule dialog box, and you can also select them in the Tag selector. Creating style rules with CSS3 selectors involves working directly in the style sheet in Code view, but code hints for the most widely supported properties and browser-specific properties are there to help you and speed up the process.

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.

Tutorials and samples

Tutorials

Samples

Dreamweaver user forum

04/23/2012	Resolution/Compatibility/liquid layout
04/20/2012	using local/testing server with cs5 inserting images look fine in the split screen but do not show
04/18/2012	Ap Div help
04/23/2012	Updating

Dreamweaver Cookbook

11/07/2011	Simple social networking share buttons
09/20/2011	Registration form that will generate email for registrant to validate
08/21/2011	Spry Accordion - Vertical Text - Auto Start on Page Load - Mouse Over Pause
08/17/2011	Using cfdump anywhere you like

HTML5 and CSS3 in Dreamweaver CS5.5 – Part 2: Styling the web page

by David Powers

Content

Created

Page tools

Requirements

Prerequisite knowledge