CSS Cascading Style Sheets Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Advanced Section
CASCADING STYLE SHEETS

A BRIEF INTRODUCTION TO CSS

Now that you have learned a lot about HTML, we'll have a look at a different approach. This is not intended as a full tutorial for Cascading Style Sheets (CSS or just style sheets), but it will give you the rudiments. There are a few good tutorials around if you search for them, so for now I am just going to give you some cool things you can dress up your pages with. If you have read the source code for previous parts of the tutorial you will already have seen the use of CSS.

The great advantage of CSS is that allows you to set the style of your web site in one place. By using a style sheet you can change various elements on all your pages, without having to go painstakingly over each page separately. A style sheet is just a text file saved with a .css extension. You must also use a META tag to tell the browser you are using a style sheet:

<META http-equiv="Content-Style-Type" content="text/css"> CSS can be:

Inline Styles or
Internal Styles or
External Style Sheets

INLINE STYLES

Let's start with the simplest - Inline styles. This is handy when you want to change one or two items on a page. For this we can use the <SPAN> tag or the <P> tag which is simply placed at the beginning of the sentence where it is required. First the <SPAN> tag:

<SPAN STYLE="font-weight: bold; font-family: times new roman,times,serif; font-size: 15pt; color:#006000"> This sentence is large and green. </SPAN>
This is telling the browser to make the word or sentence contained within the span tags look like this:

This sentence is large and green.

Note that elements are defined with a colon ( : ) and separated by semi-colons ( ; ). The semi-colon is not required for the last element. You can also add a border to the above by adding the following to the code - border:1px solid. So it will now look like this:

This sentence is large and green and bordered.

I could also have added background-color:#FFFFA6 which would have given it a yellow background.

Now in Arial with a yellow background

Some of the options for borders are solid, dashed, dotted, double and ridge. (NB. Not all of these work in all browsers.) Here it is in a different font with a dashed border plus the addition of some padding, padding:4px.

This sentence is purple, padded and dashed.

An alternative to the SPAN tag is the <P> tag, this time specifying the parameters of the border for each side like this:

Which gives you this:

As you can see we have used the <P> tag, this time specifying a different colour and style for each side of the border

When using the <P> tag like this it must be closed or the rest of your page will take on the characteristics specified in the code.

INTERNAL STYLE SHEETS

Internal style sheets are placed in the <HEAD> section of the web page, before the <BODY> tag. Remember to use a <META> tag to tell the browser you are using a style sheet. Here it is again:

<META http-equiv="Content-Style-Type" content="text/css"> This is followed by <STYLE>, then the codes, then closed with </STYLE>.

You can use SPAN in many ways. For example, you could have the first letter of a heading, paragraph or sentence begin in a different font or face, like this:

The code for the above is a little different in that we use <SPAN CLASS=> instead of <SPAN STYLE=>. Read on for the explanation.

This is the code I have in my style sheet (ozstyle.css)

.bigx {font:bold 16pt comic sans ms,sans-serif;color:#FF0000}

And this is how the code is used on this page:

<SPAN CLASS="bigx">M</SPAN>aster <SPAN CLASS="bigx">C</SPAN>lass

I could also use DIV for a similar effect. More about this on the next page.

One of the most popular ways to use an internal style sheet is to give some variety to your links. Sometimes the style of a page does not suit underlined links, so you can use this small piece of code to remove the underlining. The HOVER part has no real equivalent in HTML.

The following should work in most browsers:

Now let's take this a step further. This time colours & fonts have been added to the code, so you don't need to specify them when you put a link in your page - a great time-saver. This replaces putting the link codes in the <BODY> section. When you hover over the link, an underline will appear :

See the example on its own page: CSS Link Example Page

Hit your BACK BUTTON to return here.

A common way to do mouseovers is to use JavaScript. For a site menu, this involves creating two graphics, one "on" and one "off". This can take a lot of time and effort. I won't go into detail on this here, as you can find instructions on how to do it in many JavaScript tutorials on the web.

But if you use the code given above it gives a very simple way to change the colour of your links as the mouse passes over them, without using JavaScript. This applies to links you simply type in, not to graphics. This code will give you a green link with a red mouseover effect.

For an example see the Mouseover Page. You will notice that the items on this index have been separated by a one pixel gif file, and the current page item has a slightly different background colour and does not change colour.

Hit the link at the bottom of the page or your BACK button to return here.

Next we go into External Style Sheets and some explanation about what the "Cascading" part means.

Next: External Style Sheets

Advanced Index