Creating a Container (Div) for Special Information

Let's create a container with a border for placing historical facts about Austin—the content will stand out better. To do this, we’ll need to create some new styles in the project's stylesheet.

How to Create a Container

Creating a div selector is a good option for making a container.

1. From the Content Explorer, expand Resources > Stylesheets, and double-click Styles.css.
2. From the Stylesheet Editor's local toolbar, make sure the first button is labeled View: Advanced.
3. In the local toolbar, click .
4. In the New Selector dialog, from the HTML Element drop-down, select div.

5. In the Class Name field, type Facts. Click OK.

   

6. In the left pane tree structure, make sure div is expanded, and Facts is selected.
7. In the Show drop-down, select Show: Assorted Relevant Properties.

8. Expand the Font group, and at the color property, type Gray. Press ENTER.

   Note If you completed the Nested Tags topic from Styles Tutorial—Understanding the Basics, remember that the div font was set to display in purple. Just update the value to gray.

9. Expand the Border group, and at the border property, click .

10. In the pop-up menu type Purple. From the border type drop-down, select double. Type or select 3 pixels to increase the border width. Click OK. (The hex color code auto-populates in the color drop-down.)

    

11. Expand the Box group, and at the margin-left and margin-right properties, click (one at a time). Type or select 20 pixels for both properties, and click OK.

    

12. Expand the Padding group, at the padding property, click . Type or select 10 pixels to increase padding for all sides. Click OK.

    

13. In the Show drop-down, select Show: Set (Locally) Properties - properties set in this stylesheet to see all of your settings.

    

14. Click to save your work.

How to Create a Label for a Container

1. In the local toolbar, click .
2. In the New Selector dialog, from the HTML Element drop-down, select (generic).

3. In the Class Name field, type Historical-Fact. Click OK.

   

4. In the left pane tree structure, make sure (Generic Classes) is expanded, and Historical-Fact is selected.
5. In the Show drop-down, select Show: All Properties.
6. Expand the AutoNumber group.
7. Next to the mc-auto-number-format property, click .

8. In the Auto-Number Format dialog, copy and paste the following format into the Enter format field:

   {b}{color #800080}Historical Fact: {/color}{/b}

   

9. Click OK.
10. Click to save all files.

How to Apply Information for a Container

1. From the Content Explorer, open the Attractions.htm file.

2. Create an empty paragraph after the last image.

   

3. Type the following:

   Austin has the largest urban bat colony in North America.

4. From the Home ribbon, click . This groups selected items.

5. From the Create Group dialog, select div.Facts. Click OK.

   

6. From the Home ribbon, Styles drop-down, select .Historical-Fact.

   

   

7. Open Introduction.htm.
8. Under the "Climate" section, create an empty paragraph after the first sentence.

9. Copy and paste the following content:

   Austin’s hottest day in recorded history was 112 degrees on 9/5/2000 and again on 8/28/2011. The coldest day on record for Austin dropped to -2 degrees on 1/31/1949.

10. From the Home ribbon, click .
11. From the Create Group dialog, select div.Facts. Click OK.

12. From the Home ribbon, Styles drop-down, select .Historical-Fact.

    

13. Click to save all files.

14. From the Window ribbon, select Close All Documents.