Introduction to Cascading Style Sheets (CSS) Part 1

VelMurugan · Jul 12, 2008, 07:56 PM

Why You Should Use CSS

The purpose of CSS is to provide webmasters more control over page layout and display than HTML offers. With HTML alone, there are various coding tricks that are used to help achieve the desired page layout. The trouble with that is those tricks often don't work the same, if at all, in all browsers. CSS standards were designed so that these tricks are no longer needed, so CSS is much more predictable and reliable than resorting to those old tricks.

Using a wall of your house for a loose analogy, HTML is the studding behind the wall; and CSS is the wall covering, colors, and placement of the content on the wall. In other words, when properly used, HTML defines the structure of your web page while CSS defines the appearance.

Aside from consistent display standards, one of the greatest benefits of using CSS is if you use external style sheets, you can make one change to the style sheet and have that change take place throughout your entire web site. There will be more about that later in this tutorial.

But What Are These Styles?

The styles are whatever you decide, within the structure of the language. For example, if you want all your H1 size headings to be in red text, and all your paragraphs to have the first line indented by 20 pixels, you can create the rules that define those styles. Once the rules are created, every time you use an H1 heading it will be in red text, and every time you start a new paragraph the first line will be indented by 20 pixels. Of course, if you want to, you can also override the style rules.

Creating a rule isn't as difficult as it sounds. A style rule is simply how you define an HTML element to behave. For example, to write the style rule so all H1 headings are rendered in red text, I'd create the rule in my style sheet like this:

h1 {color: red;}

There now, that doesn't look too hard does it? It really isn't hard. It's just a matter of learning bits and pieces of code as you need them, just as you did with HTML. Let's compare HTML to CSS to help you visualize the similarities and differences.

HTML Example CSS Example
<body bgcolor="black"> body {background-color: black;}

body is the HTML element body is the CSS selector
bgcolor is the attribute background-color is the property
black is the attribute value black is the property value

The CSS selector is merely the HTML element that you wish to set a rule for. The HTML attribute and CSS property are the same thing, although the actual terms (bgcolor vs. background-color) can be different. And both the HTML attribute and CSS property are given a value.

An HTML element is modified from the default value by either...

* giving the HTML element an attribute and value; or
* giving the CSS selector a property and value.

So you can see they both work similarly, only they use different terms and formatting. The advantages to using CSS is that you...

* only have to create one rule to effect the style each time you use an HTML element, whereas with HTML, you have to code the attribute into each use of the element.
* with CSS you can change one file and have that change reflected on every page of your site; whereas with HTML, you have to find and make that change in every place on every page that you used that element.

CSS Does More

Here are just a few things that you can do with CSS that can't be done in HTML alone without resorting to quirky tricks that don't work the same in all browsers:

* Set different page margins for all sides of your page.
* Set font size for any text element to the exact height you want, no more preset size limitations.
* You can highlight single words, entire paragraphs, headings or even individual LETTERS with different background colors, background images, text colors and fonts if you really want to go crazy bananas.
* You can overlap words and make logo-type headers without making images.
* Colored scrollbars! Note: colored scrollbars are NOT official CSS, they are a Microsoft extension to CSS so using colored scrollbars is technically an illegal code practice, but it doesn't cause any harm if you like them. Colored scrollbars also only work in Internet Explorer.
* Precise positioning of elements.
* Borders, border styles, backgrounds, margins, and padding can be set for any visual HTML element.
* Set the font for whole tables, no need to recode a font into each table cell.
* Make the first letter of each paragraph different, set letter spacing, change the space between lines of text, and much, MUCH MORE!

The only real disadvantage to using CSS is that not all browsers offer full support for it . . . yet. Even that disadvantage is minimal because well over 90% do support it extremely well; and the ones that don't offer full support do support the main features, it's the lesser known items they don't support, so your page will degrade fairly well in browsers that don't fully support CSS.

At some point everyone has to move into the future, and the time to start using CSS began long ago. One day, those surfers hanging on to older browsers will find few sites that work as intended, and webmasters will find their site design changing - not because they've changed it - but because they've continued using code that has become obsolete and is no longer supported.

ganeshbala · Mar 14, 2009, 08:23 PM

How to get it working?

You have to put the style definition in the <head> section.

Code Select

<HEAD>
<STYLE TYPE="TEXT/CSS">
<!--
.headline {font-family: Courier New;
font-size: 24pt;
font-weight: bold;
text-decoration: underline}
.topic {font-family: Arial;
font-size: 14pt;
font-weight: bold}
.text {font-family: Arial;
font-size: 10pt}
.example {font-family: courier new;
font-size: 10pt;
line-height: 120%;
color: red}
-->
</style>
</HEAD>

.headline is the name I use to represent 16pt bold Courier New underline text. When I want to apply this rule to my text such as the headline of this page, I just simply put tag in front of my text -- e.g. I have put in front of headline text on this page. This rule also applies to other definitions that I have set (e.g. topic, text, example). Now, it isn't hard to guess that I use as an ending tag.

Still not clear? Here is what I did to the above paragraph:
 .headline is the name I use............. an ending tag.

In order to deal with browsers that do not support Style Sheets, I have put the font face attribute tag before my text. So, now my page can display in both Style Sheets supported and non Style Sheets supported browsers, and it still looks the same.

Remember to put in front of font face attribute because IE 3.0 will read Style Sheets tag. Other browsers can't read Style Sheets tag and will read your next tag such as or whatever. If you still aren't clear on the use of Style Sheets, you can view HTML source for this page.

The SPAN Element is a Text-level element. That means it has to be placed around text. As you have seen from my example it resided in tag
 tag is just one way to link Style Sheets definitions to the sections of your pages. You can also use CLASS Attribute, ID Attribute, and DIV Element to reference Style Sheets definitions to HTML.

--------------------------------
Source : trips and tricks

Discussion Community

News:

Introduction to Cascading Style Sheets (CSS) Part 1

VelMurugan

ganeshbala