Cascading Style Sheets (CSS)
to go to the HTML tutorial on Tags and some concepts.
HTML is The Basic Language of webpages and CSS is just one step ahead of the HTML. Here I just try to present how to create a stylesheet and how to link it with a webpage. Here is a small CSS file (see how simple it is )
/* CSS Document */
body{
background-color:#dfdfdf;
}
h3 {
text-align:center;
margin-left:5px;
font-size: 16px;
width:120px;
line-height: 25px;
color: #549DC7;
letter-spacing: -1px;
background: url('images/a22.gif') bottom repeat-x;
padding: 15px 10px 0px 3px;
clear: left;
}
p{
text-indent:75px;
padding-bottom:10px;
text-align: justify;
display: block;
width: 100%;
border: 1px solid #AFCEED;
}
Just Copy paste the above code into your favourite editor and just save it.. if you are using notepad, wordpad when saving click on "Save As Type" in the file saving pop up and select 'All Files' from the drop down. After that type the page name example firstpage style.css ! '.css' . Save it on desktop or any folder and the stylesheet has been created. Before going into what that really means, first I wish to tell how to connect this stylesheet with an HTML page.
Now a webpage to be created and stylesheet has to be linked with it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="all" type="text/css" />
<title>This is the title of Your Page </title>
</head>
<body>
<h3>Style For Everyone</h3>
<p>My First stylesheet. Here there will be a border to this text. Write some stuff here. The background colour of the body is also set. This is all due to the external stylesheet </p>
</body>
</html>
Now copy paste the above code in your favourite editor and "Save It as.." myfile.html . One thing that has to be observed is that the this file should be in the same folder as you have saved the style.css file. In the link tag the attribute href="style.css" tells the HTML file where the style file is . For example if myfile.html is in a subfolder of a folder style and the style.css is in the folder style then the link tag will be like this....
<link rel="stylesheet" href="../style.css" media="all" type="text/css" />
Means the relative path. Now open the myfile.html. just have a look how it is . The background colour may be looking quiet odd. Then better change it in the "style.css" , open the file with your favourite editor (can be a Notepad or Dreamweaver) and goto body{ and background-color:#dfdfdf; the code #dfdfdf is hex code for colour and can be changed. You can also use "red", "blue" etc. So the linking of Stylesheet is complete.Try removing the link tag and see how the page looks? In a style sheet one can define many attributes like even the behaviour of an anchor tag can be edited like what colour the anchor tag should have and wheter it should be underlined? How it should hover ? etc. Before going into more details. First of all why CSS??
Why I need a stylesheet ?
Now we have created a style sheet and we have successfully linked it with our webpage. Now why at all we require a style sheet. Here I try to present few advantages.
- First of all there are three ways of rendering style to HTML elements like rendering internal style with style attribute, using <style> tag with in the page and using an external style sheet. The hierarchy goes that style attribute preceeds <style> tag which inturn preceeds the external stylesheet. So once we make a external style sheet and set its attributes like background colour, border etc. there is no need for retyping the same stuff every time.
- As style attribute preceeds the external stylesheet if want we can change the attributes also. So once a stylesheet is created, it is just like a theme of the website. There is no need for writing attributes for each element. Just linking the stylesheet and carrying with the design.
- Sometimes (many times) we wish to change either the background colour or may be the border colour or may be font size of our website. Imagine the effort that has to be put to change on each page (if your site has some 100 pages ) . With an external stylesheet it is just simple. Simply edit the external stylesheet file and you are done. All webpages attached with are changed. How easy isn't it??