Css

fifeclub posted this at 03:15 — 25th June 2002.

Joined: Feb 2001

I asked a very similar question several months ago but this is slightly different. I'm converting my old site to CSS and running into the problem of how to have one line right under another but with differnet font characteristics. If I use the to end the first line then it makes too much space beneath, and I can't use because you can't attach a class="x" to a tag. The way I've gotten around this problem is to use fake "bold" tags that are not really bold. For example I have CSS for b.8 (font 8px), b.9 (font 9px), b.10 (font 10px). All of these have font-weight=normal and I use them as such:

1980-1984
John Lennon - Pac Man - MTV - AIDS
Compact Disks - VHS vs. Betamax

where normal font size is 12px, p.years is red font size 28px and b.10 is NOT bold, but is black 10px. I want the smaller line directly under the bigger font.

(Here's where the example came from if that matters:
http://www.pstvalumni.com/directory.shtml)

So is this a stupid work-around? How else should this effect be done while also changing CSS font styles?

zollet posted this at 03:41 — 25th June 2002.

He has: 1,016 posts

Joined: May 2002

Here's something I made quick that might help you. Just load the page and then look at the source code.

http://www.antinetscape.org/temp/cssexample.html

fifeclub posted this at 04:29 — 25th June 2002.

He has: 688 posts

Joined: Feb 2001

AWESOME! Thank you! That really helped alot.

First of all, I forgot about . Common as it is, I just got along for years without using it.

Second, I had no idea that I could just say .big, as opposed to specifying p.big AND b.big. So this means that once I specify .big, I can use it in the body by many differnt tags? Plus I didn't know I could put it in the tag either. These are such huge things that I did not know about.

And finally one quesiton. When I started learning CSS, people said not to ever mix css and "non-css". ALthough I've seen that it works anyway, they would have said not to use font color="#990000", and that I should've specified the color in the CSS. (They also said that if I go with CSS, to stop using and and such. Is this really a concern?

Thanks again. In answering my one question you've helped me in ways that I didn't anticipate.

zollet posted this at 04:37 — 25th June 2002.

He has: 1,016 posts

Joined: May 2002

It depends. For example, I always put my content in tables and therefore I set a default font with css (which reduces the HTML file size and I don't have to worry about setting font face, size, etc for every single piece of text):

td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

Then I create .big, .small, etc and use them where it's needed. If all .small text need to be bold, then you might as well set define it in the CSS rather than putting lots of around text. But if you only use it a few times, you can use .

Hope this made sense.

Suzanne posted this at 07:09 — 25th June 2002.

She has: 5,507 posts

Joined: Feb 2000

Well, the tag shouldn't be used, period. It's just confusing, and if you want the hyperlinks underlined, that happens by itself.

Using instead of and instead of is recommended for other viewers, as it provides meaningful markup to text (emphasis and louder, respectively).

The point is to remove the code that is just junk, and control the text with an external sheet. This is generally referred to separating the content from the design. What it means is that you never have to edit the text again to upgrade it, instead, you can upgrade the CSS (one or a handful of files) only.

If you have:

This is some text that should be red, italicized, and small.

First of all, it's using deprecated tags that will STOP WORKING SOON, even if they work now. More tags means more possiblity of nesting errors, mistakes and bloat.

Secondly, imagine a whole page of this nonsense, when you can replace it with this in your CSS file:

.attention {
font-size: 11px
color: #900;
font-style: italic;
}

And this in your code:

This is some text that should be red, italicized, and small.

Now imagine you have this text in 400 files. Instead of all those bloated, dying font tags, you have something you can search for using grep, something you can clearly understand when you see it what it's for, and something that you can entirely control from one file, not have to edit 400 files.

See?

webstandards.org has lots of resources on learning how to move forward and leave legacy coding in the dust. It will free you for better things.