heading in dreamweaver

[ilikephp]

helloo,

 

why when I put  the yellow style with a heading 2 for example, I get it in Bold?

if I put only: paragraph, I dont get the bold! thxx...

 

this is my css style:

 

BODY {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 16px; PADDING-BOTTOM: 0px; MARGIN: 1em; COLOR: #555555; LINE-HEIGHT: 25px; PADDING-TOP: 0px; FONT-FAMILY: verdana, Arial, Helvetica, sans-serif

}

 

H1 {

FONT-SIZE: 18px; COLOR: #333333; LINE-HEIGHT: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

}

H2 {

FONT-SIZE: 16px; COLOR: #333333; LINE-HEIGHT: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

}

H3 {

FONT-SIZE: 14px; COLOR: #333333; LINE-HEIGHT: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

}

H4 {

FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

}

 

.yellow {

color: #FFC600;

font-weight: none;

}

[ToonMariner]

first off - your CSS 'should' be in lowercase characters for the properties...

 

the reason font-weight: none doesn't work is because none is not a valid value for font-weight so it will revert to the previous setting.

[TheFilmGod]

use "font-weight: normal;" instead.

[ilikephp]

thanks a lot it works (Y)

 

but by default, the Bold is taken?

 

if I have 2 forms of text: one with bold and another without Bold:

should I need to creake 2 styles?

 

Thx...

[haku]

Boldness can be inherited from ancestor elements (element that contain an element). So if you have font-weight: bold; set on a div for example, then elements that are inside that div will also be bolded, unless you set the font weight to normal.

[ilikephp]

thanks for th answer!!

still have this question please:

this form is correct?

 

 

.yellow {

   color: #FFC600;

   font-weight: normal;

}

 

 

.yellow {

   color: #FFC600;

   font-weight: bold;

}

 

or there is another way? for example I press the "B" Bottun?

[dbrimlow]

Try to eliminate repeating default elements that you have already set.

 

The beauty of css is that once you set defaults , you only need to CHANGE those values when they actually differ from the default.

 

For example, in your body tag you specify "font-family: Verdana, Arial, Helvetica, sans-serif". That sets the font default for the entire document - you don't need to specify it again.

 

For every element thereafter, you no longer need to set the font-family (unless you specifically want it to be different than the body default).

 

HOWEVER, if you specify a different font-family for a container, all child elements within that parent container will now use the parent font by default and you would have to specify them if you wanted to return to the body default.

 

The same goes for color. If you set the body default to "color:#555555". All elements will use that color unless you want it to be different.

 

The main reason for using CSS is to eliminate clutter in your markup. Using the "b" or "strong" tags in the body markup just adds more "weight" to your page.

 

By default, headers are bold. If you want a header tag to not be bold, "specify" it in the css as follows:

 

h1.yellow {

  color: #FFC600;

  font-weight: normal;

}

in the markup it will be

<h1 class="yellow">HEADER</h1>

[TheFilmGod]

h1.yellow {

  color: #FFC600;

  font-weight: normal;

}

in the markup it will be

<h1 class="yellow">HEADER</h1>

 

Although this is perfectly correct, I would never use this style of coding.

 

Instead I would do this:

 

<div id="main">
<h1>HEADER</h1>
</div>

 

CSS:

#main h1 {
font-weight: normal;
}

 

Why? Well first of all, as stated before, dbrimlow's way is perfectly correct, but it lacks in the way because it still adds "weight" to the markup.

 

You do not have to specify a specific class for each <h1> <h2> you use in the html. Instead, you take the parent div (#main) and add a "h1" to it. It's easier and simpler to control. Of course, at times specifying a class is necessary since you may want a different <h2> 's in the same parent div.

[dbrimlow]

but it lacks in the way because it still adds "weight" to the markup.

 

Actually, TFG your are correct when you say you should eliminate extra weight in the markup ...

 

Which is exactly why I did it this way. One should avoid "Divitus" at all costs.

 

Style the html TAG itself, rather than surrounding it in yet another DIV container when unnecessary.

 

In every case that you can avoid using a div container by simply adding a class to an html tag, you will have cleaner, "leaner" and properly semantic markup.

 

For the most part "DIVS" should be limited to the layout wire-frame and out of the way of proper semantic block level tags.

 

BUT, I think where you were going was to say that you don't need to limit the class  .yellow to h1.yellow.

 

And that's true. You could add .yellow h1 {font-weight:normal}.

 

This will still let you avoid the extra div tags and simply apply the class to the H! tag as I mentioned before.

 

 

[TheFilmGod]

I don't won't to argue with you dbrimlow, because losing ' class="yellow" ' is a very nominal amount of code.

 

HOWEVER, I do want to clarify my point. I didn't mean to add another div, I was simply stating that you can use the parent div, the div that the <h1> is already in to style it. Furthermore, there is NO REASON to have to add a class for a <h1> element, because as you have stated in previous posts, your page should have only 1 <h1>... for obvious reasons, therefore, eliminating the whole .yellow class.