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:

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.

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.

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

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.

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.

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.

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

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:

Floating an image

You can float more than just div's. You can also float images and many other html elements. To do this it's pretty easy. Typically you create a class in order to float an image. So create a new class. Name it .floatleft. Once you do so go ahead and choose to float it to the left. Add a 1px solid border #333. Add a margin on the right and bottom of 5px. Add padding around all sides of 3px. The key to floating an image also include you then APPLYING the class. This has NOT been done. So once you create the CSS you will select the image and look in the property inspector to apply the class you just created. Sometimes dreamweaver is a bit buggy previewing floated images so it's wise to save and test in the browser to confirm it's been applied correctly.

Changing links

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.

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.

Here's a link to test to see how your links styles look. Test your page in the browser to see how they look.