CSS stands for cascading style sheet, this is the document that will contain all of the information required to make your site look more appealing to the people reading it. Some of the things that CSS files can do are as follows: give areas of the page or the page a background, change the font and font color, and manage placement of div tags. Take note that the page created in this example is going to be very ugly and its sole purpose is to give you a better understanding as to how CSS works.
For the following we are going to use this as a layout and I would recommend that you use it as a base structure that you can build your site upon for the duration of this article.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head><body>
<div id=”container”>
<div id=”header”>
<h1>Code With Design</h1>
</div>
<div id=”sidebar1″>
<h3>navigation</h3>
<p>navigation links coming in another tutorial.</p>
</div>
<div id=”mainContent”>
<h1> Header 1</h1>
<p>Paragraph text.</p>
</div>
<br />
<div id=”footer”>
<p>Code With Design</p>
</div></div>
</body>
</html>
On this page we are going to work with styling the div tags. If you look at the code you will notice that the tags aren’t just a simple open and closing tag. These look differently because the div tags are named. This is important because the style.css file needs to know what to do with the separate content.
<div id=”footer”>
You are also going to notice that in the head of the file there is a link to the style sheet. If you where to put your pages into a separate folder you would have to change the link because it is relative. You can also call on it through a URL.
<link href=”style.css” rel=”stylesheet” type=”text/css” />
If you need to push the link back use ../ before style.css
<link href=”../style.css” rel=”stylesheet” type=”text/css” />
Now that we have gone over how to properly link to a style sheet it is time to take a look at what an actual style sheet. The beginning of a style sheet will contain some simple code then will start to stylize the body. All of the content within the style.css sheet will be named as divs and other parts of content such as p for paragraph or hover for content with a mouse over. The attributes that go with these separate sections are placed within curly bracers.
@charset “utf-8″;
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header {
background: #ffffff;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#sidebar1 {
float: right;
width: 200px;
background: #ffffff;
padding: 15px 10px;
}
#mainContent {
margin: 0 250px 0 0;
padding: 0 20px;
}
#footer {
padding: 0 10px 0 20px;
background:#ffffff;
}
#footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Because I intend on linking an image to this page I want to make sure that the image will not have a border when I mouse over it. So in this demo I will first add an image that is linkable to the index.php page. The code looks like this.
<a href=”http://www.google.ca/”><img src=”http://www.google.ca/intl/en_ca/images/logo.gif” alt=”” name=”image” width=”276″ height=”110″ id=”image” /></a>
Place the code into the main content div of your page and preview the page before changing the CSS so you know what the browser will want to do automatically. Now that you can see the large blue lines around the image you can place this code into the style.css page. As long as the code is not placed inside of another attribute it will work, it is a good idea to keep the separate styles close together based on where they come on the page so you may want header first then content followed by sidebar then footer.
#mainContent img{
float:left;
border: 0px;
text-decoration:none;
}
Because the CSS entered above has a hash sign followed by the content section and a space with “img” typed after; the following effects will only apply themselves to images inside of the main content. If you would like all of the images to display no border then you would have to enter the following code.
img {
border: 0px;
}
This is a very important technique when styling a page and it comes in handy quite often. If I wanted the paragraph to be indented 20 pixels and the header to only be indented 10 pixels I would use a very similar method.
#mainContent h1,h2,h3{
padding-left: 10px;}
#mainContent p {
padding-left:20px;
}
In order to give the page some boarders we could use the simple code.
#container {
border: 1px solid #444444;
}
Now you should have a simple understanding as to how CSS files can effect your document and one of the great things about them is that you can easily style all of the pages on your website by just linking back to the style sheet. This way if you need to change the look of something all you need to do is update the style.css file.
