SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Got some CSS element questions

    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

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Got some CSS element questions

    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.

  3. #3
    SitePoint Enthusiast madmax's Avatar
    Join Date
    Dec 2002
    Location
    Manila
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think Paul C is right (though i havent checked)
    i guess that's why they called it Cascading Style Sheets
    i pressume that you know the implications of what you're doing?
    (or are you just trying to look cool?)

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup

  7. #7
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Topstyle? Does that contain all the css functions, or do you still have to manually write out the code.

    thanks
    bryan

  10. #10
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/

  11. #11
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Topstyle is awesome for css. Between it and www.w3.org you can't go wrong.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  15. #15
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  16. #16
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •