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 ...
- Create a new folder in your local site entitled something like "divexercise1"
- Create a new html page
- In code view add some <div> tags and within them some basic text tags and text (see "Sample HTML page code" below)
- Save the page in the folder ("page1.html" ?), and leave it open
- Create a new CSS doc
- Save it in the folder (perhaps naming it "styles.css" ?)
- Close it
- Link the CSS doc to the html doc
- 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).
<h1>Website/business name here</h1>
<h2>Website/business description here</h2>
<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>
<p>Welcome text etc here.</p>
</div> <!--container ends here-->
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.
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.
More CSS example are here