Getting to Grips with CSS

Guides and Resources for the Internet Entrepreneur

25 December 2007 28 views No Comment

Occasionally, we receive questions from our members about implementing technologies that are still new to them. The following post covers a topic on CSS (Cascading Style Sheets) that we hope you find useful.

Martin from WealthyDragon writes “I know what CSS does and what it allows you to do, but I’ve never got to grips with actually using it. There are still murmurings in the forums that getting CSS to work in different browsers still causes headaches. So I don’t plan on using it until those wrinkles are easier to manage.”

“For example: what are the files that make up a page that uses CSS?
On pages that don’t use CSS, you have an HTML file, some image files and
whatever other files you need (e.g. audio files, etc.). What are the
files that make up a page that uses CSS?”

This is a problem many people have that already have their own websites, but want a better way to dress up their website. In the beginning, there were many problems related to cross-browser compatibility. But many of these have been worked out and the ones that remain are usually in the more advanced realm of using CSS. Those issues aside, let’s start with some basics.

First, CSS can be implemented right inside your HTML files. There is no need for any other files. Style attributes can also be used right inside your HTML tags as well. However, having a separate CSS file for your styles allows the same style sheet to be used for all of the pages on your web site. Have I confused you yet? Let’s look at each option:

Option 1 - Implementing CSS in your HTML files

There is an HTML tag named <STYLE>. By inserting a set of STYLE tags in your HTML file just after the BODY tag, you can define STLYE attributes for your web page. For example:

<STYLE>
body {
font-size: 11px;
font-weight: italic;
color: #FF0000;
}
</STYLE>

This is the style that will be applied to everything in between the <BODY> tags of the HTML file. It says that my text will be 11pixels in size, in Italics and the color Red. Every tag in the CSS file starts with the HTML tag (without the brackets) an opening ‘{’, the formatting commands and a closing ‘}’. Each formatting command is structured as ‘attribute: setting;’

Insert a STYLE section at the top of your page just after the BODY tag and change around some of the settings between the brackets (the ‘{’ and ‘}’ brackets). This is one of the best ways to learn how CSS works on your web page.

Option 2 - Style attributes within HTML tags

The second way of using STYLE tags is to put them right inside your HTML tags. For instance, we are all familiar with the tag to create a link so let’s use that one:

<a href=”myhomepage.html”>Text that links to my page</a>

This is the standard use of the tag, now lets add some formatting using the style attribute in the tag and some style sheet commands:

<a style=”font-weight:bold; font-variant:small-caps; font-size:12px;” href=”myhomepage.html”>Text that links to my page</a>

This should produce the following result:

Text that links to my page

This is the method I use when designing my websites until I get the desired look, and then I move everything into a style sheet file. Which brings us to option 3 …

Option 3 - Integrating CSS as a separate file

Having all of your styles in a separate file keeps the look and feel of your web pages standard across your entire website. Once you have all of your formatting done, you can save them into a file with the extension ‘.css’, such as ’style.css’. You then link to this file from your HTML files with the following command:

This line should go just before the </HEAD> tag in your HTML file.

Summary

This is just the beginning, and by no means a comprehensive guide to CSS. But, if you are comfortable with using one or all of the options mentioned above, you are now ready to begin playing around with the different attributes of CSS to get your website looking its best.

There is a full reference on CSS tags and attributes here.

There is a CSS Cheat Sheet for your reference here.

Have fun!