Cascading Style Sheets

Headline News

You'll find up to date news on subjects such as Late Breaking, World, International Sports, Entertainment, Music, Cricket, Formula 1 Racing, Golf, Soccer, Tennis, Track & Field, Hackers News, Lawsuits, War, Australia, France, Israel, Japan, South Africa and Great Britain.

Learning How To Use Cascading Style Sheets...

Cascading Style Sheets, or better known as CSS, are normally used to make your life simpler when creating webpages, it's a more advanced form of HTML, but hopefully with my help you'll get to understand how they work ;o) There's only one drawback to using CSS, they only work with newer browsers such as IE4+ and Netscape 4+.

What they do, is to allow you to set attributes of any given HTML command once for the whole page. Yes I know, you're probably thinking 'can it be that simple', the answer is yes it can be :o)

For example, with CSS we can set everything inside the <p> </p> tags to the color red, or have some other unique attribute. Then whenever you use the <p> </p> tags anywhere on your page the paragraph will show up as red. CSS allows you to have full control of the appearance of text or objects on your pages, you can also use CSS to set attributes for your whole site.

Here is an example of an HTML file that uses CSS to make <h1> </h1> bold and green and <p> </p> font size 2, face arial, and red. It will also create a custom command that I can apply anywhere I want that makes text large and orange, called CUSTOM. This particular example is called an embedded style sheet:

<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">



</STYLE>
</HEAD>
<BODY>
<H1>My Heading</H1>
<P>In this simple example, we use CSS to set some tag attributes for one page.</P>
<H1>Heading</H1>
<SPAN CLASS="custom">This is my custom style.</SPAN>
</BODY>
</HTML>

Want to see what it looks like? Then click here

Note: When you want to use the custom style you defined, you need to use the <SPAN CLASS="nameofcustomstyle">.

Below are some CSS attributes that can be used with almost any HTML tag.

margin This sets the top, right, bottom and left margin. All margin values can be entered in numerical lengths or percentages.

margin-top This sets the top margin of an object.

margin-right This sets the right margin of an object.

margin-bottom This sets the bottom margin of an object.

margin-left This sets the left margin of an object.

padding This sets the top, right, bottom and left padding. All padding values can be entered in numerical lengths or percentages.

padding-top This sets the top padding of an object.

padding-right This sets the right padding of an object.

padding-bottom This sets the bottom padding of an object.

padding-left This sets the left padding of an object.

color This sets the color of text by using HTML Hexadecimal codes.

background-color This sets the background color of the object by using HTML Hexadecimal codes.

background-image This sets background image.

border This sets the same width, color, style on all four borders of an object. You can set individual parts of a border by using border-bottom-width, border-top-width, border-left-width, and border-right-width.

border-style This sets the border style of all four borders of an object. Values can be none, dotted, dashed, solid, double, groove, ridge, inset, and outset. Borders can be individually set by using border-bottom-style, border-left-style, border-right-style, border-top-style.

border-color This sets the border color by using HTML Hexadecimal codes.

border-width This sets the width of all four borders. Values can be thin, medium, thick, or a length value. You can define individual parts of a border by using border-bottom-width, border-top-width, border-left-width, and border-right-width.

font-family This sets the font face. More than one font can be listed, in case one is not present on the computer viewing the page.

font-size This sets the Font size. This can be an absolute, relative, or percentage value.

font-weight Values include: normal, bold, bolder, or lighter.

font-variant Values include: small-caps or normal.

Useful Tip:

This is a very useful tip if you don't want to change the CSS styles on all of your pages, you do this by implementing the <LINK> command to use an external CSS file, this is very easy to do, by using a well designed external CSS file it allows you to drastically change the look of all of your pages on your site, while only changing one file. To do this, you first have to make a text file named mystyle.css using any text editor. This file can look like this:

BODY { background-color: #CCFFCC;
                font-family: Arial, Delvetrica, sans-serif;
                color: #330066;
                padding: 50px, 70px
A:link { color: #CC9900 }
A:visited { color: #660000 }
A:hover { color: #FFCC00 }
A:active { color: #FF0000 }
H1 { color: #996633;
                background-color: #FFFFCC }

Whenever you want to use this CSS, you only need to place the following between the <HEAD> </HEAD> tags in your HTML file:

<LINK REL="stylesheet" HREF="mystyle.css">

Another way of implementing the use of CSS into your site, is to use inline styles. You can use this when you want to have a style defined for one element on your page, not the whole page or site. You can use the <SPAN> </SPAN> and STYLE.

An Example:

<P style="color: red; font-family: arial; font-weight: bold">
This paragraph uses the font 'arial' in red and bold</P>

<P>This paragraph is divided up using the 'span' tag.

<span style="background-color: #123456; color: #FFFFFF">
Background Color.</SPAN>

<SPAN STYLE="font-family: courier; size: medium">
Medium Courier.</SPAN></P>

Note: You can assign the <SPAN> </SPAN> tags and STYLE attribute with any HTML tag except the following: <BASE>, <BASEFONT>, <HEAD>, <HTML>, <META>,
<PARAM>, <SCRIPT>, <STYLE>, and <TITLE>.