For this exercise, you will be presented with several elements below. Use cascading style sheets to complete the directions listed. This exercise will help you gain experience learning properties and values of CSS when using Dreamweaver. Start by creating a new CSS document. Save this file as "screen.css " in a folder named "css" . Link it to this document, and create new styles as needed to complete the directions. Please make sure that when you are creating new styles that they are saved in the new CSS file you just created. The first two we will do together.
Make this paragraph of text in the
Georgia font, 14px, #484762. Give it a
line height of 18px. Because this style
will only apply to this paragraph be sure
to use a class, name it .sample1.
Remember classes start with a period.
Give the table below a 1px, solid border, #282828. Give it a left and right margins of 80px, and top and bottom margins of 20px. For this you will use a class, name it .sample2-table. Be sure you select the table before applying the style. The tag selector at the bottom of the document helps select tags!
| 1. Give this cell a background color of #E2E6F0. Give it a padding of 30px on all sides, and horizontally center its contents by changing the text-align to center. Again, you will use a class so the style only applies to this cell, name it .sample2-cell. To make sure you are applying your style to the cell be sure that you have the <td> tag selected prior to applying your style. |
Make this pargraph of text
use the Verdana font, 12px,
#333338. Give this paragraph
a line height of 150%. Finally,
indent it by giving it a left
margin of 2ems. Again, you'll
use a class, name it .ex3-1
Make the image align to the
left of this paragraph of text, and give it some breathing room by giving
it a bottom and right margin of 16px. To align the image to the left you
will need to use the float property. Floating will help give you the illusion
that the text runs around the image. Also, give the image a 1px, solid, black
border. Because this style will only apply to this image and not all images
you will use a class, name it .float-left
Give the table below a 2px, dotted border, #426857. Give it a left and right margin of 60px. Give it a background color of #e2d9ca. Again, you'll want to use a class. Name it .ex3-3
| Give this cell a 4px, solid border, #990000. Give it a padding of 10px on all sides, and give it a background color of #cccccc. | |
| Give this cell a background color of #999999, and give it a left and right padding of 20px, and a top and bottom padding of 10px; Finally, give it a width of 160px. |
Give all of the text that isn't styled in this document a font of Georgia, 14px, #33333. Give it a line height of 130%. You need to do this by applying font styles directly to the body tag (not by making a custom class like the other exercises above). In the dropdown where you create a new style, choose "Tag (redefines the look of a specific tag)" then choose the appropriate tag from the "Tag:" dropdown (in this case, the body tag). Then apply the styles as you normally would.
There are two "levels" of headers on this page. One is REALLY big (the "Exercise 3: Practice" and "Now It's Your Turn" text), and the other is used for the Exercise numbers (ex. "Exercise 3.4" text). The headers are created using the h1 and h2 tags, respectively. Using the same technique where you styled the body tag in the last example, style the h1 and h2 tags in the same manner. Use the following settings:
h1: Georgia, 20px, #333333, bold
h2: Georgia, 16px, #526577, not bold
Add to the styles you already created for the body tag in exercise 5.4 by giving it a background color of #f0f2f8. Also, push all the content away from the edges by giving it a margin of 80px on all sides.
For a finishing touch, let's change how links will appear in our page. Create a new style, but instead of choosing Class or Tag, choose Advanced, the third option in the popup window. From the Selector dropdown, we now have four options available to us:
One quirky thing about CSS is that these styles have to be created in order: if you define "active" before "hover", for instance, they won't work right.
For a:link, apply a color of #990000. For Decoration, choose "none". This will remove the underline from links.
For a:visited, apply the same styles as for a:link. For this exercise, we don't want our visited looks to look different from our unvisited ones.
For a:hover, apply a color of #ff9900. For Decoration, choose "underline". Now the underline will only appear when the mouse is over the link.
For a:active, apply the same styles as for a:link.
Here's a link for you to test your link styles: http://www.valenciawebstudio.com
There may come a time that you might want your links to be styled differently than the rest of you links in your site. To do this you can create a class and then apply the class to the links. But this time the class will be a bit different, because it is an advanced technique, choose the advanced tab. Type in ".links a " (without the quotes of course, but make sure there's a space between the two). Give this the following styles: change the font color to #000000, Arial, bold, no text decoration (this removes the underline). Those styles will apply to all four states of links that are in this style. Now lets add a hover state using the same method. Create an advanced style and type ".links a:hover". Give this state for the links a style of #FF00FF color, Arial, bold, and also assign a 1px solid border that is #FF00FF in color for only the top and the bottom. Now select the paragraph (choose the paragraph tag using the tag selector) that is holding the links below and apply a class to it. Because the links are inside of this paragraphy the styles will display.
Now let's try that one more time. This time let's try a few different styles to get some different effects. This time lets create an advanced style named ".links2 a". Add a font color of #000000. Change the font to Lucida Grande, bold, there should be no text decoration. Also apply a 2px padding around all sides. Now create another advanced style for the hover state, name it ".links2 a:hover". Apply a font color of white, the font should remain Lucida Grande and bold. Also set the padding so it is also 2px on all sides and change the background color to #000000. Now apply the class to the paragraph so it applies to all links in the paragraph.
That's it! You're done. Once you are complete FTP your exercise to your ex3 directory.
Get ready to style your next site on the Valencia Web Studio!