Another newbie question (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

hzarabet -> Another newbie question (4/26/2004 23:54:38)

Hi all...

When setting up my style sheets, let's say I use

td.cell {font-size: 100%}

So...

<td class="cell">Nice to see you!</td>


But let's I want to JUST have the word "Nice" at 150%. The way I am thinking seems very "fat"...

td.cell {font-size: 100%}
td.cell150{font-size: 150%}

<td class="cell150">Nice</td><td class="cell"> to see you!</td>

Something tells me this can't be right!!!

Thanks in advance!



d a v e -> RE: Another newbie question (4/27/2004 1:40:25)

if you want several cells maybe with all *fat* text then make a class like

.fatCell {font-size:150%}
then apply it to the td...

<td class="fatcell"> but i think it would be more felxible maybe to use a just a class of

.fat {font-size:150%}

and apply it to the paragraph tag or use a span

e.g.

<td>
<p class="fat>this is some fat paragraph text</p>
</td>

or if it's just one word possibly
<td>
<span class="fat>this is some fat paragraph text</span>
</td>



jaybee -> RE: Another newbie question (4/27/2004 2:18:31)

Here's a thought. Not really the correct use but it works....

acronym {
font-size: 150%;
}

<acronym>Hello</acronym>



d a v e -> RE: Another newbie question (4/27/2004 2:29:15)

what then if you have acronyms on your page? they'll all be huuuge. well quite big.



jaybee -> RE: Another newbie question (4/27/2004 2:34:23)

Well obviously. [:D]

But as most people don't use it, it's another thought as hzarabet doesn't want FAT code.



d a v e -> RE: Another newbie question (4/27/2004 2:39:02)

but then
compare:

<p class="fat>Hello</p>
<acronym>Hello</acronym>

? i just don't see any reason to use a tag that wasn't meant for this when you can just use a perfectly good class or id.



jaybee -> RE: Another newbie question (4/27/2004 2:44:15)

Quite true, I was just giving another option. Women like options. It gives us the chance to faff around making up our minds. [;)]



Donkey -> RE: Another newbie question (4/27/2004 3:13:59)

quote:

<p class="fat>Hello</p>

Won't that start another paragraph though? If he wants to keep the word in the same line as the preceeding text then surely <span class="fat"> is the answer, or to use less space hijack the <b> or<i> tag instead.



d a v e -> RE: Another newbie question (4/27/2004 3:46:22)

yep, that's why before i said
quote:

or if it's just one word possibly
<td>
<span class="fat>this is some fat paragraph text</span>
</td>


if you hijack the <i> or <b> tags (which are deprecated anyway) then what happens if you suddenly decide to use a <b> tag or <i> tag for something else?? doesn't FP automatically use the <b> tag for bold and not strong? or is this either an option or the default in FP2003 (i very rarely use FP and i'm still on FP2000)

Jaybee - men don't like all those options, we get confused! yes or no, class or id, jeans and a t-shirt, etc, etc..



jaybee -> RE: Another newbie question (4/27/2004 4:15:48)

FP2003 uses strong. Confused the hell out of me with strong in the HTML and b in the style sheet. [&:]

quote:

men don't like all those options, we get confused


Now you see, that's the trouble with men. No flexibility [:D]



jaybee -> RE: Another newbie question (4/27/2004 4:23:00)

hzarabet, I don't know whether you are male or female.

If female...... take your pick

If male........ do as you're told and use span

[sm=lol.gif]



d a v e -> RE: Another newbie question (4/27/2004 4:39:49)

[:D]



hzarabet -> RE: Another newbie question (4/27/2004 16:00:45)

Hmmm...not sure if I explained myself well!!!

By FAT I meant bloated code.

If this is on my style sheet:

td.cell {font-size: 100%

and I want it to align "left" in some places and align "right" in others, do I need to right two separate items on my style sheet:

td.cell-left {font-size: 100%
text-align: left;}

td.cell-right {font-size: 100%
text-align: right;}

or can I leave it as

td.cell {font-size: 100%} on my style sheet but command the alignment in HTML at the occurance where it needs to be left or right.

If not I see myself right a hundred additions to my style sheet



gorilla -> RE: Another newbie question (4/27/2004 16:05:43)

I think I'll step in here. Hrzabet what you do is in your style sheet create a rule for, for example,

left aligned

right aligned

sky blue pink or whatever

Then apply those as needed to the cells. As you're using an external style sheet you take one tiny bnadwidth hit by having the extra classes in you external css sheet. Then they're in cache anyway so your flying, and can strip out all the font tags etc from the html.

btw just call 'em .cellleft .cellright etc. You don't need to specify that its for td



jaybee -> RE: Another newbie question (4/27/2004 16:17:16)

quote:

ORIGINAL: gorilla

I think I'll step in here.


Ohhhhh. And we were having so much fun deciding. [;)]

Hmmmmm sky blue pink. Don't think I've come across that one. I'm sure Dave has a use for it though.[sm=lol.gif]

[Edit]

Now hold on a minute, where did left and right come into this?

OK guys, we'll have to start all over again. I nominate acronym although I could be persuaded to go with def or maybe..........

[:D]



bobby -> RE: Another newbie question (4/27/2004 16:21:33)

This will let you modify the first letter or line of a paragraph... I'm afraid it won't work on a particular word tho...

http://www.w3schools.com/css/css_pseudo_elements.asp



jaybee -> RE: Another newbie question (4/27/2004 16:25:21)

Yes and it doesn't work in all browsers. I got caught on that one.



hzarabet -> RE: Another newbie question (4/27/2004 16:29:10)

So this is proper for a style sheet?

.middle-head{
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
vertical-align: top;
}

.middle-head-small{
text-align: center;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
vertical-align: top;
}

.middle-head-center{
text-align: center;
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
vertical-align: top;
}

To me it seems so redundant. I would have thought that you would just use:

.middle-head{
font-size: 140%;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
vertical-align: top;
}

and control the font size and alignment in the HTML instead of essentially rewriting this 3 times.

If you folks could give me a nod of approval that writing it 3 times is proper I will move on to "2 + 2" [;)]

Thanks!!!!



jaybee -> RE: Another newbie question (4/27/2004 16:50:02)

Now you've lost me completely. I thought in your last post you wanted left and right.



hzarabet -> RE: Another newbie question (4/27/2004 17:28:21)

It's not left-right font size per say. The question is really do you have to re-write EVERY variation on your style sheet or can you adjust the left or right or the font size directly in your HTML to keep your style sheet smaller.



gorilla -> RE: Another newbie question (4/27/2004 17:49:37)

Last posting before I go to bed :-)

DON'T take this the wrong way. But because you're a CSS newby I suggest strongly that you write a different set of rules for all variations in your stylesheet (computers are thick that way - personally I find that reassuring :-) )

Apply them - as a test. Then when they're working properly post back the stylesheet code here message or better yet email me and I'll tell you a private addy you can email it to me at and I'll trim it mightily for you.

Useful free tool:

Go here:

http://www.styleassistant.de/download.htm

Dowload the biggest package first and install it.

Then the update (only a minor bug fix very minor)

Use that as a tool to develop quickly.
The site is in German but the software is in English.

Don't whatyever you do do adjusting in your html or you lose the speed benefits of the css. to answer your question. :-)

HTH

M



d a v e -> RE: Another newbie question (4/27/2004 17:53:07)

this would be better 

body {font-family: Arial, Helvetica, sans-serif; 
font-weight: normal; 
vertical-align: top;}

.middle-head{ 
font-size: 140%; 
} 

.middle-head-small{ 
text-align: center; 
font-size: 80%; 
} 

.middle-head-center{ 
text-align: center; 
font-size: 140%; 
}


you might need to use
body {font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
vertical-align: top;}
if the styles don't inherit into the table cells,
but otherwise that's the beauty of css, by setting the style for the parent element (either the body or table or whatever contains the element you want to apply a class to ) then it is inherited by the child elements.



gorilla -> RE: Another newbie question (4/27/2004 18:04:17)

All right it was the 2nd last post :-)

Dave is right but the inheritance bug in IE for table elements leads me always to say to newbies do it the long way first. Then trim it.

Hrza .... you can save quite a lot of space ddoing it as dave has ... but always test test test like mad @ first. CSS is dead easy but like anything new its confusing at first. You won't believe the spped advanatage you'll get ask jaybee about the saving she made after I put her on the 12 step program [;)]



hzarabet -> RE: Another newbie question (4/27/2004 18:07:01)

Thanks for ALL your help folks and primates.



jaybee -> RE: Another newbie question (4/28/2004 5:26:57)

quote:

ask jaybee about the saving she made after I put her on the 12 step program


[sm=lol.gif]

It's amazing!!! Clothes that have been hanging in the wardrobe for years now fit, I can run all the way to work without getting out of breath and my pages load so fast it's untrue!!!!!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
5.859375E-02