trying to figure out the difference between the Header tags, div, span, and p tags

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

JimO - 22 Feb 2005 23:40 GMT

I'm new to CSS and I'm trying to figure out the difference between the
Header tags, div, span, and p tags as they relate to style sheets. They
each render slightly different in the browser and accept different styles.
I was wondering if there is any hard and fast rule or if it's just a matter
of playing around and discovering ones preferences.

Thanks,
Jim

<html>
<head>
<title>Untitled</title>
<style language='css/text'>

h1 a {
background-color: lightgrey;
font-size: 2em;
color: white;
border-bottom: thick black solid;
text-decoration: none;
cursor: pointer;
}
h1 a:hover {
color: red;
}
p a {
background-color: lightgrey;
font-size: 2em;
color: white;
margin:0;
padding: 0px;
border-bottom: thick black solid;
text-decoration: none;
cursor: pointer;
}

p a:hover {
color: blue;
}
div a {
background-color: lightgrey;
font-size: 2em;
color: white;
border-bottom: thick black solid;
text-decoration: none;
cursor: pointer;
}
div a:hover {
color: green;
}

span a {
background-color: lightgrey;
font-size: 2em;
color: white;
border-bottom: thick black solid;
text-decoration: none;
cursor: pointer;
}

span a:hover {
color: yellow;
}

</style>

</head>

<body>
<h1><a href=''>This is the H1 Text</a></h1>
<p><a href=''>This is the p Text</a></p>
<div><a href=''>This is the div Text</a></div>
<span><a href=''>This is the span Text</a></span>

</body>
</html>

Reply to this Message

David Dorward - 23 Feb 2005 08:31 GMT

> I'm new to CSS and I'm trying to figure out the difference between the
> Header tags, div, span, and p tags as they relate to style sheets.

No difference, except for different default val

> They each render slightly different in the browser and accept different
> styles.

They accept the same styles, although it might not look like it.

span { width: 100em; } would have no effect, while h1 { width: 100em; }
would have an effect, but that is because the width property doesn't apply
to elements with display: inline. Change it to { display: block; width:
100em; } and it works on both elements.

What requirements there are for a property to apply are described in the
summery of the property in the CSS spec.

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

C A Upsdell - 23 Feb 2005 16:10 GMT

> I'm new to CSS and I'm trying to figure out the difference between the
> Header tags, div, span, and p tags as they relate to style sheets. They
> each render slightly different in the browser and accept different styles.
> I was wondering if there is any hard and fast rule or if it's just a matter
> of playing around and discovering ones preferences.

If you are learning, buy a good book. See, for example:

http://www.upsdell.com/BrowserNews/res_css.htm

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2005

trying to figure out the difference between the Header tags, div, span, and p tags