Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Beginning CSS design

M

MindBrain

macrumors regular
Original poster
Jun 8, 2007
161
0
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
 
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 ;)
 
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:
 
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.
 
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:
 
 
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!
 
7on said:
<div>Home. Links. About Us. Contact Us.</div> You can put your Navigation in a box.
Click to expand...

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>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back