External Cascading Style Sheets

mastering cascading style sheets header

4. External Cascading Style Sheets

animated hillbilly band cartoon image

While what we were working on above referred a lot to the style.css, we need to cover one more thing before we move on to some fun stuff.

The code for external style sheets and internal style sheets is the same. The only difference being that the internal style sheets are place in the <head> section of your document.

To use external style sheets, we will do this.

Look in the head of your document and cut everything between your css opening and closing tags, then delete the tags.

Paste what you cut from there into a text document and save as style.css and upload to the directory you webpages will reside. Your style.css must be plain text with no other html tags, just the css code itself.

Then in the head of your document, place the following line of code which tells the browser that the information needed to render this page is located in the file style.css

That's it. If you will be using this style sheet on pages within different directory levels, you can specify a complete url instead of just the style.css.

Make sure that the link href code above to your style sheet is in the head of every page you build or it won't know where to find it and won't display correctly.

Also, for testing purposes, well any purposes actually but especially for testing purposes, you can, instead of backing up your style.css file as we mentioned earlier, you can create a new file and name it something, anything like myteststyle.css and then just change in the code above to use that style sheet. If you don't like it, just switch it back.

If you feel so compelled, you can visit W3 Schools for even more information which hopefully after reading through this will make understanding and growing an easier process for you.

Now, It's time to have some fun!

After all, what's the point of learning any of this if we don't use it. As internet marketers there are several things you could be doing immediately to make your sales pages come alive with pop and sizzle and we'll get into some of that now.

Add a shadow to your images.

This is a great technique for making your testimonials stand out. You can use an extra div tag to do this.

For this effect, you want to use a width and height for your shadow filter which is slightly larger than your image. In the example above, we are using a picture that is 100x100 and the shadow filter is 15px larger.

If you image was 80x80, you could use a shadow that was 90x90 and adjust from there for more or less shadow. You can also adjust the strength and direction of the shadow by defining those withing the color property, like...

(color:gray,strength:18, direction:132)

How about some cool box borders

Dashed Box

Place an image, text or both here

</div>

You can, of course, adjust the size of the box, text alignment, font size, font family and what ever else you like here.

To see some more really cool things you can do like using drop caps, creating magazine style layouts and plenty of other cool things you can do to spice up your sales pages, visit Mandarin Design.

That concludes this tutorial!

I wish you the best and hope you will continue to work on your CSS skills as it is becoming more and more a norm in website creation and can allow you to put yourself out in front of others that haven't taken the time to learn.

Thanks,
Pierre Du Plessis

1. Introduction to cascading style sheets - 2. Inline cascading style sheets - 3. Internal cascading style sheets

- 4. External cascading style sheets