+- howtothings.co.uk (https://www.howtothings.co.uk)
+-- Forum: Computing (https://www.howtothings.co.uk/forumdisplay.php?fid=4)
+--- Forum: Website Development, Implementation and General Webmaster Support (https://www.howtothings.co.uk/forumdisplay.php?fid=9)
+--- Thread: Your basic CSS website layout (/showthread.php?tid=560)
Your basic CSS website layout - Mark - 22-11-2010
Your basic CSS website layout
First off, hi SHARN. SHARN doesn't know it yet but he is a web developer. I am doing my up most to drum him into it.
OK, now onto the good stuff. So, you have a website or you're thinking of creating a website? But.. the layout has stumped you. How do you get all that HTML goodness to look good and take up certain positions? The answer is CSS.
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- External Style Sheets are stored in CSS files
The basic CSS website layout
90% of the basic sites out there will take on the following layout if not very similar.
head
body
wrapper (contains header, menu and page)
header
- logo (the logo is normally within the header)
menu
page
- content (within the page)
- sidebar (within the page)
footer
What do i put in my CSS file?
So now that you know the basic layout we need to create it here, in your CSS file.
Let's just start with the basic div ids.
[code=css]
body {
}
#wrapper {
}
#header {
}
#logo {
}
#menu {
}
#page {
}
#content {
}
#sidebar {
}
#footer {
}[/code]
How to link to your CSS file
Add this line in the head tags of your html page.
[code=html]<link rel="stylesheet" type="text/css" href="style.css" />[/code]
It becomes a lot more advanced but i'll leave it there for today.