Welcome to Tutorial 5 : CSS Basics. In this tutorial I shall show you how to use CSS files to make website creation easier and quicker. For example; It is far easier to write one piece of code once than have to write it 50 times for 50 webpages in a website.
Firstly I want you to open up Microsoft Visual Web Developer which is a free easy to use and powerful tool which will help you a lot in website creation. It can be downloaded from the Microsoft website.
I want you to start a new website. Make sure its an empty website, and then add both a HTML file and a Style sheet. Name them whatever you want.
Next I want you to open up the HTML file, as you can see the basic HTML structure is laid out for you already. Next in the head section I want you to type the following line
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
Make sure that you change StyleSheet.css to whatever you have named your style sheet.
Now we have a link to our style sheet from our HTML file.
Secondly I would like you to open up your Style sheet as we are now going to be writing some CSS!
If all goes to plan you should have something similar to this:
body{
}
This means that whatever you code into the brackets will directy effect whatever is in your &alt;body> tags which is your whole website.
Now I would like you to type in:
background-color:Red;
Now when you go back and preview your webpage it should have a Red background. As you can see this could be incredibly useful if you have hundreds of webpages all following the same design.
So congratulations you have completed Tutorial 5 : CSS Basics and background color.
Please stay tuned for more HTML and CSS tutorials and remember to follow my blog either view RSS or through blogger's follow function! Thanks!
Showing posts with label background color. Show all posts
Showing posts with label background color. Show all posts
Wednesday, 4 November 2009
Tuesday, 3 November 2009
Tutorial 2 : HTML Background Color
Lets add a bit of color to that boring old webpage we have right now. We can specify the background color by using the following:
<body style="background-color:teal;">
Save this and then refresh your browser which is viewing the page. The background of the page should now be the color teal.
But wait we can also do a lot more with the line of code above. For instance if we wanted to change the color of the text displayed we could just add:
<body style="background-color:teal; color:red">
As you can see all the text displayed on your webpage will now be red against a teal background.
You should play about with this a bit and see what colors you think go well together. This will also help you remember the line of code better as you will have had more practice with it.
congratulations you have completed Tutorial 2 : HTML Background Color
In the next tutorial we shall start to manipulate the text that you put into your webpage.
Subscribe to:
Posts (Atom)
Posts
