473,399 Members | 3,832 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,399 software developers and data experts.

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

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>
Jul 21 '05 #1
2 2960
JimO wrote:
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.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 21 '05 #2
JimO wrote:
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
Jul 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: David Henderson | last post by:
Hi There... I'm struggling with a problem: I have a string (coming from a rich text editor) which contains a variety of span tags that need to be replaced with corresponding formatting tags....
0
by: Paul McKenna | last post by:
Hello, I am having a lot of problems figuring out layout in CSS. There are a couple of problems that I am facing: 1. My layout requires me to have 3 sections at the top of the page. So I...
0
by: JimO | last post by:
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...
14
by: j1c | last post by:
How can I remove the content in between tags? I have a page that has several custom tags: <!--tag:1--> Content 1 <!--/tag:1--> <br> <!--tag:2--> Content 2 <!--/tag:2--> <br> <!--tag:3--> Content 3...
9
by: developer | last post by:
Does anyone know what is the way IE treats span tags(<span>) and table tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if it placed with other elements that are in a table? Can...
1
by: developer | last post by:
Does anyone know what is the way IE treats span tags(<span>) and table tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if it placed with other elements that are in a table? Can...
12
by: Oberon | last post by:
I have a large HTML document. It has hundreds of <span>s which have no attributes so these <span>s are redundant. How can I remove these tags automatically? The document also has <span>s with...
12
by: Stefan Weiss | last post by:
Hi. (this is somewhat similar to yesterday's thread about empty links) I noticed that Tidy issues warnings whenever it encounters empty tags, and strips those tags if cleanup was requested....
5
by: rodchar | last post by:
hey all, what's the difference between span and div tags? thanks, rodchar
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.