Learning CSS

Discussion in 'Web Design and Development' started by Mal, Jul 8, 2006.

  1. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #1
    Ok, I taught myself HTML 8-10 years ago, and made several websites entirely by hand while still in middle school and high school. Now, however, I see the potential in CSS and DHTML, but I can't seem to shake off the old mentality of how websites are designed. I want to be able to create websites that are strictly content in the html file, and design entirely by CSS, after having seen the sites that can do that and change design for an entire site with one simple edit. So, I need to relearn how to create the site, but I can't find any good online resources that actually show the very basics of putting together such a website. I need the same perspective as someone who's never made a website before in their life, it seems, since I have no clue where to begin with this. Any suggestions?

    jW
     
  2. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #3
    Yes, that's the site the sparked my interest, but unless I'm missing something, it doesn't really have a tutorial or anything to explain the how, though I've downloaded the source and looked through it. It's still not quite making sense to me.

    jW
     
  3. iGary Guest

    iGary

    Joined:
    May 26, 2004
    Location:
    Randy's House
    #4
    I think the best option is to get a solid HTML book and get yourself refreshed on that, and then work on the CSS.

    I can't relate to code at all, especially relational stuff like CSS. If you find any better sites, I'd love to check them out.
     
  4. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #5
    Maybe I wasn't clear, but I don't need to relearn the HTML. I still use it actively. What I'm looking for is a resource to learn the CSS. I still don't know how to do any more than simple style attributes and such.

    jW
     
  5. xper macrumors 6502

    xper

    Joined:
    Dec 15, 2005
    Location:
    Sweden - Halmstad
    #6
  6. AmbitiousLemon Moderator emeritus

    AmbitiousLemon

    Joined:
    Nov 28, 2001
    Location:
    down in Fraggle Rock
    #7
    I don't think you mean DHTML I think you mean XHTML. Which does mean you will need to relearn your html a little bit.

    A List Apart - is a good resource.

    As Is this guide

    But like a couple people have mentioned, you really just need to start looking at some code.

    Validator is a good resource too. Never publish a page that hasn't passed. The errors it gives you are informative and can help you learn as you go along.

    good tutorial section at CSS Pointers

    Another list of tutorials
     
  7. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #9
    I've just borrowed the latest version of Web Design in a Nutshell - A Desktop Quick Reference (this is one of those "small" 800 pages references ;)). And that book seems solid. I might have to buy that one when I have to return it...

    It has a whole part dedicated to CSS (one of the two main parts, the other one covers XHTML), and has the complete specification for CSS2.1 (and XHTML) in the Appendixes.
     
  8. wmmk macrumors 68020

    wmmk

    Joined:
    Mar 28, 2006
    Location:
    The Library.
    #10
    DHTML stands for dynamic html, which consists of xhtml, css, and javascript. IMHO, java is the hardest of these to learn, so getting a java book may be the best. From my experiences, getting a book from your local library or bookshop is always the best method to learn about things. A bookstore will have more recent offerings, so I reccomend going to borders or barnes and noble and getting this book:
    http://search.barnesandnoble.com/booksearch/isbnInquiry.asp?z=y&isbn=0321199588&itm=1
     
  9. AmbitiousLemon Moderator emeritus

    AmbitiousLemon

    Joined:
    Nov 28, 2001
    Location:
    down in Fraggle Rock
    #11
    Correct but the way the OP used DHTML wasn't correct. It sounded like he was referring to XHTML. Either way, the OP was suggesting that since he learned HTML 8-10 years ago he didn't need to learn XHTML. I was informing him that html has changed a bit and that he will need to learn xhtml as well as css.
     
  10. wmmk macrumors 68020

    wmmk

    Joined:
    Mar 28, 2006
    Location:
    The Library.
    #12
    very true. i stand corrected.
     
  11. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #13
    Yeah, you're both right. I do understand the difference between DHTML and XHTML, although I was using the term wrong. Also, I've kept up with them mostly, though I guess I could stand a bit of updating on some of the new techniques. I've been experimenting a bit though, and I took a web design class that had us validate everything as XHTML, so I'm in pretty good shape for the most part. I think I'll be taking some time to look over some sites, mostly from that Zen Garden page, and figuring out how to put it into effect with the designs I like. I'll look at most of the links ya'll posted too, though, they all seem pretty good. Thanks a bunch!

    jW
     
  12. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #14

    just a little nit-picking but, java and javascript are totally different. Learning javascript isn't too bad if you have experience with other languages. With xhtml and javascript knowledge you are ready for ajax. anywho, just thought i would straighten that out for everyone not "in the know".

    edit: you are right about java being a difficult little turd.
     
  13. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #15
    Thanks, guys, I made a sample replacement page for the site I'm working on, and I'm having a few problems I can't identify. I used the template from the Zen Garden, but it's way too wide for some reason, and I want to figure out what I need to do to if I want to break up the top image and have the text left aligned and the Fuji pic aligned evenly with the end of the repeating background. Any other suggestions would be awesome. I'm posting the css and html files here in addition to the link.

    http://www.japancpi.com/index2.html

    jW
     

    Attached Files:

  14. AmbitiousLemon Moderator emeritus

    AmbitiousLemon

    Joined:
    Nov 28, 2001
    Location:
    down in Fraggle Rock
    #16
    i'd suggest starting from scratch so you understand your own code.

    the too wide issue is this:

    #container {
    width: 80%;
    background-color: pink;
    border: 1px solid gray;
    padding: 0px 175px 0px 110px; /* This line is creating padding on the sides of your container that make it wider than the page */
    margin: 10px auto;
    line-height: 130%;
    }

    include the images and i'll play with your header issue a bit.
     
  15. Mal thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #17
    Hey, thanks. I think I'll be able to get the header, but I'll post the images tomorrow anyways, at least if I haven't got it by then (unlikely, I have to work). I did do a bunch of what's there more or less from scratch, but that was one of the areas I didn't bother with. Heh, it's not a long file and I scanned through it basically looking for numbers that were too big, but I somehow missed that, probably cause I still didn't know quite what I was looking for. My intention is to use this for practice, then create the real code from scratch laid out exactly how I want it, not simply copied from others. This is how I'm learning though, and I want to thank ya'll for helping me out.

    jW
     
  16. AmbitiousLemon Moderator emeritus

    AmbitiousLemon

    Joined:
    Nov 28, 2001
    Location:
    down in Fraggle Rock
    #18
    When trying to figure out code its often a good idea to set vibrant background colors or borders to differentiate the different things you are styling. This lets you more easily see what is responsible for errors than if its styled normally.
     
  17. Squareball macrumors regular

    Joined:
    Mar 16, 2004
    Location:
    Palo Alto, CA
    #19
    Don't start down the path of traditional dom scripting. Check out the Dojo Toolkit (http://www.dojotoolkit.org) and use the event system and all of the other goodies it provides. It's nice to know how it all works however but a lot of the way things used to be done are really on the way out.. and attaching onClick events to dom nodes is one of those.
     

Share This Page