CSS - Suggestions for basic tag styling

Here are some suggestions for basic html page stying with a css style sheet using <div> tags (layers). You could use these suggestions as part of a simple exercise ...

  1. Create a new folder in your local site entitled something like "divexercise1"
  2. Create a new html doc
  3. In code view add div and basic text tags (see "Sample HTML page code" below)
  4. Save the doc in the folder ("page1.html" ?), leave it open
  5. Create a new CSS doc
  6. Save it in the folder ("styles.css" ?), close it
  7. Link the CSS doc to the html doc
  8. Create style rules in the CSS (see "Styles for the above code" below)

Sample HTML page 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>Wesite/business name here</h1>
<h2>Wesite/business description here</h2>
</div>

<div id="contentbox">
<p>Welcome text etc here.</p>
</div>

<div id="navigation">
<p><a href="index.htm">Home</a> </p>
<p><a href="page2.htm">Page2 title here</a> </p>
<p><a href="page3.htm">Page3 title here</a> </p>
</div>

</div> <!--container ends here-->
</body>

Styles for the above code

Body tag style

  • Font (define the font for the whole site here)
  • Background colour (define the colour of the browser window)

Text tag styles

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.

Container style (including 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

An example is here

Additional div tag styles (nested within the "container" div tag)

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.

CSS examples

More CSS example are here

Related downloads

None at present

Related ads