Layout: CSS Headings

started by Mattman on Jan 2, 2004 — RSS Feed

Mattman Mattman
Posts: 9

I want a set of headings but in different colours. I have tried making h1, h2, h3 etc different colours but the same font size. This very quickly uses up the headings and I'm not sure that it is the best way to go. How should I be doing this?

TIA Matt

Joe Gillespie Joe Gillespie
Posts: 528

Matt, you can change the definitions for any heading that is inside another div.  For instance, if you had two columns called #column1 and #column2, each column can have separate h3 (for instance) definitions. Simply specify them as, say

#column1 h3 { colour: red; font-size: 1em}
#column2 h3 { colour: blue; font-size: 1em }

Or you could create definitions for coloured headings such as

#greentype h2 { color: #2f2; font-size: 12px }
#purpletype h2 { color: #90c; font-size: 12px }

#greentype h3 { color: #3f3; font-size: 10px }
#purpletype h3 { color: #90c; font-size: 10px }

<div id="purpletype"><h3>this is purple h3</h3></div>
<div id="greentype"><h2>this is green h3</h2></div>

Note that I've used IDs and not Classes to make sure each one is unique.

Streamer Streamer
Posts: 3

why not do this:

.h3 { font-size: 10px }
.purple { color: #90c; }
.green { color: #90c; }

<h3 class="purple">this is purple h3</h3>
<h3 class="green">this is green h3</h3>

Dennis Dennis
Posts: 1

You know, I am *definately* a web newbie. When going to get my degree in art, one of the requirements was to make a webpage via html. I did it too- with flying colors. Shortly after that, they started to make WYSIWYG html editors. I bought Dreamweaver, did some very simple stuff. My career in print media took off. Now that I am venturing into a partnership- I am looking into web media again. Those editors for html have some along way. Looks as if I will only be learning the tip of the iceburg and will leave the web media for the firm in one of their hands. I am grateful I found this mecca for designers for web page design. The captain seems to have it *very* well together. Kudos and Thank you.

Suzanne Suzanne
Posts: 4

streamer said:
why not do this:


I think the example with the ids is simplified, but realistically you would have a <div> for each section of the web page, instead of classes through out. This helps keep the markup as clean as possible.

It looks a little overdone for the purposes of this example, but if you think of it as:

<h1>Page Title</h1>

<div id="news">
<h2>News Section Title</h2>

<h3>News Item</h3>

<p>News item details</p>
<p>News item details</p>
<p>News item details</p>

<h3>News Item</h3>

<p>News item details</p>
<p>News item details</p>
<p>News item details</p>
</div>

You can see that using classes would be more complicated and involve more duplication.

hth,

S

Vladimir Vladimir
Posts: 53

I would use classes for simple webpages without DIVs. For more complex pages with DIVs, I would prefer IDs combined with tag definitions to get more precise styling.

Jdenny Jdenny
Posts: 65

Use the force luke!

er, sorry, i meant use the cascade!

CSS is made for styling text with minimum code added the HTML.
Usiang classes everywhere is amature and how wysiwyg editors do it.

You must login to reply