Beginning CSS design

Discussion in 'Web Design and Development' started by MindBrain, Jun 6, 2008.

  1. MindBrain macrumors regular

    Joined:
    Jun 8, 2007
    #1
    Hello, anyone know a good online resource that goes into the very basics of using CSS, particularly that goes into div layout as well. Something that breaks down the basics simply to use as a foundation for learning more? Thanks
     
  2. iostream.h macrumors regular

    Joined:
    Mar 4, 2004
    Location:
    Albuquerque, NM
    #2
    CSS prevents a very straight forward system to style elements on a page, and while a book will teach you about all of the intricacies of its abilities, I would recommend starting to learn it by using a WYSIWYG editor and seeing how it writes CSS as you position things on a page. You'll "get" it very quickly ;)
     
  3. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #3
    I like to think of it as boxes.

    <div></div> is a box. Inside this box you can put something.

    <div>It was the best of times...</div> You can put your site content in a box

    <div>Home. Links. About Us. Contact Us.</div> You can put your Navigation in a box.

    <div>Google Ads</div> You can have some cash flow :cool:

    What can you do with this? Well with CSS you can tell each of these elements where to go. You can use absolute positioning to put everything exactly to the pixel where you want it. This isn't *ideal* CSS design as it's pretty static like that.

    I like relative positions :) You can tell things to float:right or float:left and the <div> will flush with that side of the screen! And if you have multiple <div> in a row you can flush all of them to the left and create columns! Provided, of course, that you have ample screen width.

    The rest of <div> is lots of details. You can specify width, height, font, color, borders, etc. It's like tables like that, but CSS has a great advantage. You can store these parameters of CSS in a .css file and tell all the <p> tags to be x Font and x color. So anytime you enclose a paragraph in <p> tags, it'll take those properties! And want to change your mind later? Just change that one little line in your .css and all your <p> tags get changed :)

    I could go on, but get yourself a resource and take a look at examples. I wouldn't look too much at other sites (unless you see something you want to learn) because often other sites use sloppy code :belch:
     
  4. northy124 macrumors 68020

    northy124

    Joined:
    Nov 18, 2007
    #5
    HTML Dog are good for HTML (Not what you want but they have good tuts for it) & CSS (What you want) learning from the basics all the way to the advanced level.
     
  5. ruskiwi macrumors member

    Joined:
    Dec 13, 2006
    Location:
    Nelson, NZ
    #7
    Use CSSEdit. It shows real-time styling and has "x-ray" so you can load a webpage, click anywhere on it and it will tell you what style is being used to show the elements. I use it a lot and have found it extremely useful, especially debugging my CSS. :rolleyes:
     
  6. MindBrain thread starter macrumors regular

    Joined:
    Jun 8, 2007
    #9
    Thanks a lot yall. The HTML Dog site is really great. And so is the layout tutorial at Subcide. Got the web developer toolbar by chris pederick for firefox too. Thanks!
     
  7. chilipie macrumors 6502a

    chilipie

    Joined:
    May 8, 2006
    Location:
    Englandshire
    #10
    Well explained, but using a div for a menu? :eek:

    Nonononono :)

    Code:
    <ul>
    <li><a>Home.</a</li>
    <li><a>Links.</a</li>
    <li><a>About Us.</a</li>
    <li><a>Contact Us.</a</li>
    </ul>
     
  8. skyton macrumors 6502

    Joined:
    Jan 3, 2005
    Location:
    england

Share This Page