SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there a way of working out which CSS bits are which??

    Hi

    I am just trying to learn how to use CSS and HTML and would like to be able to look at sites to try and find out how they did certain things (for educational purposes only not to copy). I would also like to be able to edit worpress templates. Is there a tool that easily lets you see which bit of code is which, for example what the navigation div is called and where you find the CSS for it etc etc? I have heard of CSSEdit is this something this can do?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Download Firefox 2 and then get the web developer extension and the firebug extension.

    This will allow you to highlight elements on live pages and it will tell you what styles are associated with them and what they are called etc.

    The web developer extension has a function called edit css which will allow you to change the css of sites on the fly so you can safely play around and see what happens.

    Of course it won't tell you what the meaning of the code is as that is up to you to learn.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Will that work on the Mac too?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also download the latest Opera and get the 'Developer Console'. (Use the Tools/Advanced/Developer tools menu option or get it from the Opera tools page.)

    The Developer Console shows, when you to click on any element on a web page, exactly which CSS rules apply for that element. It also shows you inherited rules, pointing out which ones have been overwritten by more specific rules. You can even modify the CSS live and see the effects immediately on the page. (It doesn't modify the original, of course, but lets you export the modified rules to a new style sheet.)

    The Developer Console also lets you examine the DOM tree (including nodes added via JavaScript) and the JavaScript properties of each node. You can even modify the DOM tree (remove nodes), making snapshots and exporting as HTML.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i'm wondering: is there a tool which will help you consolidate your site's css? you know, if you've used some style on one page and the same on another that could be in a separate style sheet rather than repeated twice, etc. -- there's many permuations of this kind of thing i think -- could be done to different extents in different ways. is there anything that will semi-automate that kind of thing? maybe it's the sort of thing that's in an app like dreamweaver? be better if there's a stand alone utility (for mac) which did solely what i'm talking about.

    just wondering, thanks.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Will that work on the Mac too?
    As far as I am aware it does.

    Quote Originally Posted by johnyboy
    is there a tool which will help you consolidate your site's css?
    There are some editors about that can help such as stylemaster or topstyle , although I haven't use them as I still code by hand but it looks like they can report duplicated and unused css etc.

    There are a list of other editors here:

    http://css-discuss.incutio.com/?page=CssEditors

  7. #7
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Coda looks pretty hot as well, considering getting a MacBook just for that

  8. #8
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok thanks.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just downloaded webdeveloper extensions and firebug, works great on my mac thanks for your help

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been playing around with firebug and its great thanks everyone. Can you actually permanently edit you own sites with it? How would you do this?

    Thanks you

  11. #11
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    447
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There's also the IE Developer toolbar, an add-on for IE7 that shows the various page elements in a quite easy-to-read format.
    http://www.firenza.net - my homage to a car from the 1970s


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
  •