getting up to speed with CSS

S

shank

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!!!
 
S

Steve Pugh

shank said:
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
 
A

Adrienne

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
 
S

shank

Steve Pugh said:
* {font-family:arial;}


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.


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

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


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 <[email protected]> <http://steve.pugh.net/>
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
 
B

Beauregard T. Shagnasty

shank pounced upon this pigeonhole and pronounced:I think "Steve Pugh" wrote this?
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

You're welcome.
 
S

Steve Pugh

shank said:
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 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
 
S

shank

Steve Pugh said:
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.


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 <[email protected]> <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!
 
S

shank

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


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
 
A

Adrienne

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

shank

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

Toby A Inkster

shank said:
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 '%')
 
N

Nick Theodorakis

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top