An example of separating style from content

*duh re:

Yep, you have it correct -- I don't know what I was smoking when I typed that! *lol

Well, i went back through and re-wrote the classes for the desired effect, but for some reason when I call them in my page they're not doing anything. The page is http://www.nriyounglife.org/about_us1.htm .

Here's the code. I can't see any problems with it:



I made sure to avoid using the shorthand in the CSS. But the class isn't applying any style to the text at all.

Sometimes I get the feeling writing pages is like plumbing. One little mistake and everything leaks all over the place!

Mark

Another different between H1..H6 is significant. User-agents may consider H1 "more significant" than H6. Because of this significant, Homesite tag completions, and simplicity in coding, I prefer to use H1..H6 tags and redefine their presentation with a style sheet.



Now <h1> is like <div class="header1">test</div>.

Would someone please elaborate on the difference/history of <b>, <i>, <em>, and <strong>? Thanks!

(Please ignore line numbers)

This is the default style used by Mozilla when a style sheet has not been applied to H1..H6. Take a look at html.css (and quirk.css and ua.css) for the full picture.

http://lxr.mozilla.org/seamonkey/source ... c/html.css

I don't know the official history, but my understanding is the <b> and <i> and such came about with HTML 3. They apply only to looks, where as <em> and <strong> apply meaning to the text. Both create the same visual effect though (which threw me off for the longest time).

I think where you would see the difference the most clearly is if you were using a web site reader. If you had <b> for something, it would read it just like all the other text, but if you had <strong> the reader would emphasize that text vocally.

Mark

AHA!! I figured it out. I was calling the CSS class incorrectly in my HTML body. It should be



I was treating the entire thing as a unique class and including the h1 in the class name. Is this sort of class called a child class? I know there's a unique term for this, but I'm not sure what it is.

Mark

PS - I just now noticed the "view more emoticons" link there on the left. *sigh* i swear, if i ever go to war, I'm going to end up dead for sure. I must be the most un-observant person on the planet.

Thanks you.

Next topic, why XHTML. lol

ok I see you didn't quite get the way it all works...

if you have a piece of text that is a header, put in side <h1> tags (or h2, h3...).
Then, to specify the colours and other style info, the CSS is just h1 {..stuff..}

right, but what if you have more than one style of h1 heading? then you would have to use the method i used, wouldn't you? if you have purple h1's and blue h1's, you need some way to specify different styles for each.

Mark

not always

If you have one section that needs blue headers, and anther section that needs green headers, try this...


if you have more than one green area, use the class="green_area" and div.green_area instead of ID and #

of course there are times when you want to do the way you did as well, but then you shaould also consider if you should use inline (<h1 style="color:blue;">) instead.

A general rule: before you apply some styling or format some text, ask yourself why you are doing it? Some of the time it will be to convey meaning, so see if there's an HTML tag, like sub-headngs could use <h2> or <h3>; And other times it will be because you want it to look pretty, and then you go ahead with your class's inline styles.

If it is to make it look pretty, also consider splitting your layout into logical sections, which will help the overall style in your site be consistant, and allow you to use the method I showed above.

that is a good way of looking at it. Thanks for sharing that, lazy jim! It seems like these are all ways to accomplish the same end; just some meet certain goals better than others! I can see your suggestion for setting up the h1 style would be more organized than mine was. Using my approach could lead to a large and confusing style sheet very quickly if it wasn't done carefully.

Mark

Yup! Which is precicely why I code by hand - I don't expect any wysiwyg editor to understand why, and all over the net i see sites full of class-based CSS, obviously generated by frontpage/dreamweaver/whatever.

These site are bad examples to poeple who learn how to code by looking at other pages (people like me).
To protect yourself when learning by other people's examples, remember that you should be learning not just copying.

exactly right about header sizes smaller number larger size and yes it ends at h6. With re: to the header tag taking up 2 line breaks I just work around this by using a "classed" <p> tag> seems to work in all browsers the same withthe added benefit of controlled font size.

html> <p class="largefont">Heres my header with controllable margin and padding without the extra line break space</p>

the style> .largefont{font-size:2em;}

gilray4 have you not read the 3rd page of discussion?