14 replies [Last post]
abu117
Offline
newbie
Last seen: 11 years 15 weeks ago
Timezone: GMT-7
Joined: 2005-03-22
Posts: 10
Points: 5

You're gonna know real quick that I'm a newbie Smile

I am using dreamweaver to create style sheets. Pretty cool, and I understand totally the convenience of using them. I am a bit confused though. I have this as a style sheet:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #D2E9FF;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
table {
background-color: #EAF4FF;
padding: 3;
}

works great...when I add a table, it creates the table on the page, with the formatting asked for in the style sheet. Now I want to be able to add a different table, with no background and no border. I can't figure out how to do this. I mean, once a table is defined..it seems to format all tables the same way.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

two tables one page

A few things. This isn't how to specify a degree of a value:
padding: 3;

I believe you wanted:
padding: 3px;

Just head to google to find out all possible values (px, em, etc...)

Also, when you can use shorthand notation, you should. It will save you bandwidth on larger projects. So this:
background-color: #EAF4FF;

Can become this (without losing the effect):
background: #EAF4FF;

As to your actual question, this is what classes were born to do. If you want a different style table, just make a class for it and refer to the class you made within your HTML/XHTML. Look at this:

table { 
	background: #EAF4FF;
	padding: 3px;
}
table.alt {
	background: #0066CC;
	padding: 2px;
} 

Things should be making a bit more sense now. By default, our tables will follow the first rule. They will have a 3 pixel padding and a background color of #EAF4FF. However, sometimes we'll want an alternate table. You can name a class however you'd like. I decided to name it .alt and give it a different background color. To each his own. I've also given our alternate table less padding than the original. Here is the new code, including the CSS. I hope this all makes sense now.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
table { 
	background: #EAF4FF;
	padding: 3px;
}
table.alt {
	background: #0066CC;
	padding: 2px;
} 
</style>
</head>
<body>
<table>
  <tr>
    <th>col 1</th>
    <th>col 2</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
  </tr>
</table>
<table class="alt">
  <tr>
    <th>col 1</th>
    <th>col 2</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
  </tr>
</table>
</body>
</html>

Trench
Offline
newbie
Last seen: 17 years 37 weeks ago
Joined: 2005-03-18
Posts: 4
Points: 0

two tables one page

I'd like to add to the background shorthand bit, because it sure can save a lot of fuss.

background: #fff url('images/yourImage.gif') 0 0 no-repeat;

That is the shorthand of:

background-color: #fff;
background-image: url('images/yourImage.gif');
background-position: 0 0;
background-repeat: no-repeat;

(0 0 being 0px from the left and 0px from the top)

Here's the W3Schools writeup.

Other than that, yeah... antibland pretty much said it all. Except to say, hopefully you'll soon learn that when it comes to CSS there isn't a need to use tables at all really. Smile

abu117
Offline
newbie
Last seen: 11 years 15 weeks ago
Timezone: GMT-7
Joined: 2005-03-22
Posts: 10
Points: 5

u guys rock

not only do u offer an answer to my question, but you encourge me on by offering some hints. Thanks so much. This page is bookmarked for sure Smile

ui_dzyner
ui_dzyner's picture
Offline
Regular
india
Last seen: 17 years 36 weeks ago
india
Joined: 2005-03-21
Posts: 29
Points: 0

two tables one page

read this might b useful 2 u guys.
U canreduce the css code a bit as

Instead of using
h1 {
font-family Arial, Helvetica, sans-serif;
font-size 16px;
font-weight bold;
}
h2 {
font-family Arial, Helvetica, sans-serif;
font-size 12px;
font-weight bold;
}

Use
h1, h2{
font-family Arial, Helvetica, sans-serif;
font-weight bold;
}
h1{
font-size16px;
}
h1{
font-size12px;
}

Even 4 the background color #ffcc00 can be easily #fc0 wink

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

two tables one page

While we're on the subject,

First of all, I think the h1 in the last post was accidentally repeated twice. You can refine things even further. This:

h1, h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
h1{
font-size:16px;
}
h2{
font-size:12px;
}

can be reduced to:
h1, h2 {
font: bold 16px Arial, Helvetica, sans-serif; 
}
h2 { 
font-size: 12px;
}

Andrew

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

two tables one page

You can take it even further and declare font-size only on the headers. Then font family was declared in the body and the font-weight: bold is the default.

body { 
    font: 12px Arial, Helvetica, sans-serif;  
    background: #D2E9FF; 
    } 
h1 { 
    font-size: 16px; 
    } 
h2 { 
    font-size: 12px; 
    } 
table { 
    background: #EAF4FF; 
    padding: 3px; 
    } 

Note that sometimes using the background shortcut with only 1 attribute can foul up some browsers.

ui_dzyner,
instead of using

Quote:

read this might b useful 2 u guys.
U canreduce the css code a bit as

Use:

Quote:

Read this - it might be useful to you guys.
You can reduce the css code a bit as

Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

two tables one page

If were to dwell on the subject of 'Shorthand CSS' may I just point out a guide that Pineapplehead wrote on the subject in the 'How To' section , would hate to think his efforts were for naught.

http://www.csscreator.com/css-forum/ftopic6672.html

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

two tables one page

wolfcry911,

I see what you're doing. It's clever, but more lengthy in the end:

Yours = 99 characters

body { 
    font: 12px Arial, Helvetica, sans-serif;  
    background: #D2E9FF; 
    } 
h1 { 
    font-size: 16px; 
    } 
h2 { 
    font-size: 12px; 
    }

Mine = 66 characters

h1, h2 {
font: bold 16px Arial, Helvetica, sans-serif;
}
h2 {
font-size: 12px;
}

You took the shortcut on bold but I took a bigger shortcut on combining font-size. Interesting feud, though. Give up!

Andrew

********************************
*******************edit**********
********************************

Sorry Hugo, you slipped in as I posted. Would have declined otherwise.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

two tables one page

No probs, just feel that the 'How To' section tends to get overlooked.

antibland if you think about it, you have now lost the overall font declaration for the page, you would start to gain back the characters you have saved in subsequent font declarations, it's always best to declare an overall set of general font styles for the page.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

two tables one page

Antibland, I showed it that way because abu117 declared it. What if you wanted all elements to be arial? Now you have to declare all non headers in some fashion. In fact, in you're example the th and tds are in a serif font - whereas in anything abu does will be sans-serif. So now who wins? Wink

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

two tables one page

Hugo, your post was a run-on sentence and I got lost in the middle of it. I think I see what you mean, though.

wolfcry911, I totally lost site of the point of this exercise: to help out our new friend. Well, I'm a loser then. And I see your point too.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

two tables one page

Laughing out loud
I wouldn't go that far...
It's all in fun and good company. I think abu gets the idea anyway.

Trench
Offline
newbie
Last seen: 17 years 37 weeks ago
Joined: 2005-03-18
Posts: 4
Points: 0

two tables one page

Either that or he's now decided to take up knitting as an outlet for design.

Nice going, guys.

Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

two tables one page

antibland wrote:
Hugo, your post was a run-on sentence


Well I do apologize, for, my hopeless grammatical skills, I will try not to comma splice my sentences in future.
Your obviously well versed in these skills and I would hate to offend you further. Maybe next time I'll write in legalese sans punctuation might be easier for you to mentally punctuate my writing to your own standards.

As for getting lost in the middle of it , just try harder it wasn't really that difficult to understand mate.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me