13 February 2008

INTRODUCTION TO CASCADING STYLE SHEETS

Posted by: admin in Uncategorized

1) What is Cascading Style Sheets?

Cascading Style Sheets (CSS, in short) are files that allow you to define and change certain properties of the objects that you might have on a web page.

2) What are the advantages of CSS?

By using CSS, you can assign unique class ID’s (will be examined in detail) to the styles that you’ve been created for certain objects in your document. Here’s a small example that shows what can be achieved with CSS: Let’s say you have a website that consists of 1000 pages. Normally, if you’d like to change, say the color of your header, you would have to edit 1000 pages! But, with CSS, all you need to do is to change the change the style that controls that class. You change a single line and you’re done! It’s easy as that.

3) The basic CSS syntax

In most cases, a style has the following parts:

a{
font-size:12pt;
}

Seems easy right? You’ll see that it is!

So, what if you don’t want all the links to be 12 pt? Let’s say you want the ones in your menu to be 20 pt and the ones in the content page to 12 pt. In order to do this you need to know another concept: Classes in CSS. A class dictates what kind of properties that an element will have. In our case, the code should be something like the following:

a.menu{
font-size:12pt;
}
a.content{
font-size:20px;
}

In your webpage you should write the “a” tag as follows:

<a class=”menu” href=”some_web_site” mce_href=”some_web_site”>

As it can be seen, you now have two different styles for the “a” (the Hyperlink) tag. This allows us to have more then one styles that’ll be associated with a given tag. This notation (tag “dot” class name) is called the class selector.

There is one more type of selector in CSS: The id selector. Let’s now take a look at what that is. An id selector lets you define the style of a certain area of your web page. For example if you want all the text in the “menu part” of your web page, you should assign a unique id to it. Here’s how you do it:

#menu{color:#FFFFFF;}

In your webpage’s body, you should seperate the menu divisionas follows:

Everything about the menu should be here, so they’ll be styled with your CSS!</div>So, now that you have covered the basics, how do you add attach a stylesheet to our webpage? For this, there are 3 different methods:

1) Inline method:

In this method you write our CSS code directly into the element that youwant the style to be applied. For example, if you want to change the background of an entire paragraph to black, and text color to white, here’s what you should do:

<p style=”background:#000000; color:#FFFFFF;”>
Everything you write here will have a black background and a white text color.
</p>

2) Embedded method:

This method is similiar to the previous one, although there is a small difference. Here, you don’t write the style directly into the element, instead you write it between the “<head>” and “</head>” tags. For the same example above, here’s what you should write:

<head>
<style type=”text/css”>
p.my_text{
background:#000000;
color:#FFFFFF;
}
</style>
</head>

So, the code in the body part will be:

<p class=”my_text”>Everything you write here will have a black background and a white text color.</p>

3) Linked method:

This is the last way of adding CSS to your webpage. Here, you create a seperate file, say “my_style.css” and write everyting in that file. In your web page, you attach it like this:

<head><link rel=”stylesheet” type=”text/css” href=”path/to/css/file”></head>

That’s it! The basics are done!

Tags: CASCADING STYLE SHEETS, INTRODUCTION, TO

Uncategorized,

Subscribe,

(No Ratings Yet)

126 views

This entry was posted on 13 February 2008 at 10:07 AM and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.