Building your CSS skills
Thus far you've used CSS to help give a web page some style. By now you should have learned that HTML gives a page it's structure but it's CSS that makes a web page look better visually. Up until now you've likely used Dreamweaver to help you add CSS through either page properties or the CSS panel. Doing so only adds the CSS to each HTML page separately. Now let's think about that web site you may work on for a client or employer that may be hundreds or thousands of pages. You may have discovered in your first project that it's a pain to have to change CSS across more than one page. So now it's time to take it a step further and lets go ahead and learn external style sheets!
What are external style sheets & how do I create them?
An external style sheet is a separate file that you will need to create. All of your styles are saved in this file. In order for your HTML page to read the CSS you will need to link or "attach" the style sheet. Let's go ahead and do that now. Follow these steps:
- Manage sites first to the files for this exercise.
- Create a new CSS file by going to File > New > choose CSS
- Save your CSS file. Again, organization in web design is key so as you save create a new folder first named "css" then name your CSS file screen.css. Keep in mind to name everything all lowercase.
- Return to your HTML file and open your CSS panel. At the bottom of the panel you'll see icons. The very first one looks like a link. If you hover it it'll say "attach style sheet". Click this button. Browse to find the CSS file.
You may be saying...hey, nothing happened. Relax and remember, we have to add CSS to that new file before your styles will show up.
How do I add CSS to external style sheets?
Adding styles to an external style sheet is pretty easy. First, you should avoid using page properties from this point forward. For some reason it always only places the CSS into the HTML file. So from here forward you will use the CSS panel only. Let's add a bit of style to make this page look a bit different. Usually starting out it's best to try to think of the HTML tags you can redefine because this will save you some time. For example, the body tag has a lot of control over your entire page so it's a good place to go to change typography, colors, background images, and much more.
Redefining the body tag.
Let's redefine the body tag by following these steps.
- Add a new style. The easiest way is to go to the CSS panel and press the icon that looks like a paper with a plus sign. When you hover it it should say "new CSS rule."
- From the dialogue box that appears you'll choose "tag" from the first drop down menu. Then from the next menu scroll down the list of tags until you find "body". Then at the very bottom you'll see where dreamweaver is saving the CSS - just make sure it has "screen.css" selected. If it doesn't then you should make sure it's selected. If it doesn't appear it's likely that you didn't attach your CSS file correctly so be sure you do so before going forward.
- You'll have tons of CSS options available to you. We'll just change a few.
- Change your body copy to Arial, 12px, 18px line height, color #333
- Add a background image named bg-px.jpg. Tell it to repeat on the x-axis (horizontally)
Redefining heading tags
Headings give your page structure that makes it easier to format your pages. Let's add a bit of CSS to make the headings look a bit different. You can review the headings above but thus far there are h1, h2, and h3 heading already established in the page. Let's go ahead and change those now.
- Add a new style again.
- Again choose "tag" as the option. Then scroll to find h1. Verify that it's saving the css in the screen.css file.
- Change your h1 to have a font that is Georgia, 18px, and change the color to #900. Change the text transform to "uppercase".
- Once finished scroll to the top of the page and you should see that h1 looking differently.
- Now go do the same steps to change your h2 and then h3 headings.
- For the h2 heading change these properties: color #c60, font-size: 16px, letter-spacing 1px, give a text decoration of overline and underline, change the text transform to uppercase
- For the h3 heading change these properties: color #960, font-size: 14px, letter-spacing 1px, text-transform: uppercase. Also give a border ONLY on the left that is 4px solid and the color is #960. Give a padding on the left of 10px to give space between the border and text.
Redefining our list
Lists have been used in this page thus far in an unordered format so they appear as bulleted lists. There's a lot of power behind using lists in web sites. Some simple things can be done to make lists look different than the default
- Redefine the list item "li" tag.
- Go to the list section and choose the list image "listbullet.gif"
- Add a border on the bottom that is dashed, 1px, and color #333
- Change the width to 350px
- Add a padding of 5px
Changing our ID's
As you've learned thus far, ID's in conjunction with DIV's can be used for positioning. The DIV's have already been established in the page for you.
Alter the #main ID
There's a div that acts as a container around all the content. Let's go ahead and change the style to this to set the width and center the content on the page.
- Create a new id. Name it #main
- Add a margin of 40px for the top and bottom. Add a margin of auto for the left and right.
- Set the width to 800px
Creating the #leftside id
There will be two divs (this one and the one below) that once we add some CSS we can get them to sit side by side in columns. Let's start by creating a #leftside id. Again, the div has already been established and the id has been applied to it for you. Check the code to verify.
- Create a new id. Name it #leftside
- Add a width of of 375px
- Add a border of 1px, solid #333 around all sides
- Add padding of 10px around all sides
- Float the div to the left. This is necessary to create the two columns.
Creating the #rightside id
After floating the #leftside div things may look a bit wacky. It's okay. Let's go ahead and add the #rightside div. Once floating this one it'll help things sit side by side so they look more normal.
- Create a new id. Name it #rightside
- Add a width of of 375px
- Add a border of 1px, dashed #333 around all sides
- Add padding of 10px around all sides
- Float the div to the right. This is necessary to create the two columns.
- Set a background color of #ccc
Establishing a clear div
Things may still look wacky beyond those first two div's. Here's the next step to fix that. After floating you'll find elements that fall beneath will view a bit oddly. Sometimes they overlap, somtimes they just seem out of place. Clearing is the way to fix what floating does to elements beneath a float. This is done most commonly with a footer in a web site. Again, the div has been established linking it to the idea #cleardiv
- Create a new id named #cleardiv
- Set the width to 600px
- Set the clear property to "both"
- Give it a solid border of 3px on only the bottom. Choose any color you want for the border.
- Give margin on the top and bottom a value of 20px. Give the left and right margins a value of auto.
- Give padding of 20px on all sides.
Creating another id
You can quickly see how ID's have power to help you style and position things in your page. Let's add another id to style this div. Here's what you'll need to do:
- Create a new ID. Name it #secondary
- Give it a width of 600px
- Give it a padding of 20px
- Change the font to Georgia
Floating an image
Links can be easily changed by adjusting the various states of the link. Some refer to these as pseuo classes. In dreamweaver the option to change links in the css panel is in the "compound" section. First let's make sure you understand all the states of the link.
- a - stands for ALL states of a link. Essentially changing the "a" will redefine all link states.
- a:link - This is the normal state of the link before it is interacted with.
- a:visited - The visited state once a page has been viewed.
- a:hover - The state of the link once hovered.
- a: active - The active page you're on.
Notice the order above, this is very important. If you only want the hover state changed you would style the "a" and "a:hover". However, if you choose any of the others without redefining the "a" first you have to style ALL 4 states, otherwise one of these states may end up looking like the default blue/purple links. The easiest way to remember the order is "love" (link & visited) "hate" (hover & active).
Let's change each state of the link so that the link beneath these steps look different. As you change each link remember, these options are available from the css panel once you've selected the "compound" option from the drop down menu.
- a:link - change to Arial, bold, #900 color, text-decoration: none
- a:visited - change to Arial, bold, #F60 color, text-decoration: none
- a:hover - change to Arial, bold, #F60 color, text-decoration: overline & underline
- a: active - change to Arial, bold, #F60 color, text-decoration: none
Here's a link to test to see how your links styles look. Test your page in the browser to see how they look.