| They
are identified with a unique id. You can
then add a style (css selector) that
specifically applies to the div of that
id. Remember to include the DOCTYPE (to
render your page accurately in the
browsers) and meta tags (enables search
engines to spider your pages). wrapper: is the
div that wraps around all the other divs
like a container for the page elements.
header: defines the top banner of the
page main: defines the main
content of the page nav: defines the
navigation of the page footer: defines
the footer and sub-navigation of the page
2.
Create the CSS code - the CSS code styles
the page as a centered 2 column CSS
layout with a navigation bar and a
footer. The div#wrapper style creates the
centered box which acts as a container
for the rest of the page content. The width:
80%
rule sets the width of the div. The background-color:#FFFFFF rule creates a
white background for the div. The margin-top:
50px
and margin-bottom: 50px rules create a
space of 50 pixels for the top and bottom
margins for the div itself.
The
proper way to center a block-level
element with CSS is to set margin-left:
auto
and margin-right: auto. This instructs
the browser to automatically calculate
equal margins for both sides, thus
centering the div. The border: thin
solid #000000 rule adds a border around
the outer div. The rest of the CSS code
styles the divs for the header, footer,
nav, and main content.
The div#header and div#footer styles set
margins and padding for those divs. In
addition, div#header includes the text-align:
center rule to center the header
text, and div#footer includes the border-top:
thin solid #000000 rule to create a border
along the top edge of the div to replace
the horizontal rule above the footer in
the table-based layout.
The div#nav and div#main styles create
the two columns in the middle of the
centered box. In the div#nav style, the float:
left
rule pushes the div to the left side of
its parent element (the wrapper div), and
the width: 25% rule sets the
div's width to 25 percent of the parent
element. With the nav div floated to the
left and limited to a set width, it
leaves room for the main div to move up
to the right of the nav div, thus
creating the two-column effect. The div#main style includes
the margin-left: 30% rule to keep the
main text aligned in a neat column
instead of spreading out below the nav
column. The main div's left margin is set
to a value slightly larger than the width
of the nav div.
Style
Sheet
http://www.isitebuild.com/css/stylesheet.htm
If links
are placed elsewhere on the page they
will inherit the same properties as
above..a blue link that hovers to red.
What if you wish to create another set of
links that are a different color and on
passing your mouse over them they are
underlined.
4.
Create the bottom navigation - to include
this in the section of the page, I use
div#footer and code each link
accordingly. To make the list go
horizontally I use: display: inline;
Now that
I have finished creating my style sheet I
want to shorten the code on page by
linking it to my external style sheet.
Here's how:
4.
Create an external style sheet - copy and
paste all the css code (without these
tags: <STYLE
type="text/css"><!--
--></STYLE>) into notepad and label
it something like "style
sheet". Place this style sheet
between the head tags of your web page.
This
will reduce the code on your page so it
will load fast plus the search engines
can more easily spider your web page.
4. Add
content to your page - after you have got
your page looking correctly, you can add
more content to it. Adjustments can
easily be made to any style on the page
(or your whole site) by simply editing
one style sheet.
5.
Upload your files - be sure to upload
your web pages and style sheet to the
root directory of your server.
6.
Validate your code - be sure to validate
your xhtml code: http://validator.w3.org/
and css code:
http://jigsaw.w3.org/css-validator/ and
make corrections where necessary.
7. Check
browser compatibility and screen
resolution - check that your page renders
well in the popular browsers (IE6, NN7,
Firefox)
If you
are beginning with CSS layouts, implement
then slowly by making small changes to
your pages i.e. creating a style sheet
for your main headers and fonts only. As
you become more familiar with CSS you may
eventually build all your future sites
with CSS layouts.
Resources:
Basic
CSS layout
http://www.isitebuild.com/css/css-layout.html
CSS
Style Sheet
http://www.isitebuild.com/css/stylesheet.htm
Benefits
of CSS
http://www.isitebuild.com/css/index.htm
|
Articles