Learning CSS

[motuiti]

I found a quick way of changing my html to CSS. Still in some cases I have to change the code manually but I am unfamiiar with some fundamentals. Take the following line:

p.p1 {margin: 0.0px 0.0px 16.0px 0.0px; text-align: center; font: 10.0px Comic Sans MS}

Can someone direct me to a page where I can find out what each unused field of 0.0px and the 16.0px represents. IE; a good page for CSS basics for the novice

Thanks

Sandy

[WebJoel]

I found a quick way of changing my html to CSS. Still in some cases I have to change the code manually but I am unfamiiar with some fundamentals. Take the following line:

p.p1 {margin: 0.0px 0.0px 16.0px 0.0px; text-align: center; font: 10.0px Comic Sans MS}

Can someone direct me to a page where I can find out what each unused field of 0.0px and the 16.0px represents. IE; a good page for CSS basics for the novice

Thanks

Sandy That is the four edges to "top, right, bottom, left" (in this order) so when you see:

margin: 5px 10px 12px 10px

this is the same as

margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:10px;

But, -what about those "0.0px"?

"Zero" has no value. In essence, only equals itself, so "0px" = "0pt" = "0em" = "0cm" and so forth. Thus, they don't even require a 'unit of measure'. So:

margin: 10px 0.0px 15px 0.0px

can be written as

margin: 10px 0 15px 0; (no "px" required)

and say the same thing.
It's just shorthand, and it does save a few bytes of page-size when applied consistently throughout a web page.p.p1 {margin: 0.0px 0.0px 16.0px 0.0px; text-align: center; font: 10.0px Comic Sans MS} could be written like this:
p.p1 {margin: 0 0 16px 0; text-align: center; font: 10.0px "Comic Sans MS"}

or even this:
p.p1 {margin-bottom:16px; text-align: center; font: 10.0px "Comic Sans MS"} although the next-to-last example is actually a few bits smaller (because word "bottom" is longer)..
Note the quotes around the font-family. Multi-word declarations like font names require single or double quotes around them to be valid.

[Fang]

http://www.w3.org/TR/REC-CSS1#margin

Both yield the same result, but the second method is preferable
margin: 0.0px 0.0px 16.0px 0.0px;
margin: 0 0 16px 0;