freecrm
New Member
- Messages
- 629
- Reaction score
- 0
- Points
- 0
CSS stands for Cascading Style Sheets and can control your website appearance.
A mixture of css and <div>'s or (divisions) is an industry recognised way to control the layout of your web page or site.
Many users will be familiar with table layouts. Many WYSIWYG (What You See Is What You Get) editing programs such as Dreamweaver will create your page using tables and these will create a reasonable layout, but tables are harder to control and much less flexible.
A typical table layout would look like this..
For graphic websites, you can use this technique to insert graphic elements into each cell. This is commonly known as splicing.
This can also be achieved with <div>'s as well and this tutorial shows some of the basics of css styling.
Firstly, styling code can be applied directly to any element in a page
e.g.
This code simply places a single black line border around a box that you can insert content into
Alternatively, you can control the look of this division in the "head" section.
The in the "body" section..
These two sections have the same effect. You will note that I have iven the <div> a class name. A class is something that can be used again and again in a page.
For instance, you could do the following:
This creates two <div>'s, each with the same styling.
More commonly, you can specify the style of your page, or entire site by using a style sheet: an individual file, saved in your directory, that is referenced by each page.
Your file could be saved as "style.css" and would contain something like
Then in each page you want this style applied to it, you add this in the head section:
This is particularly useful, because once you have associated this one css file to all your pages in the site, once the css file is changed, all pages follow those changes.
This is the first part. If anyone finds this tutorial useful, I will continue with some other simple guides.
Hope it helps.
A mixture of css and <div>'s or (divisions) is an industry recognised way to control the layout of your web page or site.
Many users will be familiar with table layouts. Many WYSIWYG (What You See Is What You Get) editing programs such as Dreamweaver will create your page using tables and these will create a reasonable layout, but tables are harder to control and much less flexible.
A typical table layout would look like this..
Code:
<table><!--start of table-->
<tr><!--start of row-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
</tr><!--end of row-->
<tr><!--start of row-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
<td><!--start of cell-->
Cell content
</td><!--end of cell-->
</tr><!--end of row-->
</table>For graphic websites, you can use this technique to insert graphic elements into each cell. This is commonly known as splicing.
This can also be achieved with <div>'s as well and this tutorial shows some of the basics of css styling.
Firstly, styling code can be applied directly to any element in a page
e.g.
Code:
<div style="border:1px solid #000000;">
Division content
</div>This code simply places a single black line border around a box that you can insert content into
Alternatively, you can control the look of this division in the "head" section.
Code:
<style type="text/css">
.box{
border: 1px solid #000000;
}
</style>The in the "body" section..
Code:
<div class="box">
Cell content
</div>These two sections have the same effect. You will note that I have iven the <div> a class name. A class is something that can be used again and again in a page.
For instance, you could do the following:
Code:
<div class="box">
Cell content
</div>
<div class="box">
Cell content
</div>This creates two <div>'s, each with the same styling.
More commonly, you can specify the style of your page, or entire site by using a style sheet: an individual file, saved in your directory, that is referenced by each page.
Your file could be saved as "style.css" and would contain something like
Code:
@charset "utf-8";
.box{
border: 1px solid #000000;
}Then in each page you want this style applied to it, you add this in the head section:
Code:
<link href="style.css" rel="stylesheet" type="text/css" />This is particularly useful, because once you have associated this one css file to all your pages in the site, once the css file is changed, all pages follow those changes.
This is the first part. If anyone finds this tutorial useful, I will continue with some other simple guides.
Hope it helps.
