Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Inheritance 1

Status
Not open for further replies.
Michael42

Michael42

Programmer
Oct 8, 2001
1,454
US
Hello,

In using CSS that works with IE 5.5\NS7, I ideally wish to have most my CSS properties be inherited from a master object.

In my main.css file which CSS tag would most all other tag values be inherited from... body {} ??? OR div {} ???


Thanks,

Michael42
 
Sort by date Sort by votes
Only other [tt]DIV[/tt]s would inherit from [tt]DIV[/tt].

[tt]body[/tt] should do it, but you should double-check. Also, you might get unpredictable results using size and positioning attributes with [tt]body[/tt].

--
-- GhodMode
 
Upvote 0 Downvote
I ideally wish to have most my CSS properties be inherited from a master object.
Click to expand...
Which CSS attributes do you mean?

For example, a <ul> has an attribute of list-style, but the <body> does not. so even though a <ul> may be a descendant of the <body>, it can't inherit list-styles from the body because list-style is not an attribute of the body.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
Only other DIVs would inherit from DIV.
Click to expand...

Nonsense! Try this if you don't believe me:

Code: 
<html>
<head>
  <title>Red Letter Day</title>
  <style type="text/css">
      div {
         color: red;
      }

  </style>
</head>
<body>
   <div>
     <h1>Red is the Colour</h1>
     <p>Football is the game</p>
   </div>
</body>
</html>

Not all properties inherit by default, but those that do will be inherited from any element (be it <body>, a <div>, a <table> or whatever) by all the elements they contain (of whatever type).

The properties that are not inherited are (broadly) those relating to positioning, margins, borders, padding, and background colors/images (though a parent's background will show through if none is specified for a child). It's hopefully fairly intuitive which properties will inherit, consult this table if you're unsure (or just experiment!). Manarth's point about properties needing to be valid for the parent element is also a good one.

-- Chris Hunt
 
Upvote 0 Downvote
Thanks all for the responses! :)

I guess prior to tackling a major code rewrite I would like to use the most scaleable techniques with CSS. I have dabbled with CSS but really wish to get MAJOR mileage out of it.

This being the root of my question. To me it seems the "Cascading" (or inhertance) methods could go a long way???

What advice can you give please?

Thanks again,

Michael42

 
Upvote 0 Downvote
In my opinion try to write CSS that styles base HTML elements rather than produce lots of classes. This keeps your Markup nice and clean and retains it's semantic nature.

Use the cascading nature of CSS to do this.
For example list items in a div called "nav" look different to list items in the main body text.



For an example of what I mean, take a look at my site
I have avoided using classes and have stuck to basic HTML markup.
There are a few instances of inline styles, but they are simply because the site is always under development and I have been too lazy to go back and change the way they are done. ;)

Another example might be that you specify that all images in your page have a 1 pixel black border, yet you specify margins for image elements depending on where they appear on your page.

 
Upvote 0 Downvote
Foamcow said:
In my opinion try to write CSS that styles base HTML elements rather than produce lots of classes. This keeps your Markup nice and clean and retains it's semantic nature.
Click to expand...
Agree with that... lots of classes basically means "SS", not "CSS". And tags like H1-H6, CITE, CODE, LABEL etc sometimes seem to be completely forgotten.
 
Upvote 0 Downvote
ChrisHunt,

The table you mentioned rocks!

Thanks for posting,

Michael42
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
820
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
645
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
700
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
233
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top