Today, we will begin to learn about how to design a page web by using CSS as our website page programming and this is the first lesson and I hope you have stayed in and prepare everything to support your learning. You perhaps question me? why CSS? and you see that many programmers or developers use others, like PHP, ASP.net, Coldfusion and so on.
A web page which is designed by CSS, for me, will make a web page accessed lighlty. This is an exact reason and other sites do as well like, yWorks joesoft7-developer.co.cc, smashing magazine (download css here), etc. For some (beginners), programming CSS is not simple and need big concentration to design a web and waste time and money. Look! we can use Dreamweaver designer, can't we?. I do as well. Allright now, prepare yourself, we will go to the point!
This following tutorial is only a little sample of writing CSS code to build a simple web page. Therefore, you can develop it for free.
1. Start with this tag
<html>
<head>
<title>your web page title here</title>
</head>
<body>
</body>
</html>
2. Put this code below between <head> ..... </head>. Here is the place we start to write CSS code.
<head>
<style type="css/text">
................................................. css code here ..........................................................
</style>
</head>
3. First, we configure a body of web page.
<style type="css/text">
body {
background: #FFFFFF ;
}
</style>
Note (background: #FFFFFF will make the background of page in white color. #FFFFFF is a code for white, you can also use others like #CCCCCC for grey color.
If you want to insert an image for your page background, you can use tag "url" which is picked from your folder (in your hosting root) or from other service, like photobucket.com. See this code below!)
<style type="css/text">
body {
background: url ( http://www.photobucket.com/..../...../bg.gif ) ;
}
</style>
note (or together with the color;)
<style type="css/text">
body {
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) ;
}
</style>
note (if you write the code with an image on it, your web page will be full of the image. To configure, you can use this following tags:
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) no-repeat;
a).note (use the above code "no-repeat" if you wish the image displayed originally)
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) repeat-x;
b).note (use the above code "repeat-x" if you wish the image displayed horizontally)
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) repeat-y;
c).note (use the above code "repeat-x" if you wish the image displayed vertically)
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) repeat;
d).note (use the above code "repeat-x" if you wish the image displayed both vertically and horizontally. you can also omit the tag to do so.).
Please feel free to download this page below!
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) no-repeat;
a).note (use the above code "no-repeat" if you wish the image displayed originally)
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) repeat-x;
b).note (use the above code "repeat-x" if you wish the image displayed horizontally)
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) repeat-y;
c).note (use the above code "repeat-x" if you wish the image displayed vertically)
background: #CCCCCC url ( http://www.photobucket.com/..../...../bg.gif ) repeat;
d).note (use the above code "repeat-x" if you wish the image displayed both vertically and horizontally. you can also omit the tag to do so.).
Please feel free to download this page below!
Programming CSS for beginner - Lesson 1 -
