Style content inside a div without using <class>

[rogierius]

I would like to know if it is possible to style text within a DIV without the use of the <class> tag. The corresponding styling of the content is set in the CSS file. So whenever you're adjusting the contents and by using a <h1>, <h2> and <p> tags, the text inside your DIV is styled as is set in CSS. This way it would be much much easier to adjust content without the need to look into the CSS file to see the corresponding tag for each header, paragraph and other markup tags. That is what I have now and I feel there must be a better solution out there, preferably the one I described above.

I've read yesterday somewhere how to, but I lost the information and I don't know which keywords to use in Google to get the result I am looking for.

Here would be my setup in HTML and CSS:

HTML Code

<div id="end">
<h1> Bla bla title here bla bla.</h1>
<p>Bla bla paragraph here bla bla.</p>
</div>

CSS Code

DIV#end { 
margin: 0;
padding: 0;
}
.end h1 {color: #A8A8A8; font-family: 'Arial', Helvetica, sans-serif; 
font-size: 12px; font-weight: bold;}
.end p {color: #A8A8A8; font-family: 'Arial', Helvetica, sans-serif; 
font-size: 10px; font-weight: normal;}

My coding is not correct (it doesn't do squat). How would I need to code the above to get it to work?

[rogierius]

Well, it seemed I got the answer:

I have to style

.end h1

like:

#end h1

and presto, it works!

[rogierius]

I have an additional problem, now with the <a href> tag. It seems I can only define once the style of the <a> tag.

Whenever I want to use a link inside <p>, the styling is used I set for the <h1> link tag.

How can I use two different styles for the <a> tag?

HTML Code:

<div id="content_about">
<h1><a id="WHO" href="#WHO">WHO</a></h1>
<p>Bla bla. <a href="www.google.com">More BLA</a>, Blablaaa.</p>

CSS Code:

#content_about h1, 
#content_about a {margin: 0px; color: #61BDDD; font-family: 'Arial', Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-decoration: none;}
#content_about h2 {color: #61BDDD; font-family: 'Arial', Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none;}
#content_about p { margin: 0px; margin-top: 0em; color: #707070; font-family: 'Arial', Helvetica, sans-serif; font-size: 12px; font-weight: normal;}

[mattur]

Either style by ID or class:

a#who{...}
a.myclass{...}

or use selectors:

h1 a{...}
p a{...}
#content_about h1 a{...}
#content_about p a{...}

[rogierius]

Yeah, that did the trick. Thank you!