Beginning CSS design

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

  1. MindBrain macrumors regular

    Jun 8, 2007
    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

    Mar 4, 2004
    Albuquerque, NM
    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


    Nov 9, 2003
    Dress Rosa
    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


    Nov 18, 2007
    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

    Dec 13, 2006
    Nelson, NZ
    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

    Jun 8, 2007
    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


    May 8, 2006
    Well explained, but using a div for a menu? :eek:

    Nonononono :)

    <li><a>About Us.</a</li>
    <li><a>Contact Us.</a</li>
  8. skyton macrumors 6502

    Jan 3, 2005

Share This Page