Using same id but different affect ?

Rommeo · October 27, 2007

Hi

i m new at css programming and i have some problems.

1-) i have declared "h1" in body. it contains " letter-spacing: 4px;" i also have "#footer" div. and i also have a " #footer h1 " my problem starts here. when i enter the website i also see that my "#footer h1" has also " letter-spacing: 4px;" but in my code i have not written that. how can i prevent the "h1" that i declared in the "body" to affect the "h1" in the "footer". ? i dont want to see 4px letter spacing in footer h1.

Codes :

h1 {
letter-spacing: 4px;
}
#footer  { some stuffs.
}
#footer h1 {
font-family: Tahoma, Verdana, Arial;
font-size: 10px;
} /* NO letter spacing here */

2-) in my code i defined body at the end of the code and i defined footer at the top of the code. Does it make any difference writing "body" at the end of the code ? or should i write body at the top and the footer at the end. ??

Thanx in advance.

i ll be glad if you can answer any of my questions.

Wuhtzu · October 27, 2007

h1 {
  letter-spacing: 4px;
  }

#footer h1 {
  font-family: tahoma, verdana, arial;
  font-size: 10px;
}

The above will cause #footer h1 to inherit letter-spacing: 4px; from h1. That's just how CSS works... You simply redefine / redeclare letter-spacing under #footer h1:

h1 {
  letter-spacing: 4px;
  }

#footer h1 {
  font-family: tahoma, verdana, arial;
  font-size: 10px;
  letter-spacing: 0;
}

Rommeo · October 27, 2007

Actually my h1 is like this :

h1 {
color: #FFFFFF;
background-color: #369;
text-align: left;
margin: 0px;
font-size: 14px;
font-family: Tahoma, Verdana, Arial;
padding-left: 5px;
letter-spacing: 4px;
padding-top: 2px;
padding-bottom: 2px;
}

So should i write the opposite of these at #footer h1 ?? i dont want these to affect #footer h1.

Wuhtzu · October 27, 2007

What ever you have applied to h1 and do not want to apply to #footer h1 you should redefine / redeclare in #footer h1.

I don't know what the opposite of padding-bottom: 2px; is, maybe margin-bottom: -2px;

Just stick to what I said at the beginning of this reply.

bronzemonkey · October 27, 2007

It would be easier for you to be more specific in your css file. For example, if your html looks like this:

<div id="container">
  <div id="header">
    <h1>Main Heading</h1>
  </div>
  <div id="content">
    <h2>Content Heading</h2>
    <h3>Content sub-Heading</h3>
  </div>
  <div id="footer">
    <h4>Footer Heading</h4>
  </div>
</div>

Then you could use css like this - #header h1 {} - to apply styles only to h1 elements found within the div with id of header.

However, it is a better idea not to use <h1></h1> in your header/content as well as the footer. Use a different heading element in the footer, like in the example html above, that makes logical sense given the structure of your document and the importance of the information being presented.

And if you want to change an inherited style of {padding-bottom:2px}, you simply use a different value for padding-bottom (like 0!), not a margin declaration.

Wuhtzu · October 27, 2007

Agreed bronzemonkey

Rommeo · October 29, 2007

Thank you so much for your answers. As you have said, i have declared a "h6" and i solved my problem.

i have also 1 more question ;

2-) in my code i defined body at the end of the code and i defined footer at the top of the code. Does it make any difference writing "body" at the end of the code ? or should i write body at the top and the footer at the end. ??

bronzemonkey · October 29, 2007

in my code i defined body at the end of the code and i defined footer at the top of the code. Does it make any difference writing "body" at the end of the code ? or should i write body at the top and the footer at the end. ??

The <body> tag is a fundamental part of the document and your footer should be within it. The basic structure of any html-based web document, for example using html 4.01 strict, should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>HC Web Designs</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css"></style>
</head>

<body>

</body>

</html>

- All html code is contained between <html></html>.

- Between the <head> tags you put your title, meta data, style declarations or links to stylesheets, javascript or links to javascript files, and so on.

- Between the <body> tags you put the html code that structures the content of your website. Make sure the code is structured in a logical way - would you want people reading the footer before they've read the headings and the main content of your website? Imagine that people are going to see your website a bit like a Word Document, with no styling, and that you want it to be accessible for them.

So the basic core of your website might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>HC Web Designs</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css"></style>
</head>

<body>

<div id="container">
   <div id="header">
      <h1>Main Heading</h1>
   </div><!-- end of header -->
    
   <div id="content">
      <h2>Content Heading</h2>
      <h3>Content sub-Heading</h3>
   </div><!-- end of content-->
  
   <div id="footer">
      <h4>Footer Heading</h4>
   </div><!-- end of footer-->
</div><!-- end of container-->

</body>

</html>

I hope this answers your question. I recommend that you look at the html tutorial here - http://www.w3schools.com/html/default.asp - for some simple explanations about html structure that will really help you to make progress with your website quickly.

dbrimlow · October 29, 2007

However, it is a better idea not to use <h1></h1> in your header/content as well as the footer. Use a different heading element in the footer, like in the example html above, that makes logical sense given the structure of your document and the importance of the information being presented.

To expand further on this, aside from overall sound structure of importance, it is also generally a good idea to only use h1 once on each page for Search Engine Optimization - I always make it my site name (whatever.com) and use it in my header.

But, after that, think of using h2 through h6s the same way you would in a word processing document. Create your html markup, and don't even apply any CSS or layout to it yet. Just let it flow linearly from top to bottom using just headers, paragraphs and lists - as if you were actually making a web page from a Word document -- because this is how a search engine bot will see it anyway (once it strips all tags, styles and images) in order of importance. eg:

<body>
<h1>Site name</h1>
	<ul>
		<li><a href="#">Nav item 1</a></li>
		<li><a href="#">Nav item 2</a></li>
		<li><a href="#">Nav item 3</a></li>
	</ul>
	<h2>page title</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
	</p>

	<h3>1st major header</h3>
                       <h4>1st minor header</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy .
	</p>
                
                <h3>2nd major header</h3>
                       <h4>2nd minor header</h4>
	<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
	</p>
                       
                <h5>caption header</h4>

                <p>
	text of caption
	</p>

	<p>
		<< Previous page  Next page>>
	</p>
<ul>
	<li><a href="#">Footer item 1</a></li>
	<li><a href="#">Footer item 2</a></li>
	<li><a href="#">Footer item 3</a></li>
	<li><a href="#">Copyright © sitename</a></li>

</ul>
</body>

Make the header font sizes descending relative to the body font-size (higher than to lower than). That's why the format is generally h1 largest, h2 next, h3 and so on with h5 being equal to body font-size and h6 being actually smaller than the body size.

For example, if you specify a body font-size of 95% (for a "flexible" layout) then the header font sizes would be as follows (I specified generic margin and padding for h2-h6 to provide a basepoint, if necessary, when using a header for a specific ID or Class):

h1 
	{
		margin: 0;
		color: #FFFFFF;
                        padding: .3em 0 .3em .5em;
		font-size: 1.8em;
		font-weight: normal;
	}
h2, h3, h4, h5, h6 {margin: 0;	padding-top: 1em; }

#content h2 {font-size: 1.6em; color: #800000;}
#content h3 {font-size: 1.4em; color: #555555; padding: .25em;}
#content h4 {font-size: 1.2em;}
#content h5 {font-size: 1em;}
#content h6 {font-size: .9em;  padding: .2em; font-weight: bold;}
#footer h6 {font-size: .85em;  color:#FFFFFF; padding: .25em; font-weight: bold;}

I generally structure my headers as follows:

H1 is the main "site name", h2 is "page title", h3 for ALL major headings, h4 for sub-headings, h5 for caption or flyout ("minor") headings and h6 would be used smallest major heading in a class or ID (like a footer) where the font is traditionally and significantly smaller than the body).

TheFilmGod · October 30, 2007

Completely agreed, dbrimlow!

Remember that sometimes this isn't as important for some websites as others. - It is always important, but sometimes not as much.

Take an educational/government website, they should use this 100% of time. While an entertainment site targeted to the users with macromedia flash and high speed dsl wouldn't have to worry about it as much. Sometimes you have pages that can't be queried by a search bot e.g. mysite.com/profile.php?id=2, so heading tags aren't as important.

YOu should always strive to use them, but sometimes its not as important.

Rommeo · October 30, 2007

dbrimlow, bronzemonkey, TheFilmGod Thank you for your replies. Now again i'm changing my css file. But i still have some problems about my second question. Does the writing order of the tags make any difference ?

( i know you recommended me the order before but i wanna know if it makes any difference writing out of order. What kind of problems does it cause ? / How do you order your tags ? )

And as you said it's better to use h1 for site name ;

So my tags order should be like this ? :

i mean should i order my tags :

from most important to less important [if h1 is important for search-bot optimization]

( h1 > body > h2 >... >#footer p ) ?

or from top to bottom

( #header > h1 >.#leftmenu > #container > #rightmenu >...>#footer >body )?

or from biggest to smallest ?

( body > #container > ... #leftmenu > #righetmenu > #footer h1>h2>h3..) ?

bronzemonkey · October 30, 2007

But i still have some problems about my second question. Does the writing order of the tags make any difference?

I'm not really sure what you are asking since the question has already been answered, and illustrated, in the replies that dbrimlow and myself provided. Please read them again carefully, especially to understand what the <body> element is all about, and if you are still confused then check out the w3c schools tutorials on html - http://www.w3schools.com/html/default.asp

aleX_hill · October 31, 2007

Rommeo,

I am assuming that you mean that in your css code, does it matter whether you define #body styles before or after #footer styles. In the long run, it does not matter which way you define them. Where it does make a difference, though, is if you redefine a style. If you have a #footer at the top of your document, and a #footer lower down, the styles in the second #footer will take precedence.

I always suggest laying out the code in the same fashion as your html document as it makes things easier to find.

Alex

Rommeo · October 31, 2007

Alex_hill yes that was what i mean and thanx for your answer.

bronzemonkey thanks for your attention and the link. But why i am asking this question again ? Cause i m coding my styles ordered as you said. But sometimes i forget some tags or i need to add some tags. And dreamweaver automatically adds that tag at the bottom.

Like :

#header
.
.
#footer
#header p

with this complicated style it works. no problem... ( assume search-bots are not important. ) and i m trying and changing that tag's place and moving it to the top. it also works..i mix them ..again it works. but i m wondering if it causes a problem with different browsers. or maybe that causes some problems that i dont know. just wondering..

bronzemonkey · October 31, 2007

So you are talking about your css file? You keep mentioning "tags" as if you were talking about html...but I see that you meant "selectors"!

The order does matter in the css file (you're correct about search-bots) and I would avoid using the visual interface in dreamweaver to edit the css file. Instead, go into the css code and add the styles manually to avoid any potential confusion or errors. Like aleX_hill said, the order of selectors in the css file is important because of "the cascade"...which can come in handy some times. For example:

#content-narrow, #content-wide {
width:400px;
padding:10px;
border:1px solid #000;
font-size:90%;
color:#fff;
background:url(images/content-narrow-background.gif) 0 0 repeat-y;
}

#content-wide {
width:800px;
color:#888;
background-image:url(images/content-wide-background.gif);
}

While most people will order their css in a way that reflects the html structure, some people prefer to separate the css into "layout", "links", "color", "text/font", "lists", "forms", etc. This way, if you want to change the color scheme of your site you can find all that information grouped together rather than having to search through the whole file for each color declaration.

So you're a bit more free to order the css in a way that is practical for your project or what works for you.

dbrimlow · October 31, 2007

Rommeo, what you are asking about is, indeed, extremely important for you to be clear on right from the start.

Above, bronzemonkey mentioned a word you should fully understand ... "selectors". This is what css is all about. When you said "tag", you actually meant "element".

SELECTORS actually "select" the ELEMENT in the html that you are trying to style (either a tag, a class or an ID). So h2 {} or p{} is a "tag" element, #content{} is an ID element and .clear {} is a class element.

Just so you know the proper "jargon".

Now, what you are trying to determine what is called "specificity" - which is the "Cascading" in Cascading Style Sheet" - SPECIFICITY determines the order of importance for selectors - or "which selector will over-rule in the event of duplicate selectors?"

More specific selectors will override more general ones. So "#content h2{}" and or ".content h2{}" will over-rule "h2{}" - because an ID or CLASS element selector is more "SPECIFIC" than a tag element selector.

This link is to a tutorial on this issue that is actually very easy to follow and understand: Selectutorial

Sign In

Using same id but different affect ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information