Got some CSS element questions

**jag5311** · Jan 5, 2003 21:51

First to start off, I just bought Eric Meyer on CSS and it is an awesome book. I am going to be going to the site pretty soon to check out his work. Now, on to the questions.

Going through the book, i have come across several things that have puzzled me.

I understand if between the <style></style> tags you have

Code:

table {border: 2px solid red; margin: 3px;}

because that means that any table elements in the page will have a 2 pixeled solid red border with a margin of 3 pixels around

I also understand that when you have this:

Code:

table td {padding: 0; border-width: 0' blah blah blah}

That all table cells will have a 0 width border, blah blah.

Now is where I get lost, and the book doesn't clear it up for me.

instead of just having #title, it is read as

Code:

td#title {attributes here}

what does that preceding element represent. Obviously a table cell, but why does it procede the ID?

And to further my confusion, this is thrown in

Code:

tr td#crumbs {attributes here}

I completely understand after the pound sign, that is the ID and its attributes. I can't figure out now why a table row with a table cell would procede it. Notice the bold so you know what I am talking about

One more for the road.
This is from the book

Code:

<td id="leftside">
then in the style they have

td#leftside {width: 120px; background: #EBDAC6;}
td#leftside td {whatever in here}
td#leftside table {whatever in here}

Can you break that down for me.

Thanks
Bryan

**Paul_C** · Jan 6, 2003 03:06

Originally posted by jag5311

Code:

td#title {attributes here}

what does that preceding element represent. Obviously a table cell, but why does it procede the ID?

Only a <td> element with an id="title" will match that.

And to further my confusion, this is thrown in

Code:

tr td#crumbs {attributes here}

I completely understand after the pound sign, that is the ID and its attributes. I can't figure out now why a table row with a table cell would procede it. Notice the bold so you know what I am talking about

Same as above plus a contextual selector. Basically this will only apply to a <td> element with an id="crumbs" that is found anywhere in a <tr>

One more for the road.
This is from the book

Code:

<td id="leftside">
then in the style they have

td#leftside {width: 120px; background: #EBDAC6;}
td#leftside td {whatever in here}
td#leftside table {whatever in here}

Can you break that down for me.

Thanks
Bryan

<td id="leftside> will be 120px wide with a background color of #ebdac6

The other two tell you that any <td> or <table> elements found within <td id="leftside"> will have the given attributes for each.

**madmax** · Jan 6, 2003 03:51

i think Paul C is right (though i havent checked)
i guess that's why they called it Cascading Style Sheets

**vgarcia** · Jan 6, 2003 10:22

Originally posted by madmax
i think Paul C is right (though i havent checked)
i guess that's why they called it Cascading Style Sheets

Yes, that is why they're called Cascading. CSS adheres to the rule of greater specificity. For example, if you have rules for all <div> elements, then rules for a particular class of <div>s, then rules for paragraphs in that class of <div>s, you can be assured that ALL of your styles will be implemented. The only exception to this is when, for example, a style rule for all <div>s is overwritten by the class. Here's a quick example:

Code:

<html>
<head>
<title>CSS example of inheritance</title>
<style type="text/css">
div {
 border: 1px solid #ccc;
 background-color: #fff;
 font-family: "times new roman", georgia, serif;
}
div p {
 font-family: monospace;
}
</style>
</head>
<body>
<div>
This would be in Times New Roman.
<p>This would be in a monospace font like courier, since the style rules were overwritten for p tags within this div.</p>
</div>
</body>
</html>

In my example the text that is not wrapped in any tag would be given a serif font, as that is specified for all divs. The paragraph, since it is a more specific rule, gets the monospace font.

**jag5311** · Jan 6, 2003 15:12

Thanks everyone

Paul C

So for that last example, basically it would work out like this

Code:

<td id="leftside">
<table>
<td>whatever hi how you doing</td>
</table>
</td>

td#leftside {width: 120px; background: #EBDAC6;}
td#leftside td {whatever in here}
td#leftside table {whatever in here}

So that table tag and that td tag that I just wrote would have the effects of td#leftside td and td#leftside table ???

Thanks
bryan

**Paul_C** · Jan 6, 2003 18:17

Yup

**jag5311** · Jan 6, 2003 19:04

cool. Man this is a slow process for me

I am trying to learn to much to fast.

Btw, do any of you guys/gals use Dreamweaver mx when doing your CSS elements. If so, Eric Meyer in his book sometimes has one set of styles and then starts another set right under the old one. How is this done in Dreamweaver without actually having to type out all the code.

Like this

Code:

<style type="text/css">
.whatever
.whatever2
</style>
</style type="text/css">
#cool
#yea
</style>

**duckie** · Jan 6, 2003 19:22

Originally posted by jag5311
Btw, do any of you guys/gals use Dreamweaver mx when doing your CSS elements. If so, Eric Meyer in his book sometimes has one set of styles and then starts another set right under the old one. How is this done in Dreamweaver without actually having to type out all the code.

Nope. Dreamweaver (all versions, including MX) does not handle CSS well enough for me. I highly recommend TopStyle if you want to do CSS with some level of complexity.

**jag5311** · Jan 6, 2003 20:53

Topstyle? Does that contain all the css functions, or do you still have to manually write out the code.

thanks
bryan

**duckie** · Jan 6, 2003 21:04

TopStyle is not a WYSIWYG CSS editor. Think of it as Homesite for CSS. Supports up to CSS2. You can download a trial version from the homepage.

http://www.bradsoft.com/topstyle/

**jag5311** · Jan 6, 2003 23:48

I haven't downloaded it yet, but is it like an add on for Dreamweaver, because I noticed dreamweaver mx is in a list of programs that its under. Or is it a program that is LIKE dreamweaver where you can do all your html/css code.

Thanks
Bryan

**duckie** · Jan 6, 2003 23:57

It is a text editor, like Notepad for example, but you get a lot of help with syntax highlighting and properties/values completion. Version 3 adds support for HTML/XHTML.

So, in a sense it is like Dreamweaver, because you can author HTML and CSS, but it is not like Dreamweaver because it does not support WYSIWYG editing.

It can function as an add-on to Dreamweaver in the sense that you can set Dreamweaver up to have TopStyle as an option for editing CSS.

**Paul_C** · Jan 7, 2003 01:32

Topstyle is awesome for css. Between it and www.w3.org you can't go wrong.

**vgarcia** · Jan 7, 2003 09:57

This month's Computer Arts magazine (I believe) has the full version of TopStyle included, not a trial. It's a UK magazine but it's available at Barnes & Noble stores in the US for $13 I believe. Much better than paying $80+ for the program! I'll check out Barnes and Noble today to make sure that's the right magazine, but I think I saw it there yesterday.

**Bill Posters** · Jan 7, 2003 11:31

Originally posted by vgarcia
This month's Computer Arts magazine (I believe) has the full version of TopStyle included, not a trial. It's a UK magazine but it's available at Barnes & Noble stores in the US for $13 I believe. Much better than paying $80+ for the program! I'll check out Barnes and Noble today to make sure that's the right magazine, but I think I saw it there yesterday.

It's actually last month's issue (Issue 39, Dec 2002)

Fwiw, the version of TopStyle that comes on the accompanying CD is 2.5.1 (the latest is 3.0).

While I'm not a regular buyer of CA, I bought it as it's a feature issue about all things 'type'.
For anyone into type/typography, it's worth picking up a copy.

**vgarcia** · Jan 7, 2003 12:23

Originally posted by Bill Posters

It's actually last month's issue (Issue 39, Dec 2002)

I guess we get it a little late here in the states, or B&N doesn't sell a lot of it, which is understandable since graphic design is a pretty niche market among the general population.

User Tag List

Thread: Got some CSS element questions

Thread Tools

Display

Got some CSS element questions

Re: Got some CSS element questions

Bookmarks

Bookmarks

Posting Permissions