473,758 Members | 2,401 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2974
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
1933
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. e.g. <span style="font-weight: bold;">line 2</span> needs to become
0
2212
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 broke these up into three divs each with float: left. But when I reduce the width of the browser each of these div wrap under the other. I thought putting overflow:hidden would help but it doesnt seem to. Can someone please help here.
0
1668
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 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
14
2158
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 <!--/tag:3--> If I only wanted to see the contents of tag 2 for example, how could I strip out 1 and 3?
9
7141
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 the span tag itself contain table tags within it? I have some scripting code and when I wrap the span in table elements it does not find the html within the span. Here is an example.... <tr><td colspan="4" align="left"><span...
1
3143
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 the span tag itself contain table tags within it? I have some scripting code and when I wrap the span in table elements it does not find the html within the span. Here is an example.... <tr><td colspan="4" align="left"><span...
12
5227
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 style attributes that I don't want to remove.
12
17114
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. This is okay in some cases (such as <tbody>), but problematic for other tags (such as <option>). Some tags (td, th, ...) do not produce warnings when they are empty.
5
296
by: rodchar | last post by:
hey all, what's the difference between span and div tags? thanks, rodchar
0
10076
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9885
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9740
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7287
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6564
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5175
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3832
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3402
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2702
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.