Beginners CSS Tutorial

July 12th, 2012 | No Comments | Posted in Php & MySql, Programming

Learn CSS (Cascading Style Sheets) With Me . This is an easy way to learn css step by step for the beginners to learn css

CSS is an extension to basic HTML that allows you to style your web pages.

Easy example to make the word bold:

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1


hello

Output :

hello

If you want to make hello bold what you will do? you do like this

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1


hello

hello

we have make bold the word hello, but we wrote the code within the body. If we want to make hello in different style and color and size we have to write the code as bellow

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1


hello


Output :

hello

If we write other test with different style and color we have to write the code as below:

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1


hello

This is my frist CSS


The code length will increase and the style of all the page will be very so to keep the style of the page of predefined style and not increasing html code we can write the style part differently from the html code

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1



Hello
hello how r u

another example:

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1



Hello

hello how r u



We can make another style file that is call external stylesheet. Now we r going to add another file called style.css

write the above style code on style.css and just add the link of the file in the head section

write the code in style.scc:

b{color:#FF3300;}
h3 {color:#009966;}

dont write the below code in style.css file it is just to link with html file.

now link the html with style.css file

write the above line in head section of your html file as below

ldquo;-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


Lerning Css Is Easy Step 1



Hello

hello how r u



Keep in mind that mystyle.css and the html file are in the same directory

Leave a Reply 293 views, 2 so far today |

Most Commented Posts

Leave a Reply

CAPTCHA Image
Refresh Image
*