Main:
Basic CSS tutorial for newbies.
1.CSS Intro:
What is CSS?:
CSS stands for : CSS stands for Cascading Style Sheets.
And its a language for formatting HTML document, And show how the HTML Tags should be formatted/displayed.
Why CSS?:
CSS can style your HTML document, which is by default, a static and 90% styleless.
CSS make your web page attractive and good-looking, and users will love to visit it.
CSS is flixable and makes your HTML code clean...How?:
If you wrote for an example an HTML table, and wanted to style it (background color, cellpadding, cellspacing, etc, etc...):
<table>
<tr>
<td bgcolor="yellow">
<font color="#e0e0e0" size="2"> Hi, this text is in the table's cell. </font>
</td>
</tr>
</table>
But if you had styled the table in a class/id, you will have to do :
<div id/class="the class or id you mentioned">Table here without bgcolor and stuff </div>
Or you can define a class for the table and tds etc...
2.CSS Syntax:
CSS is simple and clear.
but, its too sensitive to the syntax. and all the code must be lower-case
CSS is written that way :
tag/selector {property: value}
The selector/tag is teh HTML element/tag you want to style, property is the attrib to the tag which requires a value.
If you needed to define more than one property, like this:
selector {
property: value
property2:value
}
You will have to put semi-colons/terminator after the value or to separate properties.
To make your code more clean, you may write all of selector, property and values, on a separated lines
like this:
selector
{
property:value;
property2:value
}
It will be more readable and easy to read/modify...
A nice tip in CSS
you can group some of selectors, and separate them with commas ","
h1,h2,h3,h4,h5
{
color: yellow
}
Class:
You can make more than one selector, but defines their classes:
p.right
{
color:green;
text-align:right
}
p.left
{
color:yellow;
text-align:left
}
And the HTML code will be :
<p class="left">
Left aligned
</p>
<p class="right">
Right aligned
</p>
To apply more than one class in one given element syntax will be:
<p class="right bold">
Text here.
</p>
It will be styled by the class "right" AND the class "bold".
You can also make a "common class"
like this:
.right
{
color:green;
text-align:right;
}
<h1 class="right">
Header with right align
</h1>
<p class="right">
This paragraph will also be right-aligned.
</p>
Starting a class name with a number will NOT work in Mozilla Firefox.
id:
The style below will match the element that has an id attribute with a value of "green":
like:
<h1 id="green">H1 font with ID </h1>
#green {color: green}
Starting an id name with a number will NOT work in Mozilla Firefox also.
3.CSS Comments:
Comments are used to make the code more clearer, and more easy to reach the part you want in the CSS.
/* This is a comment */
There are two ways to include the CSS into the HTML document:
First one:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
where "mystyle.css" is the file which contains the CSS code.
Second:
To embed it in the HTML code:
<head>
<style type="text/css">
body
{
color:green
}
</style>
</head>
To hide the code from Old browsers which doesn't recognize <style> tag:
You hide it in an HTML element:
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
4.CSS Small reference:
Background:
-background: declearate all background properties in one property
(e.g background-color
background-image
background-repeat background-attachment background-position)
background-color: defines the background color : color-rgb, color-hex, color-name,
Border:
border:A short property for setting all of the properties for the four borders in one declaration
(border-width, border-style, border-color)
border-style: sets the style of the border
(values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset:)
Classifications:
cursor:defines the cursor to be displayed on the desired element.
(values: url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, -resize, w-resize, text, wait, help )
Dimension:
height: defines the height of the element
(values: auto, length, %)
Width: defines the width of the element
(values: same as height)
Font:
font-family: defines type of the font.
font-size: size of the font
(values: number, %, px)
font-style: sets style of the font
(values: normal, italic, oblique)
font-weight: defines the weight of the font
(values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
Padding:
padding-(left/right/top/bottom); sets the padding of the element.
(values
length
%)
Text:
text-color: defines color of the text.
text-decoration: defines the text decoration (values: bold, underline, italic, none)
text-align:sets the align of the text (values: left, right, center, justify)
Margin:
The CSS margin properties define the space around elements.
margin-(top/bottom/right/left)
values: auto, length, %)
What is CSS?:
CSS stands for : CSS stands for Cascading Style Sheets.
And its a language for formatting HTML document, And show how the HTML Tags should be formatted/displayed.
Why CSS?:
CSS can style your HTML document, which is by default, a static and 90% styleless.
CSS make your web page attractive and good-looking, and users will love to visit it.
CSS is flixable and makes your HTML code clean...How?:
If you wrote for an example an HTML table, and wanted to style it (background color, cellpadding, cellspacing, etc, etc...):
<table>
<tr>
<td bgcolor="yellow">
<font color="#e0e0e0" size="2"> Hi, this text is in the table's cell. </font>
</td>
</tr>
</table>
But if you had styled the table in a class/id, you will have to do :
<div id/class="the class or id you mentioned">Table here without bgcolor and stuff </div>
Or you can define a class for the table and tds etc...
2.CSS Syntax:
CSS is simple and clear.
but, its too sensitive to the syntax. and all the code must be lower-case
CSS is written that way :
tag/selector {property: value}
The selector/tag is teh HTML element/tag you want to style, property is the attrib to the tag which requires a value.
If you needed to define more than one property, like this:
selector {
property: value
property2:value
}
You will have to put semi-colons/terminator after the value or to separate properties.
To make your code more clean, you may write all of selector, property and values, on a separated lines
like this:
selector
{
property:value;
property2:value
}
It will be more readable and easy to read/modify...
A nice tip in CSS
you can group some of selectors, and separate them with commas ","
h1,h2,h3,h4,h5
{
color: yellow
}
Class:
You can make more than one selector, but defines their classes:
p.right
{
color:green;
text-align:right
}
p.left
{
color:yellow;
text-align:left
}
And the HTML code will be :
<p class="left">
Left aligned
</p>
<p class="right">
Right aligned
</p>
To apply more than one class in one given element syntax will be:
<p class="right bold">
Text here.
</p>
It will be styled by the class "right" AND the class "bold".
You can also make a "common class"
like this:
.right
{
color:green;
text-align:right;
}
<h1 class="right">
Header with right align
</h1>
<p class="right">
This paragraph will also be right-aligned.
</p>
Starting a class name with a number will NOT work in Mozilla Firefox.
id:
The style below will match the element that has an id attribute with a value of "green":
like:
<h1 id="green">H1 font with ID </h1>
#green {color: green}
Starting an id name with a number will NOT work in Mozilla Firefox also.
3.CSS Comments:
Comments are used to make the code more clearer, and more easy to reach the part you want in the CSS.
/* This is a comment */
There are two ways to include the CSS into the HTML document:
First one:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
where "mystyle.css" is the file which contains the CSS code.
Second:
To embed it in the HTML code:
<head>
<style type="text/css">
body
{
color:green
}
</style>
</head>
To hide the code from Old browsers which doesn't recognize <style> tag:
You hide it in an HTML element:
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
4.CSS Small reference:
Background:
-background: declearate all background properties in one property
(e.g background-color
background-image
background-repeat background-attachment background-position)
background-color: defines the background color : color-rgb, color-hex, color-name,
Border:
border:A short property for setting all of the properties for the four borders in one declaration
(border-width, border-style, border-color)
border-style: sets the style of the border
(values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset:)
Classifications:
cursor:defines the cursor to be displayed on the desired element.
(values: url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, -resize, w-resize, text, wait, help )
Dimension:
height: defines the height of the element
(values: auto, length, %)
Width: defines the width of the element
(values: same as height)
Font:
font-family: defines type of the font.
font-size: size of the font
(values: number, %, px)
font-style: sets style of the font
(values: normal, italic, oblique)
font-weight: defines the weight of the font
(values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 )
Padding:
padding-(left/right/top/bottom); sets the padding of the element.
(values
length
%)
Text:
text-color: defines color of the text.
text-decoration: defines the text decoration (values: bold, underline, italic, none)
text-align:sets the align of the text (values: left, right, center, justify)
Margin:
The CSS margin properties define the space around elements.
margin-(top/bottom/right/left)
values: auto, length, %)
Posted by 
