Working with Cascading Style Sheets

Dreamweaver makes the creation and application of CSS rules fairly easy. By working with CSS in Dreamweaver, we can set a whole range of properties to control the appearance of elements on our page.

Setting up the Interface to Work with CSS

When creating CSS, we want to work in Live view. Live view provides a more realistic render of what a page will look like in a browser than Design view.

Step1. Open structure.html, if necessary.

Step2. To switch to Live view,

Click, Click Live

Also, since we are going to be working with Cascading Style Sheets, we need to view the CSS Designer panel.

Step3. To view the CSS Designer panel,

Click

Creating a New Style Sheet

We need a place to store our styles for our site. As mentioned in HTML5 & CSS: The Basics, there are several places styles can be placed. One place we can store our styles is in an external style sheet. When using an external style sheet, there is a reference in the head element of the HTML document to a separate file that contains the CSS rules. This allows us to use the same styles in multiple HTML documents. For more information about external style sheets, consider taking the workshop HTML5 & CSS: Structuring Pages.

Step1. To start to create a style sheet,

Click, Click Create A New CSS File

The Create a New CSS File dialog appears:

Step2. In the File/URL field, type:

bigfive Enter

In the Sources part of the CSS Designer you see:

Since this is our only source, we can collapse the Sources area to have more room for the rest of the panel.

Step3. To collapse the Sources section, in the CSS Designer,

Click Sources

We also won't be using the @Media part of the CSS Designer.

Step4. To collapse the @Media section, if necessary,

Click @Media

Selecting Items

When we are creating styles in Dreamweaver, selecting the appropriate element will make defining selectors easier. There are multiple ways to select an element inside of Dreamweaver. Let's try some of these methods.

The most straightforward is to click on or inside an element.

Step1. To select the h1 element,

Click in the text "Africa's Big Five"

Notice the border that appears around the h1 and the element name that appears:

Sometimes it is difficult or impossible to select an element by clicking. Let's say we want to select the header element. We know the header is near the top of the page.

Step2. To try to select the header element,

Click near the top left corner of the page

Chances are we selected the body or the unordered list when clicking. One way to select elements that can't be clicked on is to use the DOM panel.

Step3. To select the header in the DOM panel,

Click

A blue border now appears around the header. With the header selected, in the lower-left corner of Dreamweaver just above the Properties panel you see:

This area is called the tag selector. Notice Dreamweaver shows the header is selected since it is blue in color. The tag selector shows elements that are ancestors of the currently selected element. In the case of the header, we see it is inside the div, which is nested inside of the body.

The tag selector can also be used to select items. Let's select the div element using the tag selector.

Step4. To select the div, in the tag selector,

Click

We can see the div is now the selected element.

When we are in Live view, there are also keyboard shortcuts which use the left bracket and right bracket keys, located one row above the Enter key on your keyboard, that we can use to select the parent or child of a element.

Step5. To reselect the header, which is a child of the div, press:

Control key+]

The header is now selected.

Step6. To reselect the div parent element of the header,

Control key+[

The div is selected again.

Now that we better understand how to select elements, let's use these skills to select appropriate selectors and create styles.

Adding Styles to the Nav Element

First we will style the nav element that contains the navigational links for our website.

Step1. To select the nav element in the DOM panel,

Click

Step2. To start to add a selector, in the CSS Designer,

Click

The default selector that appears, div header nav, is more specific than it needs to be. This would only apply to nav elements inside header elements which are children of a div element. It wouldn't hurt anything if we leave it this way, however, we know we will only have one nav element in our page, so we won't need to apply different styles to different nav elements.

Since we only need to apply style to one nav, let's change the default selector.

Step3. To make the selector less specific, press:

Up Arrow key twice

The selector is now just nav.

Step4. To accept the selector, press:

Enter

NOTE: If we accidentally create the wrong selector, we can either double click the selector and type the correct selector, or click on the selector and hit the delete key to remove it.

In the CSS Designer, we can either show all properties, or show only properties with values already set. Since we are just starting to add styles, we want to make sure we can see all properties.

Step5. To deselect the Show Set checkbox, in the Properties section of the CSS Designer panel, if necessary,

Click

Dreamweaver organizes CSS properties into five categories: Layout, Text, Border, Background, and More, which are represented by the following icons:

Step6. To view the Background properties,

Click

Step7. To open the background color options, next to background-color,

Click

You see the color options:

We want the background for the nav to be partially transparent, so that we will be able to see the background of the body element through the nav. One of the color models that allows us to change the opacity of colors is RGBa, which stands for Red, Green, Blue, Alpha. The alpha property controls the opacity of colors.

Step8. To use the RGBa colors, if necessary,

Click

Notice the current value is rgba(0,0,0,1.00), which is black with no opacity. The first three zeros refer to the values for red, green, and blue. Allowed values for these colors are between 0 and 255. The 1.00 is the value for the alpha channel. Allowed values for the alpha are between 0.00 and 1.00.

Step9. To change the opacity,

Press & Drag the Alpha slider to 0.50, press: Enter

The value of background-color should be rgba(0,0,0,0.50). We set the background color to black, but due to the transparency we set, it appears as a shade of gray.

Despite the fact that we see changes to structure.html as we add CSS, the changes are actually in bigfive.css. We can see this by the asterisks after bigfive.css:

If we save, Dreamweaver only saves the file we are viewing, which in our case is structure.html. There is a Save All option on the File menu; however, it doesn't have a keyboard shortcut assigned to it.

Assigning a Custom Keyboard Shortcut

The fact that the Save All command doesn't have a shortcut is something we can fix. In most Adobe programs we can change the default shortcuts and create shortcuts.

We will assign a shortcut to the Save All command.

Step1. To view the keyboard shortcuts, on the menu bar,

Click Edit, Click Keyboard Shortcuts...

NOTE for MacOS Users: To view the keyboard shortcuts, on the menu bar, Click Dreamweaver CC, Click Keyboard Shortcuts...

The Keyboard Shortcuts dialog box opens:

Dreamweaver requires that we make a duplicate of the default shortcuts before we can make any changes.

Step2. To start to duplicate the shortcuts, in the upper-right corner of the dialog box,

Click

Step3. To name the duplicate set, type:

DRWBC workshop Enter

Now we need to select the command we want to create a shortcut for.

Step4. To select the Save All command, in the commands section,

Click in front of File, Click Save All

Step5. To position the cursor,

Click in the Press key field

Now we need to assign a shortcut to Save All. We want to be careful we don't assign a shortcut that is already defined. Dreamweaver will show an alert if we start to assign a shortcut that is in use or a shortcut that isn't allowed.

Step6. To enter the shortcut in the field, press:

Control key+Shift key+Alt key+s

Step7. To create the shortcut,

Click

You see:

Step8. To close the Keyboard Shortcuts dialog box,

Click

Let's test the shortcut.

Step9. To save all open files,

Control key+Shift key+Alt key+s

Notice the asterisks after the file names are now gone, indicating all changes are saved.

Changing Properties for Unordered List

We want our navigation to be horizontal rather than vertical. To change this, we will use CSS to make the unordered list act like a table element, and the list items to act like cells in the table.

Step1. To expand the nav element in the DOM panel, if necessary

Click

Step2. To select the unordered list, in the DOM panel,

Click

The ul element is now selected.

Step3. To start to add a selector, in the CSS Designer panel,

Click next to Selectors

The selector is header nav ul, which is too specific for our purposes.

Step4. To make the selector less specific, press:

Up Arrow key

The selector is now nav ul. We are keeping the nav as part of our selector because we have two unordered lists on our page, and we only want to have the unordered list in the navigation act like a table.

Step5. To accept the selector, press:

Enter

Step6. To view the Layout properties, if necessary,

Click

Step7. To change the way that the ul is displayed, next to display,

Click, Click table

The screen will not change drastically. If we have sharp eyes, we might notice a line has appeared after the bulleted list.

Let's save our changes.

Step8. To save all open files,

Control key+Shift key+Alt key+s

Next, we need to change properties of the list items.

Changing Properties for List Items

Now we need to make the list items act like cells of the table. We are going to make sure our selector only applies this style to the list items of an unordered list that are nested inside a nav element.

Let's make some more room for the CSS Designer and the properties area.

Step1. To collapse the DOM panel,

Double-Click

Step2. To position the cursor,

Point above Properties until the double arrow icon appears

Step3. To expand the Properties area,

Press & Drag upwards

Now we want to select one of the list items in Live view, so when we create our rule, Dreamweaver uses an appropriate selector.

Step4. To select one of the links, in the Document window,

Click Elephant

We should see a border around the Elephant link.

Step5. To select the parent list item of the link, in the tag selector,

Click

The border is now around the Elephant list item:

Step6. To add a property,

Click next to Selectors, press: Enter

The selector should be nav ul li.

Step7. To view the Layout properties, if necessary,

Click

Step8. To change the display property for the list items,

Click, Click table-cell

The items in the unordered list now are displayed vertically across the page. Notice that this has also removed the bullets that appeared in front of each item previously.

The links are too close together, though, so let's modify the width and padding properties to add some space around the items.

Step9. To add a width,

Click, Click px, type: 129, press: Enter

There is now space between the links.

Step10. To change the padding properties,

Click, type: 10px 15px, press: Enter

When using two values for the padding, the first value is used for the top and bottom and the second value is used on the left and right sides.

The spacing is now more appropriate around the links.

Step11. To save all open files, press:

Control key+Shift key+Alt key+s

Adding Link Properties

The default blue color of the links does not have enough contrast between the background color we previously set, nor would the blue color fit into our final design. We also don't want to have the links in the nav element to be underlined, since we are planning to make these links look more like buttons.

Step1. To select an anchor element in the nav element, if necessary,

Click on the text "Elephant"

Step2. To add a new selector,

Click next to Selectors

This time the selector is not specific enough. The selector is ul li a, which would apply the style to all anchors that are items of an unordered list.

Step3. To make the selector more specific, press:

Down Arrow key, Enter

The selector is now nav ul li a and will only apply to anchors that are items of an unordered list that is nested inside a nav element.

Step4. To view Text properties,

Click

Step5. To view the color properties, under Text,

Click

Since we don't need this font to be transparent, we can use a hexadecimal color.

Step6. To change the type of color to hex,

Click

Step7. To change the color to white,

Press & Drag the middle slider to the top

The field at the bottom of the color chooser will show #FFFFFF, which is the hex value for white.

Step8. To accept these changes, press:

Enter

Next, we will remove the underline from the links.

Step9. To remove the underline, next to the text-decoration property,

Click

Our links in the navigation area are now styled appropriately, and are much more readable.

Step10. To save all open files, press:

Control key+Shift key+Alt key+s

Next, we are going to apply some CSS styles to the body.

Adding Styles for the Body Element

There is a bug in Dreamweaver CC 2021 where sometimes positioning the cursor in the Design or Live view and then adding a selector doesn't generate the expected selector. The bug happens with the body element, once there is a paragraph element anywhere in the code.

Instead of the expected selector, Dreamweaver provides the selector of body p, which is fine if we want to style the paragraphs that are nested inside the body element. However, we want to style the body element itself. We will edit the provided selector to get around this bug.

Step1. To select the body, in the tag selector,

Click

Step2. To add the body selector to the CSS document,

Click next to Selectors

As mentioned, the suggested selector is body p.

Step3. To remove the extra space and the p,

Click after the p, press: Backspace twice

Step4. To accept the change, press:

Enter twice

The new selector is body, which is what we wanted. Now we will work on adding style to the body element.

Setting Background Properties

First we are going to add a background color and image to the body element.

Step1. To change the Background properties,

Click

Step2. To set the background color:

Click, type: #737169 Enter

Step3. To start setting the background image, next to the url field,

Click

Step4. To select the appropriate file,

Double-Click  bg_tile.gif

The Background properties are now applied.

It might seem odd that we set the background color when we also added a background image. This is in case someone is browsing with images turned off, or the link to the image file gets broken. We are going to set our font color to white in just a bit so we want to be sure we don't have white text on a white background.

Setting Font Properties

We will adjust the color and fonts used in our page. Remember, elements that are descendants of the body will inherit font properties from the body, so by setting the fonts for the body, we are also styling the font for the rest of the content.

Step1. To start to add Text properties,

Click

Step2. To begin setting the font color, under Text,

Click

Step3. To change the color to white,

Press & Drag the middle slider to the top

Step4. To accept the changes, press:

Enter

Our font is now white on most of the page. The one exception is the link in the footer. We already set a color for links, but only in the nav element. We'll adjust the color of the link in the footer later on.

Now let's finish setting the Text properties for the body element.

Step5. To start to set the font,

Click

Step6. To select the font list,

Click

We are now done setting the font properties for the body element.

Step7. To save all open files, press:

Control key+Shift key+Alt key+s

Using a Snippet to Add CSS

We want to center our page in the browser. This is a common task and there is a snippet that can help us achieve this look.

This particular snippet needs to be added to the CSS code for the page. Notice that below the tab for structure.html we see options for Source Code and bigfive.css. These options let us choose if we are seeing the current document or a document referenced by the current document. The only other document our current HTML file references is bigfive.css.

Step1. To view the CSS code,

Click

Notice that we are now in split screen view and we see the CSS code in the bottom half of the screen.

Step2. To switch to the Snippets panel, from the Menu bar,

Click Window, Click Snippets

Step3. To expand the CSS_Snippets folder,

Click in front of the CSS_Snippets folder

We want to add this snippet at the bottom of the CSS file.

Step4. To position the cursor, if necessary,

Click below the existing code

The snippet we are interested in is the one named Center a Website's Content.

Step5. To add the snippet,

Double-Click

We could have used the CSS Designer to create this code, but the code from the snippet has all the properties set that are needed to center our main content. Notice that the snippet used an id called #container as the selector.

Step6. To collapse the Snippets panel,

Double-Click

Before we leave this view, let's view the HTML code rather than the CSS code.

Step7. To show the HTML code,

Click

Step8. To switch to Live view,

Click

The snippet should not have changed anything yet. It isn't applying because we don't have an id called #container applied to any elements of our code.

Applying an ID to an Element

Let's apply the #container id to the div element we created earlier.

Step1. To position the cursor,

Click inside the text "Africa's Big Five"

Step2. To select the div, in the tag selector,

Click

Step3. To add the container id, on the Properties panel Div ID drop-down,

Click, Click container

The content of the page is now centered. The only issue is that the width is a bit narrower than we want. Let's adjust the width of our page.

Step4. To edit the #container selector, in the Selectors section of CSS Designer,

Click  #container

Step5. To see the Layout properties, if necessary,

Click

Step6. To change the width,

Click 800px, type: 1024, press: Enter

Now the div is a bit wider.

Step7. To save all the files, press,

Control key+Shift key+Alt key+s

Controlling Order of Styles

As mentioned in HTML5 & CSS: The Basics, the order of styles can make a difference in how they are applied. When we create styles in Dreamweaver, they are added below the active selector in the CSS Designer. The current order for our rules is due to this behavior. The exception to this is the #container rule, which is at the bottom because we put the snippet of code below the other styles we had created using the CSS Designer. The order of the style rules in the code is also the order in the CSS Designer.

If we aren't paying attention to which selector is currently selected in the CSS Designer when creating new selectors, we may get our styles in a different order than we are expecting. Dreamweaver makes it very easy to rearrange the order of the styles.

In our case, we really would like both the body and #container rules to be above the rules for the nav.

Step1. To move the body rule, in the CSS Designer,

Press & Drag body selector above nav selector

Step2. To move the #container rule,

Press & Drag #container selector above nav selector

In this case, the order isn't making a difference in which styles are applied. We moved the selectors to organize our styles so the styles that apply to the biggest areas of the page are at the top.

Notice that the currently active rule is #container. This will work for us, since we are creating a rule to change the appearance of the header next and it will be created between the #container rule and the nav rule. Since the header is the parent element of the nav element, it makes sense to have it before the rules that apply to the nav element.

Adding Styles to Header

We now will concentrate on making the header more attractive. We will add a background image, round the lower corners of the header, and adjust the appearance of the h1 inside of the header.

Step1. To position the cursor,

Click in the text "Africa's Big Five"

Step2. To select the header, in the tag selector,

Click

The header is now selected.

Step3. To start to add a selector for the header element,

Click next to Selectors

The selector that appears is #container header. Again, this default selector is a bit more specific than it needs to be. We only have one header element on our page, so limiting this rule is not necessary.

Step4. To make the selector less specific, press:

Up Arrow key

The selector is now header.

Step5. To accept the selector, press:

Enter

Let's work with the Background properties for the header now.

Adding Background Properties

We want the header to have an image as a background to make it more attractive.

Step1. To change the Background properties,

Click

Step2. To start setting the background image, next to the url field,

Click

Step3. To select the appropriate file,

Double-Click  africa_banner.jpg

The banner has been added, but the entire image is not showing yet. Let's fix that by changing a Layout property.

Adding Layout Properties

The height of an element is determined by its content. Background images are not content. Most of the time we let the content determine the height of elements, but there are times when content does not establish an appropriate height for an element. Since we want to see the entire image, we'll set a height for the header element.

Step1. To start to add Layout properties,

Click

Step2. To set the height of the header element,

Click the empty space to the right of the height field, Click px, type: 461, press: Enter

We want to make one more refinement to the header.

Adding Border Properties

We want our header to have rounded corners on lower-left and lower-right sides of the element. The properties we need to set to adjust the radius of the corners appear in the border properties in Dreamweaver.

Step1. To start to add border properties,

Click

To add rounded corners to the bottom of the header, we will modify the values highlighted below:

Step2. To set the border-bottom-left-radius,

Click the current value, type: 40 Enter

Step3. To set the border-bottom-right-radius,

Click the current value, type: 40 Enter

Now the lower corners on the header are rounded.

Step4. To save all the files, press,

Control key+Shift key+Alt key+s

Styling the Heading Element

The heading for our page is getting lost in the image. We want to make it stand out on the page.

Step1. To select the h1,

Click in the text "Africa's Big Five"

Step2. To create a new selector,

Click next to Selectors

The selector that appears, #container header h1, would work, but is probably more specific than it needs to be. We will remove the #container part of the selector. We will keep the header as part of the selector, in case we decide to add another h1 on the page and want to style it differently.

Step3. To make selector less specific, press:

Up Arrow key, Enter

Now the selector reads header h1, which is what we want.

Step4. To view Text properties,

Click

The headings text color is being inherited from the rule we created for our body element. We want to override the inherited color.

Step5. To change the font color, under Text:

Click, type: #dbcb5b, press: Enter

If anything, that probably made the text harder to read in its current location. We'll set some more properties to fix this.

Step6. To change the font size,

Click the empty space to the right of the font-size field, Click %, type: 300, press: Enter

There is too much space between the first and second lines of our heading. This space is what is referred to as line-height.

Step7. To change the line-height,

Click the empty space to the right of the line-height field, Click %, type: 90, press: Enter

Now there is less space between the lines of the heading.

Step8. To center the heading, next to text-align,

Click

Now the h1 is easy to read, since it is above the rhino's dark gray skin.

Step9. To save all the files, press,

Control key+Shift key+Alt key+s

Styling Hover, Active, and Focus Pseudo-class Selectors

We styled the links earlier by changing the color of the font, but we would like to make it more obvious that the links are clickable. We will style the links so that if we hover over them with the mouse or use the keyboard to activate them, they have a different style.

Links have special properties we can access using a type of selector called a pseudo-class. These classes are called "pseudo" because they affect a particular state of an element. For example, in HTML, hyperlinks have several states:

Pseudo-classes allow us to define specific styles for these five different states of hyperlinks.

NOTE: When defining style for all of these pseudo-classes, they must be defined within the stylesheet in the order listed above.

We will need to use pseudo-class selectors to create our rule. For more information about pseudo-class selectors, consider taking the workshop HTML5 & CSS: Structuring Pages.

Overriding a Dreamweaver Provided Selector

As we saw earlier, there are times when selecting an element will not get us a selector applicable to the elements we want. Dreamweaver will always guess what selector is needed, but we can override the selector given to us by typing the desired selector.

We need a selector that will apply to the anchors in the nav element when they are being hovered over, are active, or have focus.

Step1. To position the new rule, in the CSS Designer,

Click  nav ul li a

This will put the rule near the existing rules that control the look of the links.

Step2. To add a new selector,

Click next to Selectors

We would like to make our hyperlinks in the nav element change color when they are hovered over, active, or have focus.

Step3. To create the selector, type:

nav a:hover, nav a:active, nav a:focus  Enter

Step4. To accept the selector, press:

Enter

Step5. To see type properties, if necessary,

Click

Step6. To change the color of the font, under Text,

Click, type: #dbcb5b, press: Enter

To see the hover effect, point at one of the links in the main navigation. The font should change to yellow when we point at a link, and return to white when we move our mouse away.

We are done styling the header and nav elements.

Step7. To save all the files, press:

Control key+Shift key+Alt key+s

Step8. To view the page in a web browser, press:

F12 key

NOTE for MacOS Users: To preview the page, press Option+FN key+F12 key.

Point at each link to see the hover effect. Remember that using the keyboard to navigate to the links, such as with the tab key, would also cause this color change.

Step9. Close the browser and return to Dreamweaver.

Styling Section

We want to style the section and the aside elements so they become columns below the heading. We also want to style both elements with a transparent color in the background similar to the style of the nav element.

Step1. To position the cursor,

Click in the lorem ipsum placeholder content

Clicking in this text will cause the paragraph to be selected. Since we want to apply style to the section and not the paragraphs, we want to select the parent element of the paragraph.

Step2. To select the section, in the tag selector;

Click

A blue border will appear around the section in Design view.

Step3. To add a new selector,

Click next to Selectors

The suggested selector is #container section.

Step4. To make the selector less specific, press:

Up Arrow key, Enter

The selector created is section.

Setting Properties for Section

Now that we have our selector, let's set the properties for the section.

Step1. To view Background properties,

Click

Step2. To start to set background-color,

Click

Step3. To change to RGBa color,

Click

Step4. To set alpha,

Press & Drag Alpha slider to 0.50, press: Enter

The value of the background-color properties should be rgba(0,0,0,0.50). Notice we can see the texture for the background on the body element through the semi-transparent background color of the section.

Step5. To view Layout properties,

Click

We are going to start to create the columns. We want the section to be the wider of the two columns.

Step6. To set the width of the section,

Click the empty space to the right of the width field, Click px, type: 631, press: Enter

The text is against the side of the section, which makes it difficult to read. To fix this, let's add a little padding. Since we want the same padding on all sides, we will enter the value using a shorthand value.

Step7. To set the padding,

Click, type: 10px, press: Enter

To create the column, we will now float the section to the left.

Step8. If necessary, to view the float property,

scroll downward in the properties

Step9. To set float to left, next to the float property,

Click

The text in the aside and the footer are now next to the section:

In fact, the bullets from the unordered list are overlapping the section. We will fix this later.

Step10. To save all the files, press:

Control key+Shift key+Alt key+s

Working with Classes

Before we move away from the section, we would like to style the image so that it is floated with the text wrapping around the image on the left.

Now, we could do this by creating a style that applies to images that are nested in the section element. However, there are two things we want to consider. First, we might not want all images in the section to float to the right. Second, there might be other items we would like to float to the right. A class that we can apply to any element is a solution to this issue.

Step1. To start to create a new selector,

Click next to Selectors

Since individual classes are not predefined in the HTML standard, it doesn't matter what the default selector is.

Step2. To change the selector, type:

.floatright  Enter

Remember that the names of classes must always start with a period. Also realize this is the same process we would use to create an id, except the name of an id would start with a pound sign (#), and ids can only be used once per page.

Step3. To access the Layout properties, if necessary,

Click

Step4. If necessary to view the float property,

scroll downward in the properties

Step5. To set the float property,

Click

Like the id #container we used earlier, the class we have just created isn't being used anywhere, so we need to apply the class to see its effect.

Step6. To select the image,

Click the Image Placeholder

The image is now selected:

Step7. To apply the class, in the Class drop-down of the Properties panel,

Click, Click floatright

Now the image is floated to the right:

Step8. To save all the files, press,

Control key+Shift key+Alt key+s

Styling the Image

The text in the section is really too close to the edges of the image. This makes the text harder to read. Let's add some padding around the placeholder image.

Step1. To select the image, if necessary,

Click the Image Placeholder

Step2. To start to create a new selector,

Click next to Selectors

The suggested selector is #container section.floatright. This would only apply the style if the element had the floatright class applied to it and it was inside a section element, which was itself inside an element with the container id applied. However, in our example, we want the style to apply to any image inside a section element, so the suggestion isn't what we want. Let's type in the selector we do want.

Step3. To enter the selector name, type:

section img  Enter

Step4. To accept the selector, press:

Enter

Step5. To access the Layout properties, if necessary,

Click

Step6. To add padding on all sides,

Click, type: 10px, press: Enter

There is now more space between the image and the text in the section:

Step7. To save all the files, press,

Control key+Shift key+Alt key+s

Let's move on to the aside.

Styling the Aside

We are going to turn the aside into a second column. First, we need to create the selector for the aside element.

Step1. To position the cursor,

Click in the text "Top 5 African Destinations"

NOTE: It may appear the h2 in the section is selected. Block level elements extend all the way across their parent elements until a specific width is set. In this case, the parent element of the h3 is the aside.

Step2. To select the aside, in the tag selector:

Click

You see a border around the aside element.

A specific width hasn't been set for the aside, so it extends to full width of its parent div element.

Step3. To add a new selector.

Click next to Selectors

The suggested selector is #container aside.

Step4. To make the selector less specific, press,

Up Arrow key, Enter

The selector is now aside.

Copying Styles From Selectors

Since the aside will have many of the same properties as the section, we will copy the properties from the section rule and paste those properties into the aside rule.

Step1. To copy the styles from the section rule, in the CSS Designer,

Right-Click  section, Click Copy All Styles

Step2. To paste the styles into the aside rule,

Right-Click  aside, Click Paste Styles

The aside is floated to the left, but is now appearing below the section:

We will fix this by making a few adjustments to the copied styles.

Step3. To view Layout properties, if necessary,

Click

Step4. To adjust the width,

Click 631, type: 337, press: Enter

It might seem that the aside is floated to the right now. This isn't actually the case. When multiple items are floated the same direction, as long as they can fit width wise, they will be positioned next to each other. This is why we can use floats to create columns.

Let's add a little margin between the section and aside.

To adjust the margin on the left side of the aside, we will change the margin property highlighted below:

Step5. To add a margin to the left side,

Click the current value, type: 10, press: Enter

There is now a bit of space between the section and the aside.

Step6. To save all the files, press,

Control key+Shift key+Alt key+s

Right now the footer is directly below the aside:

Let's fix that now.

Adding Styles to Footer

We are going to change the footer's properties so it can extend across the entire page, rather than being below the aside in the second column. We will do this using the clear property. Normally, content that appears on the page after a floated element will flow around it. The clear property pushes content below any floated elements.

Let's tell our footer to not allow floated items on either side, which will essentially push the footer to the bottom of our page.

Step1. To position the cursor, in the footer,

Click the text "IT Training"

Step2. To be sure the footer is selected, in the tag selector,

Click

You see a blue border around the footer.

Step3. To add a new selector,

Click next to Selectors

The suggested selector is #container footer.

Step4. To make the selector less specific, press:

Up Arrow key, Enter

The created selector is footer.

Step5. To view Layout properties, if necessary,

Click

Step6. Scroll down to see the clear property, if necessary.

Step7. To clear the floats, next to the clear property,

Click

The footer is now forced down below the columns, where we wanted it to appear.

The text of the footer is up tight against the edges. Let's add some padding to the top and bottom of the element to fix this.

Step8. To add padding to the footer, in the padding properties,

Click, type: 10px 0, press: Enter

There is now more padding on the top and bottom of the footer.

Let's also center the footer.

Step9. To view the Text properties,

Click

Step10. To center footer,

Click

The styles for our footer are now complete.

Adding a Margin to the Header

The last thing we'd like to do is add a bit of space between the header and the section and aside. We could add a margin value to the top of both the section and aside, but it would be more efficient to add a margin to the bottom of the header.

Step1. In the Selector section of the CSS Designer,

Click the header rule

Step2. To view the Layout properties,

Click

This time we want to work with the margin-bottom property highlighted below:

Step3. To set margin-bottom,

Click the current value, type: 10, press: Enter

Our styles are now complete.

Step4. To save any changes in the structure.html and bigfive.css files,

Control key+Shift key+Alt key+s

Step5. To view the page in a browser, press,

F12 key

NOTE for MacOS Users: To preview the page, press Option+FN key+F12 key.

Step6. Close the browser and return to Dreamweaver.