Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > getting up to speed with CSS

Reply
Thread Tools

getting up to speed with CSS

 
 
shank
Guest
Posts: n/a
 
      09-24-2003
I've been using CSS for a while now and I have just come to believe that I
am not using it correctly. I just grabbed a few lines of my CSS file below.
I think I should be condensing these items much further. I'm using the
www.w3schools.com site which is great for reference, but not to great for
hand holding and practical use. If I can get the below questions figured out
I can probably get organized much better.

1) How can I make "font-family:arial" effective for my whole website in one
place? I'm sure I'm being redundant below.

2) I don't have any H1, H2, H3, tags at all on my site. I created a style in
lieu of those tags. Is that OK?

3) What do I do if I want the same font color on 20 styles, but want
different text sizes. How can I set the color in place and then different
sizes under it?

..blue_body {font-family:arial; font-size:11px; font-weight: normal; color:
#0000FF; }
..black_body {font-family:arial; font-size:11px; font-weight: bold; color:
black; }
..red_body {font-family:arial; font-size:10px; font-weight: bold; color:
red; }
..red_link {font-family:arial; font-size:18px; font-weight: bold; color:
#ff0000; }
..red_body16 { font-family:arial; font-size:16px; font-weight: bold; color:
#FF0000; }
..red_title36 { font-family:arial; font-size:36px; font-weight: bold; color:
#FF0000; }

Thanks!!!


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      09-24-2003
"shank" <(E-Mail Removed)> wrote:

>1) How can I make "font-family:arial" effective for my whole website in one
>place? I'm sure I'm being redundant below.


* {font-family:arial;}

>2) I don't have any H1, H2, H3, tags at all on my site. I created a style in
>lieu of those tags. Is that OK?


Why don't you have H1, etc. on your site? Are there no headings on
your site? Use HTML to give your pages structure, then use CSS to
describe how you want that structure to be shown. Simulating a heading
by making another element large and bold is not a good idea. Search
engines, to give just one example, don't care what a page look likes,
they care about what the page elements really are.

>3) What do I do if I want the same font color on 20 styles, but want
>different text sizes. How can I set the color in place and then different
>sizes under it?


..style1, .style2, .style3 { color: red; background-color: white;}

..style1 {font-size: 1.1em;}
..style2 {font-size: 1.2em;}

>.blue_body {font-family:arial; font-size:11px; font-weight: normal; color:
>#0000FF; }
>.black_body {font-family:arial; font-size:11px; font-weight: bold; color:
>black; }
>.red_body {font-family:arial; font-size:10px; font-weight: bold; color:
>red; }
>.red_link {font-family:arial; font-size:18px; font-weight: bold; color:
>#ff0000; }
>.red_body16 { font-family:arial; font-size:16px; font-weight: bold; color:
>#FF0000; }
>.red_title36 { font-family:arial; font-size:36px; font-weight: bold; color:
>#FF0000; }


Underscores in class names are ignored by some older browsers, this
may or may not be what you want.

Don't use pixels to specify font sizes. Windows IE does not allow
users to resize text set in pixels. Use % or em instead and leave the
main content text at the default (100% or 1em).

Always set a background colour whenever you set a colour. This avoids
potential clashes with user settings.

Use class names that describe what the element is, not what the style
is. If you decide to change your site to have blue titles instead of
red...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
 
Adrienne
Guest
Posts: n/a
 
      09-24-2003
Gazing into my crystal ball I observed "shank" <(E-Mail Removed)>
writing in news:sqicb.8936$(E-Mail Removed) :

> I've been using CSS for a while now and I have just come to believe
> that I am not using it correctly. I just grabbed a few lines of my CSS
> file below. I think I should be condensing these items much further.
> I'm using the www.w3schools.com site which is great for reference, but
> not to great for hand holding and practical use. If I can get the below
> questions figured out I can probably get organized much better.
>
> 1) How can I make "font-family:arial" effective for my whole website in
> one place? I'm sure I'm being redundant below.


body {font-family:arial; sans-serif; font-size:100%} ... remaining elements
will inherit this

>
> 2) I don't have any H1, H2, H3, tags at all on my site. I created a
> style in lieu of those tags. Is that OK?


Why not? The H elements exist for a reason - they are headings. If a
snippet of text is a heading, then mark it up as such. Use CSS to style
the heading itself, not CSS to simulate headings.

>
> 3) What do I do if I want the same font color on 20 styles, but want
> different text sizes. How can I set the color in place and then
> different sizes under it?


Cascading and inheritance. Again, *Cascading* Style Sheets.

>
> .blue_body {font-family:arial; font-size:11px; font-weight: normal;
> color: #0000FF; }
> .black_body {font-family:arial; font-size:11px; font-weight: bold;
> color: black; }
> .red_body {font-family:arial; font-size:10px; font-weight: bold; color:
> red; }
> .red_link {font-family:arial; font-size:18px; font-weight: bold; color:
> #ff0000; }
> .red_body16 { font-family:arial; font-size:16px; font-weight: bold;
> color: #FF0000; }
> .red_title36 { font-family:arial; font-size:36px; font-weight: bold;
> color: #FF0000; }


Don't use pixels for font sizes. Use percentages. As a matter of fact, I
would leave font sizes alone, unless you're dealing with heading elements
(which you might not want to default to its default size, or perhaps a
class you have defined for a copywrite or footer.

>
> Thanks!!!
>


HTH

--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com
 
Reply With Quote
 
shank
Guest
Posts: n/a
 
      09-24-2003

"Steve Pugh" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> "shank" <(E-Mail Removed)> wrote:
>
> >1) How can I make "font-family:arial" effective for my whole website in

one
> >place? I'm sure I'm being redundant below.

>
> * {font-family:arial;}
>
> >2) I don't have any H1, H2, H3, tags at all on my site. I created a style

in
> >lieu of those tags. Is that OK?

>
> Why don't you have H1, etc. on your site? Are there no headings on
> your site? Use HTML to give your pages structure, then use CSS to
> describe how you want that structure to be shown. Simulating a heading
> by making another element large and bold is not a good idea. Search
> engines, to give just one example, don't care what a page look likes,
> they care about what the page elements really are.
>
> >3) What do I do if I want the same font color on 20 styles, but want
> >different text sizes. How can I set the color in place and then different
> >sizes under it?

>
> .style1, .style2, .style3 { color: red; background-color: white;}
>
> .style1 {font-size: 1.1em;}
> .style2 {font-size: 1.2em;}
>
> >.blue_body {font-family:arial; font-size:11px; font-weight: normal;

color:
> >#0000FF; }
> >.black_body {font-family:arial; font-size:11px; font-weight: bold; color:
> >black; }
> >.red_body {font-family:arial; font-size:10px; font-weight: bold; color:
> >red; }
> >.red_link {font-family:arial; font-size:18px; font-weight: bold; color:
> >#ff0000; }
> >.red_body16 { font-family:arial; font-size:16px; font-weight: bold;

color:
> >#FF0000; }
> >.red_title36 { font-family:arial; font-size:36px; font-weight: bold;

color:
> >#FF0000; }

>
> Underscores in class names are ignored by some older browsers, this
> may or may not be what you want.
>
> Don't use pixels to specify font sizes. Windows IE does not allow
> users to resize text set in pixels. Use % or em instead and leave the
> main content text at the default (100% or 1em).
>
> Always set a background colour whenever you set a colour. This avoids
> potential clashes with user settings.
>
> Use class names that describe what the element is, not what the style
> is. If you decide to change your site to have blue titles instead of
> red...
>
> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
>


>>Don't use pixels to specify font sizes. Windows IE does not allow

users to resize text set in pixels. Use % or em instead and leave the
main content text at the default (100% or 1em).<<

OK... How should I setup text within the top row of a table? If I use <H3>
and let the user resize it, then potentially the text could be wrapped onto
2 lines making it look like yuk and making me look like I make crappy
tables. On the flip side, if I specify the px size I can be sure it looks
the way I want it to. Is my thinking wrong here?
thanks


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      09-24-2003
shank pounced upon this pigeonhole and pronounced:
>

I think "Steve Pugh" wrote this?
>
> >>Don't use pixels to specify font sizes. Windows IE does not allow

> users to resize text set in pixels. Use % or em instead and leave the
> main content text at the default (100% or 1em).<<


and shank wrote this:

> OK... How should I setup text within the top row of a table? If I use <H3>
> and let the user resize it, then potentially the text could be wrapped onto
> 2 lines making it look like yuk and making me look like I make crappy
> tables.


Data headings in tables should be <th> rather than <td>.

Unless... are you suggesting you are using tables for presentation rather
than tabular data?

> On the flip side, if I specify the px size I can be sure it looks
> the way I want it to.


Not in my browser. A simple Ctrl-Plus in Firebird will increase your text
size no matter how you define it. Praise the &diety; for that!

> Is my thinking wrong here?


Yes, if you want to force your preference for a font-size on your
visitors. You can't and shouldn't do that. You have no idea how good or
bad my vision is compared to yours, nor what kind of device I'm using to
view your site. Think fluid. Think that your visitors do not all have the
same monitor and resolution and browser window size that you like.

In how many browsers have you tested your efforts so far?

There are many samples of fluid web sites; here's one I made for a friend.
Feel free to borrow the structure.
http://home.rochester.rr.com/bshagnasty/twocolumn.html

> thanks


You're welcome.

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      09-24-2003
"shank" <(E-Mail Removed)> wrote:

>> Don't use pixels to specify font sizes. Windows IE does not allow
>> users to resize text set in pixels. Use % or em instead and leave the
>> main content text at the default (100% or 1em).
>>

>OK... How should I setup text within the top row of a table? If I use <H3>


Why use <h3>? Sounds like a use for <th>
Anyway,

>and let the user resize it, then potentially the text could be wrapped onto
>2 lines making it look like yuk and making me look like I make crappy
>tables.


On the other hand if the user can't read what you've written it makes
you look like you make crappy web pages.

This is a data table we're talking about and not a layour table, isn't
it?

Text wraps, it's what it does. If your design breaks when text wraps
then your design simply is not suitable for use on the www.

>On the flip side, if I specify the px size I can be sure it looks
>the way I want it to.


No you can't. You don't know what size the user can read, you don't
know how wide the user's browser window is, you don't know what size
the a pixel is on the user's display, you don't know whether the user
is over riding your font sizes, or setting a minimum font size.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Toby A Inkster
Guest
Posts: n/a
 
      09-24-2003
Beauregard T. Shagnasty wrote:

> Praise the &diety; for that!


<!ENTITY diety CDATA "Dr Atkins">

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132

 
Reply With Quote
 
shank
Guest
Posts: n/a
 
      09-24-2003

"Steve Pugh" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> "shank" <(E-Mail Removed)> wrote:
>
> >> Don't use pixels to specify font sizes. Windows IE does not allow
> >> users to resize text set in pixels. Use % or em instead and leave the
> >> main content text at the default (100% or 1em).
> >>

> >OK... How should I setup text within the top row of a table? If I use

<H3>
>
> Why use <h3>? Sounds like a use for <th>
> Anyway,
>
> >and let the user resize it, then potentially the text could be wrapped

onto
> >2 lines making it look like yuk and making me look like I make crappy
> >tables.

>
> On the other hand if the user can't read what you've written it makes
> you look like you make crappy web pages.
>
> This is a data table we're talking about and not a layour table, isn't
> it?
>
> Text wraps, it's what it does. If your design breaks when text wraps
> then your design simply is not suitable for use on the www.
>
> >On the flip side, if I specify the px size I can be sure it looks
> >the way I want it to.

>
> No you can't. You don't know what size the user can read, you don't
> know how wide the user's browser window is, you don't know what size
> the a pixel is on the user's display, you don't know whether the user
> is over riding your font sizes, or setting a minimum font size.
>
> Steve
>
> --
> "My theories appal you, my heresies outrage you,
> I never answer letters and you don't like my tie." - The Doctor
>
> Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
>


Implementing the <TH> tage brings up another subject. I use tables quite a
bit on the home page to organize product on the home page. Usually the top
row in those tables will have a descriptive phrase or sales pitch for the
product below. There are 2 different styles of tables. One with burgundy
borders and beige text, the other with beige background and burgundy text.
It doesn't seem like I can use the <TH> tag. They're not all the same
throughout the site. Presently, I have a style for each head row. Is that
appropriate? How about tables in general? Do I use a style for colors
borders column widths, etc.? Or do I just define them inline like: <table
width="700" border="0" cellpadding="2" cellspacing="0"
bordercolor="#00CC00">
thanks!


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      09-24-2003
Toby A Inkster pounced upon this pigeonhole and pronounced:
> Beauregard T. Shagnasty wrote:
>
> > Praise the &diety; for that!

>
> <!ENTITY diety CDATA "Dr Atkins">


<rof,l>

Slipp of the speelchekur...

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
shank
Guest
Posts: n/a
 
      09-24-2003

"Adrienne" <(E-Mail Removed)> wrote in message
news:Xns940055F9BE282arbpenyahoocom@207.115.63.158 ...
> Gazing into my crystal ball I observed "shank" <(E-Mail Removed)>
> writing in news:sqicb.8936$(E-Mail Removed) :
>
> > I've been using CSS for a while now and I have just come to believe
> > that I am not using it correctly. I just grabbed a few lines of my CSS
> > file below. I think I should be condensing these items much further.
> > I'm using the www.w3schools.com site which is great for reference, but
> > not to great for hand holding and practical use. If I can get the below
> > questions figured out I can probably get organized much better.
> >
> > 1) How can I make "font-family:arial" effective for my whole website in
> > one place? I'm sure I'm being redundant below.

>
> body {font-family:arial; sans-serif; font-size:100%} ... remaining

elements
> will inherit this
>
> >
> > 2) I don't have any H1, H2, H3, tags at all on my site. I created a
> > style in lieu of those tags. Is that OK?

>
> Why not? The H elements exist for a reason - they are headings. If a
> snippet of text is a heading, then mark it up as such. Use CSS to style
> the heading itself, not CSS to simulate headings.


The more I think about this the more confused I get. I don't have any
headings on my home page. Everything is layed out neatly within tables. I
don't use the <TH> tags either because I have some 3-4 different appearances
for different tables. I could be wrong but I don't think pages should be
redesigned just for the sake of implementing <H?> tags. The pages seem to
have been quite well for a long time now. Our home page is totally product.
Very little verbiage. Is this so wrong?
thanks


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Reported Wireless speed w/ repeater 7-9x Measured Speed Lance Wireless Networking 0 10-31-2004 09:31 PM
I need speed Mr .Net....speed Ham ASP .Net 6 10-29-2004 08:04 AM
speed speed speed a.metselaar Computer Support 14 12-30-2003 03:34 AM
java tool to test disk i/o, processor speed, and network speed efiedler Java 1 10-09-2003 03:36 PM
USB High Speed against USB Non High Speed DannyD1355 Computer Support 1 09-07-2003 02:59 AM



Advertisments