CSS Styles to Page Content in Dreamweaver - Step 3

Go back to Step 2: Adding & styling the header elements

Step 3 : Adding and styling content elements

Select the placeholder text inside the #content div container. Replace it with “The ultimate guide to food and wine pairings.” Select the new text and in the Property Inspector, choose the Heading 1 format from the drop down. If you recall, you already set up CSS styles for the h1 and h2 elements in the earlier lesson.

Apply the Heading 1 format to the selected text. Earlier, you set up styles governing the look of the h1 and h2 elements.

With your cursor at the end of the headline, insert a new div element using the Insert panel. In the window that appears, select “at insertion point” from the drop down and name the new class “hero.” Click the New CSS Rule button to add some rules to the new div.

Insert a new div after the headline and create a new custom class for it called “hero.”

In the Rules window, select the Background category. Browse to the hero_image1.png file included in the lesson files and copy it to your assets folder when prompted. Set the background repeat property to “no repeat.” In the Box category, set the height of this div to 400 pixels. Click ok and watch the image appear as a background behind the placeholder text. Because a div is a container, we can add more divs inside it and target styles to them too, creating a layered effect.

Select the placeholder text and change it to “The ultimate Tuscan cheese plate.” Select the updated text, and in the Insert pane l, click the Div button. In the window that appears, choose the “wrap around” option and give the div a new class called “.herotext.”

Select and update the placeholder text. Select the text again and wrap a div tag around it and create a new class for the div called .herotext.

In the CSS rule window, select the Background category and change the background color to black by clicking on the color swatch to access a pop up palette. In the Positioning category, set the position to “relative.” Set the width to 60% and set the top placement to 20 pixels as shows.

This action arranges the herotext div relative to its parent container, the hero div. It will sit 20 pixels down from the top of the hero div and only span 60% of its width.

Set the positioning properties of the .herotext class we are applying to the new div tag.

Now that a black background is applied to the div via the .herotext class, let’s target the actual text inside of the div. Select the text and in the Properties panel, change the format to Paragraph by selecting it from the drop down menu.

Set the positioning properties as shown.

While the text is still selected, in the CSS panel, click the “+” icon to create a new style. The New CSS Rule window automatically includes the path to target this text nested inside the div. You can make it less specific, however, by clicking the Less Specific button until it reads just “.herotext p” as shows.

Adjust the selector down to just .herotext p by clicking the Less Specific button.

For the styles, apply the settings as shown.

Apply these CSS settings to the .herotext p selector.

Depending on the version of Dreamweaver you are using, it may or may not support all of the CSS3 properties. For some, like opacity, you may need to enter them manually.
Here’s how:
In the document window, click on the global.css view. Scroll down to the .herotext class and add the line:

opacity: 0.6;

This sets the opacity to 60%. Feel free to play with the opacity settings to see what you like best. For example, 0.5 is 50%.

In the global.css view, scroll down to .herotext and add an opacity property.

Let’s also add a size property for the background image of the .hero class. Find the .hero class in the global.css hero. Add the line:

background-size: 100% auto;

This sizing property will scale background image relative to the size of the div container (which will expand and shrink as the user resizes the browser window). These settings keep the image’s width at 100% and allows the height to stay in proportion (by including “auto”).

In the global.css view, scroll down to .hero. Add a background-size property.

Save your file.

Next - Step 4 : Adding a three column layout