CSS - Suggestions for basic tag styling
Introduction
Here are some suggestions for basic xhtml page stying with a css style sheet using <div> tags (layers).
Sample code
This sample code employs a "container" <div> tag/box to contain and centre the whole site in a browser window, together with 3 <div> tag/boxes inside it (pagetitle, navigation, contentbox).
<body>
<div id="container">
<div id="pagetitle">
<h1>Matt's Fish Shop Deptford</h1>
<h2>We are south London's best quality best price seller of freshwater and sea fish</h2>
</div><div id="navigation">
<p><a href="sea.htm">Sea fish</a> </p>
<p><a href="freshwater.htm">Freshwater fish</a> </p>
<p><a href="openingtimes.htm">Opening times</a> </p>
</div><div id="contentbox">
<p>Welcome to the best fish shop on the net! Open 7 days a week. Online 24/7, our shop in Deptford market 8am to 8pm daily except holidays.</p>
</div>
</div>
</body>
Styles for the above code
Body tag attributes/settings
Font (define the font for the whole site here)
Background colour (define the colour of the browser window)
Container - Sizing and centering web site pages in a browser window
Create a ("container") div tag/layer to define the site size and centre your site pages in a browser window.
Positioning Type = relative
Width and Height = 760 x 490 (15" monitors) or 900 x 600 (17" monitors)
Margin left = auto
Margin right = auto
Background colour = choose a temporary colour so you can see the resulting box whilst you're making layout decisions
Additional div tags (nested within the "container" div tag) attributes/settings
Create boxes to position various page elements such as navigation bars, page title and content boxes. Our code uses "pagetitle", "navigation" and "contentbox".
Positioning type = absolute
Width = ?
Height = ?
Placement = use pixel values to place your box. Be careful NOT to specify left AND right or top AND bottom
Z-index = higher numbers are on top, lower numbers are underneath
Background colour = choose a temporary colour so you can see it whilst you're making layout decisions
Background image = select a jpeg or gif you have prepared and saved in your local site folder.
Text tags
Style your paragraph text (p) and headings (h1, h2, h3 etc) with ...
Type size
Type weight
Line height
Type colour
Margin top
Margin bottom
If you have specified a site wide font in the body tag, you will not need to repeat that specification in individual text styles.
Related downloads
None at present
Free music MP3s
