StyleSheets
Now a days stylesheets play a important part in web site design. Just imagine you have completely designed your site and you are about to upload it, your boss says the color theme of the website has to be changed. In earlier days when there was no stylesheet, you had to manually edit all the files and update it. Just image you have around 400 pages in your site. It would involve lots and lots of work. But using stylesheet you can just do that very very easily. Had you used a stylesheet, all you had to do is change the color in the stylesheet and the whole site would reflect the change.
So how to you create a stylesheet?
You can create a stylesheet using a notepad, or progams like Dreamweaver, etc.
So I will teach you how you can create a stylesheet and apply it in for a webpage.
Create a new file using notepad and name the file stylesheet.css
Copy the following code into the file stylesheet.css
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
A typical HTML file consists of the following code
<html>
<head><title></title></head>
<body></body>
</html>
You might be wondering how will we link between the Html file and the stylesheet. There are two simple ways of doing it, you place the code in the head section using style tags.
<html>
<head><title></title>
<style>
body{
font-family: Arial,sans-serif;
color: #CCCCCC;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body></body>
</html>
If we do this it is called inline styles. The styles apply for content of this page. On the otherhand we will still face the problem we faced earlier, if we want to change the background of a page, you have to still change in all pages. On the otherhand, we can link between the stylesheet we created and the html page using the following code. This code is placed in the head tag of the html file. So since this is an external file, all the change you have to make in style are made in stylesheet.css and you whole website is reflected by the changes in the stylesheet.
<link rel="stylesheet" href="stylesheet.css" type="text/css">
So what does the above code mean, first body applies for content inside body tag. The font-family is the list of font faces we want our font to be displayed in. In this case, we are using Arial, if Arial font is not available in the system of the client, the sans-serif font will be shown or else font will be displayed in the default font installed in the system. The second line color, we can say in what color the text for our pages must be displayed. So if you want Red font you use color: #ffffff or if you want black color, you use color: #000000. In this way you can denote the color of the text displayed in your pages. Similarly, you can set the left margin, top margin for your page. In the above code we have set the margin: 0px and padding is 0px.
Handling of various areas or parts of the website.
Most often you can classify your site areas as header region, navigation region, main content etc. This is for easy maintenance. The tutorials about this in the next session coming soon.
Exercises:
Create a website with a single page and have inline styles defined.
Try experimenting by changing the margin to 10px and padding to 5px in a page in the stylesheet.
Create a website with multiple pages and have external stylesheets and find out the time taken to make changes to the external stylesheets.
If you are using programming languages like asp.net or java or php, try changing the look and feel of the site by making the user select a theme. (Eg. blue, green, yellow, red etc) (Hint: Have the stylesheet defined in different folders like red, blue, green, yellow, etc and according to the selection made by the user make the like stylesheet field dynamic). I will give you a simple example in the next tutorials. In the meantime if you have any doubts please contact me. (swarnaj at gmail.com). Try to use session and cookies if you want to maintain the theme selection across multiple pages.
Create a website with multiple pages. The background color of all pages is red. The foreground color is black. Font displayed is verdana. You design your online resume using this.
