Forum Moderators: not2easy
This is making me break more rules then I follow. Html tags should be used for semantic markup and not style. But I find that in many cases my <h2> on one page differ from the style of <h2> tags on another page or in another section. This leaves me with 2 choices; either use a different tag where an <h2> is needed, or create a separate fix class to augment the <h2>.
Using a fix class creates a problem in itself when later I decide to change the original <h2> style to something else. This then may break all the fixes I put on for other tags.
One point of CSS is to create a more flexible design lending itself to easer modification. However applying styles directly to html tags contradicts this point by making the CSS more rigid and inflexible.
My solution is when writing styles it is better to sick them in classes or Ids so that the temptation of using tags for styling is not there. In the html then declare your heading as <h2 class=”headingstyle1”>my heading</h2>
Any comments?
I think of my design as having some sort of common layout for a e.g. a section title (let's say a <h2>). That layout will go in what I apply on h2 via css.
If I need an H2 in another context, let's say as a title in a forum section, Obviously I want the result to be different, but I'd probably add an id (e.g.: "
<body id="forum">#forum h2 {...}Basically I use a higher up parent's ID, to select the element's rendering instead of giving all the elements a class or ID)
I'm still convinced adding classes and Id's all over the html is a bad idea unless it represents an inherent part of the content (Let's say you have a manual and you use "warning" paragraphs, sure those <p>'s need to be labeled as such).
Also if you have page or section specific styles, you can put them in a separate file and only load them where needed.
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
margin:0;
padding:0;
}
dc
div.nav h2 { ... }div.content h2 { ... }to select out which area of the page the h2 is on.
Sometimes I'll have a notices or feature box (another div) and the h2 in that is styled with
div.content div.notice h2 { ... }or somesuch.
On a section I'm working on I styling trying g1smd's idea. I now have 2 differnt type(and styled lists) one is a unbulleted and give one type of data the other is a bulleted and gives another type of data.
The bulleted list I created using the .divstyle ul{ };
now that I have started styling the unbulleted lists with a class I find they inherit attributes from the other list leaving me a very fubared css file. making me think that each should have it's own class...
maybe the right place is somewhere in between
Now if only 'between' had a gps location.
Perhaps specify the full "route" to the element:
div div div.divstyle ul li { ... }
I'm thinking some mid marriage between class/id style everything and style tags.
I also try to only use divs where i have to and keep my semantic html nice and pretty.
I'm not sure it is best to add lots of nested divs just for style.
