An example of separating style from content

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

Just a thought for those still struggling with the use of CSS vs HTML tags:

I'm working on a page last night, and decide i want a small heading to be underlined, bold, and italic. So, i go and creat a class with
Code: [ Select ]
font: bold italic 100%
text-decoration: underline
  1. font: bold italic 100%
  2. text-decoration: underline


Looks great in IE! I then take a peak and check it out in NS, Opera, and Mozilla. Hmmmm. It's underlined, but not bold or italics. :x Jeez, what did i do wrong now?

After I got thinking about why these browsers would be doing this, but IE displays it just fine, i remembered that IE tends to be a little more loose with the standards and will display things even though it's not quite done correctly. Ok, so if i shouldn't be using a style to bold and italicize, how should i do it?

Well, what is the purpose of bold and italics? They impart meaning (content), not just style. Which would mean what.....? I should use a regular HTML tag, since content is meant to remain in the HTML document. So i went and used the <strong> and <em> tags, and all worked fine. I've been so focused on learning and working with CSS lately i had forgotten about plain old markup tags! :lol:

Just wanted to share, FWIW.

Mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

allgoodpeople wrote:
I'm working on a page last night, and decide i want a small heading to be underlined, bold, and italic. So, i go and creat a class with
Code: [ Select ]
font: bold italic 100%
text-decoration: underline
  1. font: bold italic 100%
  2. text-decoration: underline

Try This....it works in Nutscrape 7.1
Code: [ Select ]
<span style="font-weight: bold; font-style: italic; text-decoration: underline;">


Cheers...


C.C.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

Your declaration is invalid because 'property name : value' doesn't end with a simi-colon (;).

Use this code in your style sheet.

Code: [ Select ]
.heading {
    font : bold italic 100%;
    text-decoration : underline;
}
  1. .heading {
  2.     font : bold italic 100%;
  3.     text-decoration : underline;
  4. }


Use this code in your browser:

<p class="heading">title</p>

Quote:
Looks great in IE! I then take a peak and check it out in NS, Opera, and Mozilla. Hmmmm. It's underlined, but not bold or italics. Jeez, what did i do wrong now?


I'd guess IE assumed the semi-colons at each line ending. Mozilla and Opera assumed a semi-colon at the end of your declaration (which would only give you text-decoration). All three browsers (Mozilla is Netscape / Netscape is Mozilla) were incorrect because they should have tossed the entire declaration.
  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

rjmthezonenet wrote:
Your declaration is invalid because 'property name : value' doesn't end with a simi-colon (;).

Use this code in your style sheet.

Code: [ Select ]
.heading {
    font : bold italic 100%;
    text-decoration : underline;
}
  1. .heading {
  2.     font : bold italic 100%;
  3.     text-decoration : underline;
  4. }

Use this code in your browser:
<p class="heading">title</p>



Ummmm, that still doesn't work in Netscape 7.1, Opera, Mozilla or Firefox.
  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

According to W3C.org, the following style sheet is valid CSS2, and renders the style as you need it to in Netscape, Opera, Firefox, Mozilla and IE 6.

Code: [ Select ]
<style type="text/css">
.header {
    text-decoration : underline;
    font-size : 100%;
    font-weight : bold;
    font-style : italic;
}


</style>
  1. <style type="text/css">
  2. .header {
  3.     text-decoration : underline;
  4.     font-size : 100%;
  5.     font-weight : bold;
  6.     font-style : italic;
  7. }
  8. </style>



Cheers...

C.C.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

I'm glad you've got most of the idea that <em> and <stong> are better than randomly making things italic / bold, but you MUST think why you were making it bold/italic.

If you are making it bold and italic because it a 'strong emphasis' adds meaning, then use the HTML.

But if the correct meaning is in the HTML without the <em> and <strong> then you use CSS to instead (to make the page look pretty).


What element where you trying to make bold+italic? And why?
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

rjmthezonenet wrote:
Your declaration is invalid because 'property name : value' doesn't end with a simi-colon (;).


Actually, it did have the semi colon. I was using topstyle, and it inserts the semi-colon automatically. i just forgot to write it in when i wrote the example for the post.

mark
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

LazyJim wrote:


What element where you trying to make bold+italic? And why?


I was trying to distinguish headings in an outline style page ( http://www.nriyounglife.org/about_us.htm ). I guess the proper way to do it would have been to define the style for the h1 selector rather than using <em> and <strong>, eh?

Speaking of h1, what exactly is the difference between h1, h2, h3, etc?

Mark
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

Cold Canuck wrote:
According to W3C.org, the following style sheet is valid CSS2, and renders the style as you need it to in Netscape, Opera, Firefox, Mozilla and IE 6.

Code: [ Select ]
<style type="text/css">
.header {
    text-decoration : underline;
    font-size : 100%;
    font-weight : bold;
    font-style : italic;
}


</style>
  1. <style type="text/css">
  2. .header {
  3.     text-decoration : underline;
  4.     font-size : 100%;
  5.     font-weight : bold;
  6.     font-style : italic;
  7. }
  8. </style>





that seems odd to me. why would those browsers display that style ok, but not the shorthand version? aren't they essentially the same style sheet?

Mark
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

allgoodpeople wrote:
I guess the proper way to do it would have been to define the style for the h1 selector rather than using <em> and <strong>, eh?

Yes!

allgoodpeople wrote:
Speaking of h1, what exactly is the difference between h1, h2, h3, etc?


Well mainly just the font-size as far as formatting goes.

There are 'default style sheets' that browsers should apply before any other style sheets
  • FusionDesigner
  • Proficient
  • Proficient
  • User avatar
  • Posts: 282

Post 3+ Months Ago

yo lazyjim small world ;)
  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

allgoodpeople wrote:
that seems odd to me. why would those browsers display that style ok, but not the shorthand version? aren't they essentially the same style sheet?

Mark

Apparently not to the browsers in question.



C.C.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

allgoodpeople wrote:
Speaking of h1, what exactly is the difference between h1, h2, h3, etc?

h1 = extra small
h2 = small
h3 = normal
h4 = bigger
h5 = bigger still
h6 = biggest (I think there's only 6, right?)

The only thing I don't like about the header elements is they seem to leave a 2 line line-break. Sometimes that's not what I want, so I default to the way I think you are trying to do it to customize it.
  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

ATNO/TW wrote:
The only thing I don't like about the header elements is they seem to leave a 2 line line-break.

Thats why I think CSS is a slightly better way to arrive at the destination.


Cheers...


C.C.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

ATNO/TW wrote:
allgoodpeople wrote:
Speaking of h1, what exactly is the difference between h1, h2, h3, etc?

h1 = extra small
h2 = small
h3 = normal
h4 = bigger
h5 = bigger still
h6 = biggest (I think there's only 6, right?)

The only thing I don't like about the header elements is they seem to leave a 2 line line-break. Sometimes that's not what I want, so I default to the way I think you are trying to do it to customize it.


That was exactly the situation i was having problems with. At the time i was formating the page, i didn't want any space between lines, but when i put in the <h1> tage, it was putting in an empty space, so i was trying to work around it. Eventually I decided i liked the empty space, but that was well down the road.

Re: <hx> tags: Isn't it the other way around? H1 is the biggest, h6 is the smallest? I tried them out in a page to see which way it was, and it is indeed the opposite. For anyone curious to see how they all look, you can see them at http://www.nriyounglife.org/htags.htm . And there are only six, like ATNO said. Is there any "meaning" difference (in terms of semantics, like the difference between <strong> and <b>?) or are they all the same in meaning, just different sizes of headings?

Mark
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

*duh re:
Quote:
Re: <hx> tags: Isn't it the other way around? H1 is the biggest, h6 is the smallest?


Yep, you have it correct -- I don't know what I was smoking when I typed that! *lol
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

LazyJim wrote:
allgoodpeople wrote:
I guess the proper way to do it would have been to define the style for the h1 selector rather than using <em> and <strong>, eh?

Yes!



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:

Code: [ Select ]
The class: h1.blue_b{
    color: #000088;
    font-weight: bold;
    font-size: 100%;
    }

The HTML: <span class="h1.blue_b">What is Northern Rhode Island (NRI) Young Life?</span>
  1. The class: h1.blue_b{
  2.     color: #000088;
  3.     font-weight: bold;
  4.     font-size: 100%;
  5.     }
  6. The HTML: <span class="h1.blue_b">What is Northern Rhode Island (NRI) Young Life?</span>


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! :evil: :lol: :cry:

Mark
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

ATNO/TW wrote:
The only thing I don't like about the header elements is they seem to leave a 2 line line-break. Sometimes that's not what I want, so I default to the way I think you are trying to do it to customize it.


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.

Code: [ Select ]
  H1, H2, H3, H4, H5, H6 {
  font-family: "Verdana", "Arial", sans-serif;
  margin: 10px 2px 0px 2px;
  padding: 0px 0px 0px 0px;
}

  H1 { font-size: x-large; text-align: left; }
  H2 { font-size: large; text-align: left; }
  H3 { font-size: medium; }
  H4 { font-size: small; text-indent: 25px; }
  H5 { font-size: x-small; text-indent: 25px; }
  H6 { font-size: x-small; text-indent: 50px; }
  1.   H1, H2, H3, H4, H5, H6 {
  2.   font-family: "Verdana", "Arial", sans-serif;
  3.   margin: 10px 2px 0px 2px;
  4.   padding: 0px 0px 0px 0px;
  5. }
  6.   H1 { font-size: x-large; text-align: left; }
  7.   H2 { font-size: large; text-align: left; }
  8.   H3 { font-size: medium; }
  9.   H4 { font-size: small; text-indent: 25px; }
  10.   H5 { font-size: x-small; text-indent: 25px; }
  11.   H6 { font-size: x-small; text-indent: 50px; }


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

Would someone please elaborate on the difference/history of <b>, <i>, <em>, and <strong>? Thanks! :-)
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

Code: [ Select ]
h1 {
94  display: block;
95  font-size: 2em;
96  font-weight: bold;
97  margin: .67em 0;
98 }
99
100 h2 {
101  display: block;
102  font-size: 1.5em;
103  font-weight: bold;
104  margin: .83em 0;
105 }
106
107 h3 {
108  display: block;
109  font-size: 1.17em;
110  font-weight: bold;
111  margin: 1em 0;
112 }
113
114 h4 {
115  display: block;
116  font-weight: bold;
117  margin: 1.33em 0;
118 }
119
120 h5 {
121  display: block;
122  font-size: 0.83em;
123  font-weight: bold;
124  margin: 1.67em 0;
125 }
126
127 h6 {
128  display: block;
129  font-size: 0.67em;
130  font-weight: bold;
131  margin: 2.33em 0;
132 }
  1. h1 {
  2. 94  display: block;
  3. 95  font-size: 2em;
  4. 96  font-weight: bold;
  5. 97  margin: .67em 0;
  6. 98 }
  7. 99
  8. 100 h2 {
  9. 101  display: block;
  10. 102  font-size: 1.5em;
  11. 103  font-weight: bold;
  12. 104  margin: .83em 0;
  13. 105 }
  14. 106
  15. 107 h3 {
  16. 108  display: block;
  17. 109  font-size: 1.17em;
  18. 110  font-weight: bold;
  19. 111  margin: 1em 0;
  20. 112 }
  21. 113
  22. 114 h4 {
  23. 115  display: block;
  24. 116  font-weight: bold;
  25. 117  margin: 1.33em 0;
  26. 118 }
  27. 119
  28. 120 h5 {
  29. 121  display: block;
  30. 122  font-size: 0.83em;
  31. 123  font-weight: bold;
  32. 124  margin: 1.67em 0;
  33. 125 }
  34. 126
  35. 127 h6 {
  36. 128  display: block;
  37. 129  font-size: 0.67em;
  38. 130  font-weight: bold;
  39. 131  margin: 2.33em 0;
  40. 132 }


(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
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

rjmthezonenet wrote:

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


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
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

allgoodpeople wrote:
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.


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

Code: [ Select ]

<h1 class="blue_b">What is Young Life?</h1>
  1. <h1 class="blue_b">What is Young Life?</h1>


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.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

allgoodpeople wrote:
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.


Thanks you. :-)

Next topic, why XHTML. lol
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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..}
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

LazyJim wrote:
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
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

not always

If you have one section that needs blue headers, and anther section that needs green headers, try this...
Code: [ Select ]
<div id="green_area">
    <h1>Header 1 in green</h1>
    <p>1st paragraph text</p>
    <h1>Header 2 in green</h1>
    <p>2nd paragraph text</p>
    <h1>Header 3 in green</h1>
    <p>3rd paragraph text</p>
</div>
<div id="blue_area">
    <h1>Header 4 in green</h1>
    <p>4th paragraph text</p>
    <h1>Header 5 in green</h1>
    <p>5th paragraph text</p>
    <h1>Header 6 in green</h1>
    <p>6th paragraph text</p>
</div>
<style>
div#green_area h1 { /* <H1> inside <DIV id="green_area"> */
    color: green;
}
div#blue_area h1 { /* <H1> inside <DIV id="blue_area"> */
    color: blue;
}
</style>
  1. <div id="green_area">
  2.     <h1>Header 1 in green</h1>
  3.     <p>1st paragraph text</p>
  4.     <h1>Header 2 in green</h1>
  5.     <p>2nd paragraph text</p>
  6.     <h1>Header 3 in green</h1>
  7.     <p>3rd paragraph text</p>
  8. </div>
  9. <div id="blue_area">
  10.     <h1>Header 4 in green</h1>
  11.     <p>4th paragraph text</p>
  12.     <h1>Header 5 in green</h1>
  13.     <p>5th paragraph text</p>
  14.     <h1>Header 6 in green</h1>
  15.     <p>6th paragraph text</p>
  16. </div>
  17. <style>
  18. div#green_area h1 { /* <H1> inside <DIV id="green_area"> */
  19.     color: green;
  20. }
  21. div#blue_area h1 { /* <H1> inside <DIV id="blue_area"> */
  22.     color: blue;
  23. }
  24. </style>


if you have more than one green area, use the class="green_area" and div.green_area instead of ID and #
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

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.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

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
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

allgoodpeople wrote:
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.
  • gilray4
  • Novice
  • Novice
  • gilray4
  • Posts: 17
  • Loc: Hawai'i

Post 3+ Months Ago

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;}
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

gilray4 have you not read the 3rd page of discussion?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 30 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.