Creating your first website – Part 4: Inserting images and styling text
What do I need?
Before starting this tutorial, read and complete the steps in Part 3: Styling the header and navigation menu. In order to make the most of this article, you need the following software and files:
Links are interactive, so they need different styles depending on their state, for example, when being hovered over. The different states are styled using CSS pseudo-classes, which must be defined in the correct order. Creating the navigation bar demonstrates how to apply different styles to elements depending on where they are in the HTML structure.
Beginners are often baffled by absolutely positioned elements apparently moving. In this tutorial, you'll learn how to make the element stay where you want.
Continue working with the files you created in the previous parts of this tutorial series. If you want to start with a fresh set of files, download first_website_pt4_begin.zip from the link at the top of this page, and use the bayside_beat folder as the Dreamweaver site root.
Note: This tutorial was written specifically for Dreamweaver CC. It uses the CSS Designer, which is not available in earlier versions of Dreamweaver.
By default, browsers display links in blue, underlined text. But when a link has been visited, it turns purple. This indicates that browsers are aware of the status of links. With CSS you can style links not only in their default and visited states, but also when the mouse pointer hovers over them, at the moment the link is clicked, and when it gets focus from the keyboard.
To indicate the status of a link, CSS uses what are known as pseudo-classes. A pseudo-class is similar to a class in that it can be applied to multiple elements in a page. However, unlike a class, you can't add it to the HTML markup. You simply define it in your style sheet, and the browser applies it automatically depending on the link's current state.
All pseudo-classes begin with a colon, and they're appended directly to the selector. There are five pseudo-classes used with links. The first two in the following list are used exclusively with links, the other three can also apply to other elements.
- :link—This styles links in their unvisited state.
- :visited—This styles links that have been visited
- :hover—This styles an element when the mouse pointer is hovering over them.
- :active—This controls what an element looks like at the moment it is being clicked.
- :focus—This indicates that the element has focus, for example when using the Tab key to navigate around a page.
The most important thing to remember about pseudo-classes is the order they appear in your style sheet. They "must" be in the same order as the preceding list. If you change the order, the styles won't be applied correctly. The CSS Designer's code hints help you by listing the pseudo-classes in the correct order. Many designers use the mnemonic LoVe-HAte to remember the order LVHA for :link, :visited, :hover, :active.
Creating the basic link styles
The first letter in CSS stands for Cascading because most properties are inherited or cascade down the HTML structure. This has the advantage that you don't need to repeat properties unless you want to override them. To style links efficiently, you create a basic style that affects links in any state, and then use the pseudo-classes to override specific properties.
- Make sure main.css is selected in the Sources pane of the CSS Designer. It doesn't matter if Live view is on or off.
- Create a new selector for links. The selector name is simply a. This will style links in all states.
- In the Text section, set font-weight to bold, and text-decoration to none, as shown in Figure 1. This makes the link text bold, and removes the underline.
Figure 1. Setting text-decoration to none removes the underline.
- Create a new selector for a:link. Code hints appear as soon as you type the colon (see Figure 2). Make sure there is no space between a and the colon.
Figure 2. Typing a colon brings up code hints for all pseudo-classes.
Note: The code hints list considerably more pseudo-classes than described earlier. However, only the first five are used with links.
- In the text category, set the color property to orange (#FF6600). You can use the color picker or type the value manually into the text field next to the color box. The effect of the cascade combines this style with the one you set in step 3, so the links are now in bold orange without any underline.
- It's common practice to indicate visited links in a lighter color. Create a selector for a:visited, and set the color property to #FF944C (a lighter shade of orange).
- You don't need three separate style rules for the remaining pseudo-classes. Create a group selector for a:hover, a:active, a:focus.
Note: The commas are part of the selector, indicating that you want the same styles applied to a:hover, to a:active, and to a:focus. If you omit the commas, it becomes a descendant selector that would apply to a link that has focus, but only if it's nested inside a link that's actively being clicked, which in turn is nested inside a link being hovered over—an impossible situation, but nevertheless perfectly valid as a selector.
- In the Text section, set color to #7F3300 (a shade of burnt orange), and text-decoration to underline (it's the second icon).
- Turn on Live view if it's not already active, and mouse over a link in the unordered list of links at the top of the page. The link you're hovering over turns a darker color and is underlined. The other links are still bold orange with no underline. The Home link is a lighter shade of orange because it points to the current page and uses the color defined by the :visited pseudo-class (see Figure 3).
Figure 3. Different styles are applied to the links depending on their state.
Creating a navigation bar with CSS
The link styles you created in the preceding section apply to links anywhere on the page. To change the look of links in a specific part of the page, you can create styles using descendant selectors to override the basic styles. In this section, you'll use descendant selectors to convert the unordered list of links at the top of the page into a navigation bar.
The process involves removing the bullets and default padding and margin from the unordered list. The links are then converted into buttons by giving them a width, and floating them. Then you style them by changing colors and adjusting padding.
- It's best to do this conversion with Live view on, so turn it on if necessary. Then select main.css in the Sources pane of the CSS Designer.
- Create a new selector for #mainnav ul. This targets the unordered list nested inside the <nav> element with the ID mainnav.
- Click the Others icon at the top of the Properties pane (see Figure 4).
Figure 4. List-related properties are in the Others section.
- Click the grayed-out value next to the list-style-type property (it's the last item in the Properties pane), and select none from the menu. The bullets disappear from the unordered list.
- Click the Layout icon to return to the top of the Properties pane.
- Set the margin and padding properties on all sides to zero by clicking the chain icon in the center of the visual tools and setting one of the values to 0px (see Figure 5).
Figure 5. Set all margins and padding to zero.
- Next, create a new selector for #mainnav a. This will style all links nested in the <nav> element with the ID mainnav. No pseudo-class is being used, so the new styles will affect the links in all states.
- There are five links, so set the width property to 20%.
- Normally, only the text of links is clickable. To turn the whole element into a clickable button, set the display property (it's fourth from the bottom of the Layout section) to block.
- Set the float property to left. The links are now displayed in a single line under the main heading, as Figure 6 shows.
Figure 6. The links are floated across the page.
- Center the text in each link by setting text-align (in the Text section) to center.
- Click the Background icon, and set background-color to a dark gray (#4D4D4D).
- Return to the Text section, and set color to white, and text-transform to uppercase.
- The text in the buttons needs a little breathing space on top and bottom, so set the top and bottom padding (in the Layout section) to 6px. The navigation bar should now look like Figure 7.
Figure 7. The links have been completely transformed by a few style rules.
- The navigation bar now looks quite smart, but the only thing that happens if you mouse over one of the buttons is that the text is underlined. This behavior is inherited from the basic link styles. To change the look of the navigation links when hovered over, clicked, or tabbed to, you need to use the :hover, :active, and :focus pseudo-classes. The same style will also be given to the current page using a class called thispage.
Create a new group selector like this:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage
Although it's quite long, the CSS Designer's code hints should speed up its creation. Take care to use a dot (period) to append thispage to the final part of the selector. It's an ordinary class, not a pseudo-class. You won't get a code hint for thispage because the class doesn't yet exist in the HTML markup.
- In the Text category, set text-decoration to none.
- In the Background category, set background-color to #43A6CB (a shade of aquamarine).
- Hover over one of the links in the navigation bar to see the effect. It should look like Figure 8.
Figure 8. The buttons now change when hovered over.
- To add the thispage class to the Home button, you need to turn off Live view.
- Click anywhere inside the Home link, and select thispage from the Class menu in the Property inspector, as shown in Figure 9.
Figure 9. Setting the class using the Property inspector.
- Turn on Live view again. The Home button now has an aquamarine background.
- Scroll down the page to inspect the links in the main <article> and sidebar <aside> elements. They are still bold orange without an underline. When you mouse over a link, it turns a darker color and is underlined.
- Save your work by selecting File > Save All Related Files.
The links in the rest of the page are not affected by the new styles because they are not nested inside the element with the ID mainnav. To learn more about CSS selectors, see my two-part tutorial, Getting to know your CSS selectors.
Using absolute positioning
The last part of styling the Bayside Beat home page involves positioning the "Be Where It's At" <article> over the large image of the Golden Gate Bridge, and giving it a background with rounded corners. You'll use a technique known as absolute positioning. As the name suggests, absolute positioning allows you to specify the precise position of an element. But there's a catch… There always is—isn't there?—when something sounds too good to be true.
HTML elements normally expand and contract to fit whatever content you put in them. For example, if you add another paragraph to the main <article>, it simply becomes taller, and it pushes the footer further down the page. With absolute positioning, the element is removed from the normal flow of the page, and it no longer interacts with other elements. The browser floats it in front of the page on an independent layer (in fact, absolutely positioned elements were frequently called "layers"). As a result, if you try to lay out a complete page using absolute positioning, some elements might overlap if their content is too long, or you might end up with unsightly gaps if content is shorter than expected.
Unlike a book or a magazine, where you know the exact size of the page and font, web pages are displayed on devices with a huge range of screen resolutions. People with poor eyesight increase the size of text. Given this lack of control, a web page needs to be flexible. But absolute positioning remains useful in situations where overlapping is desirable, such as placing a small block of text over an image.
When you set an element's position property to absolute, you fix its position by specifying one or more offset properties: top, bottom, left, and right. Setting an offset property moves the specified side of the element away from the same side of its containing block. Positive values move the element toward the center of the containing block. For example, if you set the element's top property to 100px, it moves the top of the element 100 pixels down from the top of its containing block. If you set its left property to 150px, it moves the left side 150 pixels in from the left side of the containing block (see Figure 10).
Figure 10. The offsets are calculated from the sides of the containing block.
Setting an offset to a negative value moves the element in the opposite direction. For example, Figure 11 shows what happens if the top property is set to -500px. Assuming the positioned element is less than 500 pixels high, it will be completely outside its containing block. In other words, the containing block doesn't constrain where the element can be displayed. It's the point from which the offsets are calculated.
Figure 11. Setting a negative offset move the element out of its containing block.
Note: Figures 10 and 11 are taken from my book Beginning CSS3 (Apress 2012, ISBN: 978-1-4302-4473-8).
Misunderstanding the containing block is probably the biggest cause of headaches with absolute positioning. It isn't necessarily the same as the parent element. The containing block of an absolutely positioned element is defined as follows:
- The containing block is the nearest positioned element higher up the HTML family tree. In other words, the containing block must have a position of absolute, fixed, or relative.
- If no such element exists, the page is the containing block.
The implications of this aren't immediately obvious, but they cause endless headbanging when a carefully positioned element appears to move. If you absolutely position an element 100 pixels from the left, it will always be precisely 100 pixels from the edge of the page. However, if you have centered other elements, such as the wrapper <div> in the Bayside Beat design, the distance of the centered element from the edge of the page depends entirely on the width of the browser window. On a 1200-pixel wide browser, the left sides of the absolutely positioned element and the wrapper <div> would line up with each other. At any different size, the absolutely positioned element would still be 100 pixels from the edge, but the left side of the wrapper <div> would no longer be in alignment.
The solution is amazingly simple: Set the position property of the absolutely positioned element's parent to relative. The offsets are then calculated from the sides of the parent. If the parent moves, the absolutely positioned element moves in sync.
The <article> inside the hero <div> is relatively short, and the large expanse of sky is a perfect place to put it using absolute positioning.
- Turn on Live view, if necessary, and make sure main.css is selected in the Sources pane.
- To keep related styles together, select #wrapper in the Selectors pane, and click the plus button to create a new selector called #hero after it.
- In the Layout category, set the position property to relative.
- With #hero still selected in the Selectors pane, create a new selector called #hero article to style the <article> element nested inside the hero <div>.
- In the Layout category, set the width property to 36%, and left and right padding to 10px.
- Set the position property to absolute.
The <article> moves inside the hero <div>, but the heading overlaps the navigation bar, as Figure 12 shows.
Figure 12. The heading overlaps the navigation bar.
This is because the links in the navigation bar are floated.
- To fix the problem, select #hero in the Selectors pane, and set the clear property to left. The hero <div> moves down below the navigation bar, and the heading no longer overlaps (see Figure 13).
Figure 13. The hero <div> now clears the floated links of the navigation bar.
- Continue styling the <article> by selecting #hero article in the Selectors pane.
- Scrub the top and right offsets in the position visual tool to move the <article> to a position over the top-right of the Golden Gate Bridge (see Figure 14).
Figure 14. Scrub the offsets to move the text into position visually.
- Click the Background icon to bring the background properties into view, and click the color box next to background-color. Use the eyedropper tool to select a light orange color from the top of one of the bridge's towers, as shown in Figure 15.
Figure 15. Sampling colors from images helps select harmonious colors.
- Immediately above the background-color property is the border-radius visual tool for creating rounded corners.
Click the chain icon in the center of the visual tool, and scrub one of the values to create evenly rounded corners on the block of text (see Figure 16).
Figure 16. The border-radius visual tool creates rounded corners in seconds.
- Click the Text icon to return to the text properties, and set color to white.
Only the paragraph turns white because there's a rule setting the color of all <h2> headings.
- Create a new selector for #hero h2.
- In the Text section, set color to white, and text-transform to uppercase.
- In the Layout section, reduce the vertical space around the heading by scrubbing the top margin to about 5px and the bottom margin to about -7px.
- Save your work by selecting File > Save All Related Files.
Congratulations, you have succeeded in building a modern, standards-compliant web page using HTML5 and CSS.
Tip: If you want to check which properties have been set for a selector, click the Show Set check box at the top-right of the Properties pane (see Figure 17).
Figure 17. Select the Show Set check box to display only set properties.
To add a property to an existing set, either deselect the Show Set check box, or click the plus button at the top of the Properties pane. Clicking the plus button adds the Others section below the current set, and opens a text box for you to enter the name of a property. Code hints appear as soon as you start typing.
The tutorial isn't over yet. You need to do a little extra work to keep older browsers happy.
Web developers tend to install the latest version of browsers. Understandably so, because they're interested in using the latest techniques. But not everybody is the same. They use an old browser for a variety of reasons: habit, lack of technical skill, or because their company or organization still uses an old operating system. Whatever the reason, you need to make sure that your web pages aren't completely broken in ancient browsers.
- Make sure main.css is selected in the Sources pane, and click the plus button at the top-right of the Selectors pane to create a new selector.
- The selector is a comma-separated list of HTML5 elements like this:
article, aside, figure, footer, header, nav
- In the Layout section, set the display property to block.
- Turn off Live view.
- Click Source Code in the Related Files toolbar, and then click the Split button at the top-left of the Document toolbar to reveal the HTML code (see Figure 18).
Figure 18. Open Split view to reveal the section of the HTML code.
- Position your cursor immediately before the closing </head> tag (it's on line 10 in Figure 18).
- Select Insert > Script.
- In the dialog box that opens, navigate to the js folder, and select html5shiv.js. Then click OK (Windows) or Open (Mac). This inserts the following line of code just before the closing </head> tag:
- Select the line of code that has just been inserted, and select Window > Snippets to open the Snippets panel.
Note: The Snippets panel contains short blocks of reusable code. You can also use it to store snippets of your own. See Dreamweaver Help for more details.
- In the Snippets panel, expand the Comments folder, and select Less Than or Equal to IE 7 Conditional Comment (it's the last item in the folder).
- Click the Insert button at the bottom left of the Snippets panel, as shown in Figure 19.
Figure 19. Inserting an IE conditional comment from the Snippets panel.
- Tidy up the formatting of the HTML by selecting Commands > Apply Source Formatting.
- Select File > Save All Related Files, and close the Snippets panel.
Where to go from here
In the final two parts of this tutorial series, you'll create a second page for the Bayside Beat website, and define a remote server to upload your pages to a live website. The second page will use the same HTML structure and CSS. Now that you have created the style sheet, it will be a much faster process.