CSS Tutorial Cascading Style Sheet

This tutorial is for beginners it tackles the basics of CSS. Requires basic HTML knowledge. This topic includes Advantages of CSS. Its parts and ways in adding it to the webpage

1.    CSS Using stylesheet

Advantages of CSS

Easy to arrange the lay-outs
Freeing you from the bondage of tables… thank you Lord.
Easy to update and alter the look of a webpage
Etc… etc…

Before we begin…
Remember first these two parts of CSS….

1. PROPERTIES or ATTRIBUTES
2. SELECTOR

p {

color:  #ffffff;
font-family: ‘Tahoma’, Verdana, serif;

}

h1 {

color: blue;
font-weight: bold;
text-transform: capitalize;

}

The p ( paragraph) as your selector
The color and the font- family as your properties.

The p applies to all the paragraph tag in your page. The color used to change the color of text its properties is in hexadecimal format. And the font- family as its font style. As you can see there are three values in the font-family properties. CSS permits the use of additional fonts.

But what does it really do?

First the font that it is enclosed in a quotation mark  is the font that the  browser will use if it is installed in your system.,  if it cant find the Tahoma font… the next font, in  our case, its verdana will be used as a substitute… but if  your unlucky and the browser can’t find the two fonts, it directs to serif as a default font in your webpage.

There are a lot of properties and selector in CSS. Try to visit the W3c site for more info.
Enough have been said. It’s up to you to dig some more about CSS… I don’t want to teach you to be lazy…  there are bunch of CSS tutorial on the Web; it’s up to you to type the exact keyword in your favorite search engine. I don’t want to spoil the fun of discovering it.

The next question is how will I put it in my HTML page?

Okay let’s go to that next topic.

There are three ways to put it in your webpage.

THE INLINE STYLE

Putting it inside the HTML tag.

Ex.
<html>
<head><title>SAMPLE TEXT</title></head>
<body>
<p style=”color: #ffffff; font-family: ‘Tahoma’, Verdana, serif;”> THIS IS MY TEXT</p>
</body>
</html>

The code is inserted inside the paragraph tag.

THE EMBEDDED STYLE

The code is  inside the head tag.

Ex.

<html>
<head><title>SAMPLE TEXT</title>
<!–
<style type=”text/css”>
p {
color:  #ffffff;
font-family: ‘Tahoma’, Verdana, serif;
}
–>
</style>

</head>
<body bgcolor=”#000000″>
<p> THIS IS MY TEXT</p>

</body>
</html>

With this kind of style it affects all the paragraph tag in the webpage. Unlike the inline styles that affects only the tag where it is inserted.

If you are familiar with this one I’m sure you are!!… But if not… let me introduce it to you it’s a comment tag. It’s a precautionary measure… used to ignore the style rule in an old age browser that doesn’t support CSS. But it’s okay to omit the tag… with the latest browsers and platform… I’m sure it is totally supported. But to make it sure that your page is backward compatible… Add it in your code. There’s no harm in putting it.

THE EXTERNAL

This one is great… one of the many reason why… I love CSS!  It’s like the gold at the end of the rainbow. Changing the looks and the interface of my pages has never been easy like these before.

This is cliché already… but it is not just hitting two birds in one stone. It’s like hitting 5 or more GIANT birds in one stone!

If you are new to CSS, I’m sure you will be amazed with this EXTERNAL thing.

Okay lets gets started.

In your html page.

<html>
<head><title>EXTERNAL</title>

<link rel=”stylesheet” type=”text/css”  href=”code.css” />

</head>
<body>
<p> THIS IS MY TEXT</p>
</body>
</html>

Save this file as   code.css
If you don’t have a CSS editor software, use the notepad as you editor.

p {
color:  #ffffff;
font-family: ‘Tahoma’, Verdana, serif;
}

Why use the EXTERNAL?

Okay let me explain.
Here are some of the reasons why I like this external thing.

Lets us say that you have 8 as in EIGHT html pages. And you want to change the background or the font color of all the information in your HTML page. Before,……
you have to painstakingly edit each page just to change the looks of your page..

But with EXTERNAL CSS all you have to do is to link the file to each HTML page.

<link rel=”stylesheet” type=”text/css”  href=”code.css” />

And when you want to edit the appearance of you page. (color, font etc) all you have to do is just open the file, example (code.css) and change some of the properties there.
See all you have to do is just edit a single file. You read it right only one file.

Automatically the properties of all the HTML pages will change.

Get my point?

Here’s Another one…
When the browser opens the page it loads the external style sheet. When you open another page with the same stylesheet it doesn’t need to load the stylesheet again. So the page is much faster to download.

Thanks Happy Coding..

Hala Bira Boys!!!



«
»
Related Articles
    No