Learn CSS: An Introductory CSS Tutorial for beginners

Here this is a CSS tutorial for beginners, who know some basic structure of HTML Page. Here you will easily learn why to use CSS, how to use CSS, CSS structures.

CSS stands for Cascading Style Sheets. Styles were added to HTML 4.0.

Why we use CSS in Web Page?
Previously in HTML we can design our web pages with the help of HTML tags. HTML was not supposed to include design related specification. HTML is a markup language, which should do the work of telling "where is what".

IE and Netscape added many design related tags and it became difficult developing web pages which can be seen same in all browsers. So guidelines were needed for compatibility among different browsers. For this reason and other reasons W3C (World Wide Web Consortium) created STYLES in addition to HTML 4.0.

W3C is a non profit, standard setting consortium, responsible for standardizing HTML.

Style sheet solved many problems with separating design layout with markup language.
It makes site design easier for developers, rendering of pages easier in web browsers.
Now you can change design of many pages by changing at one location.

At a page, style is applied by number of Locations/Layers.

Layers are Browser default, External stylesheet, Internal style sheet
(inside the <head> tag), Inline style (inside an HTML element).
If you have applied font color at multiple levels then final color will be the color defined at "Inline Style".
So, priority wise
1. Inline Style,
2. Internal Style,
3. External Style, and
4. Browser default Style.

Using CSS instead of deprecated HTML tags, also provide speed benefits
to web page in browser.

So, now you are ready to make a routine for learning CSS for few months. Good.

Learn CSS: A Simple Introductory Approach

Here I will provide very simple approach for learning Cascading Style Sheet (CSS).

Probably you have used design tags which were creating a mess for HTML.
But we were using those having no option. Some of those HTML tags are
<b>, <font>, <i>, <u>, <center>, and so on.

So, now use <span style="property:value">You text</span> like these:
style="font-weight:bold" for <b>.
style="font-family:verdana" for <font face="verdana">.
style="color:red" for <font color="red">.
style="font-family:verdana;color:red" for <font face="verdana" color="red">.
style="font-style:italic" for <i>.
style="text-decoration:underline" for <u>.
style="text-align:center" for <center>.

Example: <span style="font-weight:bold">Bold text</span>.
"font-weight" is property and "bold" is their value.

As you know there can be four different layers affecting your text, you can use
three different layers: Inline, Internal and External. Above is a example for Inline style.

Code for Internal style (head section) and External style sheet (a separate file):
.boldtext { font-weight:bold; }
/* boldtext become a class. Imp.: See the dot ('.') before boldtext. */

For External style:
Create a file (say name is my_stylesheet.css) and paste the above lines in that file. Use
<link rel="stylesheet" type="text/css" href="my_ stylesheet.css" /> in head section in your document for Internal style sheet.

Use the above code like this:
<style type="text/css">
.boldtext {font-weight:bold;} /* any comment here */
</style>
in Head section for Internal style in your document.

Now you can use "boldtext" CSS class anywhere on page with any element like:
<p class="boldtext">Paragraph with bold text.</p>
<span class="boldtext">inline text with bold text.</span>

You can use External style, Internal style and inline style at a same time.
All will work according to their priority. Same class name in all levels with
same property will override each other according to their priority and class with
highest priority will be used.

/* */ is used for comment line in css.

Learn CSS: Part 2

<style type="text/css">
body {
font:normal .8em verdana, serif, tahoma;
background-color:#ffffff;
color:#000000;
}

td, caption, div, p, select, input, textarea, blockquote {
font-size:100%; font-family:verdana, serif, tahoma;
}
table {border-collapse:collapse;}

#border3 {border: 3px solid maroon; }

table.head {background-color:gray; color:#ffffff; font-weight:bolder;}

a:hover {font-weight:bolder;}

.italic {font-style:italic;} /* class for making text italic */

</style>

Here in above body {...}, I am applying all the property to all the elements
within body tag. Some did not accept inherited property. Generally
property used in body is not applied to input, textarea. So, I applied again
to all other tags through td, caption,.... You can see selectors (td, caption,..) can be grouped.

I am applying "border-collapse" to all tables. See the difference in table by
using first:
<table border="1">
<tr>
<td> TR 1 TD 1 </td>
</tr>
<tr>
<td> TR 2 TD 1 </td>
</tr>
</table>
and then commenting "table {border-collapse:collapse;}" above. To see the change
to location bar and press enter.

Use 'class="#border3"' in elements like DIV, P to see border effect.
I am using shortcut method border. So you now know, you can use shortcut also
in CSS. For above shortcut I have to use these line in general method:
#border3 {
border-width:3px;
border-color:maroon;
border-style:solid;
}
insteat of this: border: 3px solid maroon;

"table.head {}" will be applied to table only. Difference from above style
(table {...}) is: Here this will only to table with class="head".

"a:hover" is using pseudo class.

Example of border effect:
<div class="border3">
The CSS text properties allow you to control the appearance of text.
It is possible to change the color of a text, increase or decrease the space between
characters in a text, align a text, decorate a text, indent the
first line in a text, and more.
</div>

You have taken a quick tour to CSS. Now you have lot of information about CSS and
you can easily explore the net for more information about CSS.

After completing this quick tour, you may have many questions now about CSS, so now it will be easier to learn CSS for you.

Those who learn CSS are generally confused about <span> and <div>.
Previously you use <i>Italic txt</i>, now you will use
<span style="font-style:italic">Italic txt</span> or
<span class="italic">Italic txt</span>. Previously you use <table> for even
a single cell. Now you should use div for that. Using Div for table is difficult
for new learners. You need to learn "Positioning in CSS".
<p> and <div>: "P" will add newline before and after block of text inside "P",
Div will not.

Use this as your Next tour to CSS.

Top 10 Reasons to Learn CSS by "Christopher Schmitt"

Learn PHP: Introductory PHP Tutorial

All Smiles.

  • # 1 - by Eli

    Another nice feature I found for CSS beginners is a list of font family examplesOnce you figure out how easy it is to change font styles its fun to play around.

    Amazing how much different fonts change the look and feel of a website

  • # 2 - by Eli

    Another nice feature I found for CSS beginners is a list of font family examplesOnce you figure out how easy it is to change font styles its fun to play around.Amazing how much different fonts change the look and feel of a website

Comments are open for an year period. Please, write here on Facebook page.