getting up to speed with CSS

Discussion in 'HTML' started by shank, Sep 24, 2003.

  1. shank

    shank Guest

    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!!!
     
    shank, Sep 24, 2003
    #1
    1. Advertising

  2. shank

    Steve Pugh Guest

    "shank" <> 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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Sep 24, 2003
    #2
    1. Advertising

  3. shank

    Adrienne Guest

    Gazing into my crystal ball I observed "shank" <>
    writing in news:sqicb.8936$:

    > 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
     
    Adrienne, Sep 24, 2003
    #3
  4. shank

    shank Guest

    "Steve Pugh" <> wrote in message
    news:...
    > "shank" <> 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 <> <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
     
    shank, Sep 24, 2003
    #4
  5. 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.
     
    Beauregard T. Shagnasty, Sep 24, 2003
    #5
  6. shank

    Steve Pugh Guest

    "shank" <> 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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Sep 24, 2003
    #6
  7. Toby A Inkster, Sep 24, 2003
    #7
  8. shank

    shank Guest

    "Steve Pugh" <> wrote in message
    news:...
    > "shank" <> 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 <> <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!
     
    shank, Sep 24, 2003
    #8
  9. 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.
     
    Beauregard T. Shagnasty, Sep 24, 2003
    #9
  10. shank

    shank Guest

    "Adrienne" <> wrote in message
    news:Xns940055F9BE282arbpenyahoocom@207.115.63.158...
    > Gazing into my crystal ball I observed "shank" <>
    > writing in news:sqicb.8936$:
    >
    > > 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
     
    shank, Sep 24, 2003
    #10
  11. shank

    Adrienne Guest

    Gazing into my crystal ball I observed "shank" <>
    writing in news:wEncb.9178$:

    > 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.


    So use CSS to style the various TH elements.

    ..blue th {color: blue; font-weight: normal; text-align:left}

    > I could be wrong but I don't think
    > pages should be redesigned just for the sake of implementing <H?> tags.


    Heading elements are important for people and search engines. They
    provide deliniation in a page.

    > The pages seem to have been quite well for a long time now. Our home
    > page is totally product. Very little verbiage.


    What does the page look like with images/tables turned off? Can you still
    tell what the site is about?

    >Is this so wrong?
    >


    You should be using at least the H1 element for the title of the page.

    <html>
    <head>
    <title>Acme Widget Factory</title>
    </head>
    <body>
    <h1>Acme Widget Factory</h1>
    <p>....</p>
    <h2>Colored Widgets</h2>
    <table class="blue">
    <thead>
    <tr>
    <th>Color</th><th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Orange Widget</td><td>$4.00</td>
    </tr>
    <tr>
    <td>Blue Widget</td><td>$5.00</td>
    </tr>
    </tbody>
    </table>
    <h2>Plain Widgets</h2>
    <p>...</p>
    </body>
    </html>


    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
     
    Adrienne, Sep 24, 2003
    #11
  12. shank

    shank Guest

    > 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).


    This was taken from: http://www.basictips.com/tips/article_70.shtml
    If the professionals can't decide, how are the rookies going to get it
    right?

    Which Font-Size? Px, Pt or Em
    By BasicTemplates with External CSS
    May 19, 2003, 16:06

    Using CSS (cascading style sheets) makes it easy to specify font sizes, but
    before you set a font size you should be aware that it could change the
    layout of your site considerably. Different browsers interpret font sizes
    differently, so a font that appears readable in Microsoft Internet Explorer
    may be smaller when viewed in Netscape. In addition, font sizes on Windows
    systems are not always the same as they are on other platforms. Your site
    may look great to Windows users, but it may be illegible to those using a
    Mac.

    There is much controversy in relationship to font-size specifications. Our
    advice is the same as the majority of long-time designers. When you specify
    a font size, specify it in pixels (px) not points (pt) or em. Using a pt or
    em font-size property instead of px allows for your site text to be resized
    according to the viewer's system settings. If their system is set to view
    very large text, your web site's layout will become distorted and your web
    site may be illegible to them.

    Also, be very careful not to set your font-size pixels too small. Some folks
    may not be able to read tiny text and adjusting their system text size will
    have no effect on your site because your font-size is specified as px. There
    truly is a happy medium in any situation and the font-size (ie. 12px) will
    vary depending on the font-family (ie. Arial, Times New Roman, etc.) you
    use.
     
    shank, Sep 28, 2003
    #12
  13. shank

    Adrienne Guest

    Gazing into my crystal ball I observed "shank" <>
    writing in news:MaCdb.40385$:

    >> 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).

    >
    > This was taken from: http://www.basictips.com/tips/article_70.shtml
    > If the professionals can't decide, how are the rookies going to get it
    > right?
    >


    <snip bad advice>

    The solution is a fluid design that does not break when the user changes
    font size.

    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
     
    Adrienne, Sep 28, 2003
    #13
  14. shank wrote:

    > Using a pt or
    > em font-size property instead of px allows for your site text to be resized
    > according to the viewer's system settings.


    Which is precisely why you *should* use 'em' (or 'ex' or '%')

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
     
    Toby A Inkster, Sep 28, 2003
    #14
  15. On Sun, 28 Sep 2003 14:24:44 GMT, "shank" <>
    wrote:

    [...]

    >There is much controversy in relationship to font-size specifications. Our
    >advice is the same as the majority of long-time designers. When you specify
    >a font size, specify it in pixels (px) not points (pt) or em. Using a pt or
    >em font-size property instead of px allows for your site text to be resized
    >according to the viewer's system settings.


    Most reasonable people consider that an advantage, not a disadvantage.
    It allows the user to view the text at a size that is comfortable. To
    deny the user this feature is an act of hostility.

    In any case, most newer browsers allow users to resize text even when
    it is styled in pixels. Even with IE, the user can choose to ignore
    your suggestion completely.

    >... If their system is set to view
    >very large text, your web site's layout will become distorted and your web
    >site may be illegible to them.
    >


    Then it is broken by design.

    Nick

    --
    Nick Theodorakis

    nicholas_theodorakis [at] urmc [dot] rochester [dot] edu
     
    Nick Theodorakis, Sep 28, 2003
    #15
  16. shank

    Mark Nobles Guest

    Mark Nobles, Oct 1, 2003
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ham

    I need speed Mr .Net....speed

    Ham, Oct 28, 2004, in forum: ASP .Net
    Replies:
    6
    Views:
    2,357
    Antony Baula
    Oct 29, 2004
  2. efiedler
    Replies:
    1
    Views:
    2,074
    Tim Ward
    Oct 9, 2003
  3. Replies:
    2
    Views:
    2,313
    Howard
    Apr 28, 2004
  4. Replies:
    2
    Views:
    345
    Christopher Benson-Manica
    Apr 28, 2004
  5. Weng Lei-QCH1840
    Replies:
    1
    Views:
    191
    Thomas
    Aug 15, 2003
Loading...

Share This Page