CSS - Suggestions for basic tag styling

Here are some suggestions for styling basic html tags such as text (h1, p, etc) and <div> tags, with a css style sheet. 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 page
  3. In code view add some <div> tags and within them some basic text tags and text (see "Sample HTML page code" below)
  4. Save the page in the folder ("page1.html" ?), and leave it open
  5. Create a new CSS doc
  6. Save it in the folder (perhaps naming it "styles.css" ?)
  7. Close it
  8. Link the CSS doc to the html doc
  9. Create new 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>Website/business name here</h1>
<h2>Website/business description here</h2>
</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 id="contentbox">
<p>Welcome text etc here.</p>
</div>

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

Text and div tag positioning styles for the above code

Body tag properties

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

Text tag styles & properties

Style your paragraph text (p) and headings (h1, h2, h3 etc) with ...

  • Type size
  • Type weight
  • Line height
  • Type colour
  • Margin top
  • Margin bottom

Because you have specified a site wide font in the body tag, you will not need to repeat that specification in individual text styles.

Planet Of Tunes TV

Centering a site in a browser window
YouTube button

Center the site in a browser window ("container" div tag and accompanying style)

Create an ID style for the "container" div tag specified above, in order to define the site size and centre your site pages in a browser window ..

  • create the "container" <div id> tag in your page code (see example above)
  • create a new CSS ID style
  • name it #container

Add the following properties to the style ..

  • 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)

Style the <div> tags/boxes within "container" to position the various page elements such as the navigation, page title and content <div> boxes. Our example code above code uses "pagetitle", "navigation" and "contentbox".

  • Positioning type = absolute
  • Width = 400?
  • Height = 200?
  • 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