I know the basics already, lets to straight to the zero out topic. Click here!
If you really have no background on CSS, read on. We have CSS that can be in-line style, in the style tags or in a linked CSS file. Just as an introduction to show you how these three are done.
In-line style to make some text bold:
<p style="font-weight:bold;">Some text</p>
In the style tags to make some text bold:
<head>
<style type="text/css">
#boldthis { font-weight:bold; }
</style>
</head>
<body>
<p id="boldthis">Some text</p>
</body>
Using a linked CSS file:
<head> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> <p id="boldthis">Some text</p> </body>
Then in the CSS file css/styles.css in the example above will have:
<style type="text/css">
#boldthis { font-weight:bold; }
</style>
Now what we will deal with is mostly link in a separate CSS file, because that way you just make all pages link to the same stylesheet and just do changed to the stylesheet to make changes globally on all pages. Something I believe most of you already know.
[ top of page ]
Nearly every element has a default margin and padding setting in browsers and they are not all the same among browsers. Imagine plain HTML file and simply place nothing but an image. That image will have a different distance from the edge of the browser window. Although in the past, we always got away with it using leftmargin, topmargin, rightmargin, bottommargin for Internet Explorer and marginwidth and marginheight for the Mozilla family of browsers, there is an advantage in having CSS do it. Aside from being more W3C compliant, you are also making a global setting you can easily change for all pages when having a linked CSS file.
Problem is, not only the body has a default padding and margin, so does, paragraph tags, form tags, ordered and unordered list, everything behaves differently in both IE and Mozilla browsers.
So to fix the problem is making all margins, paddings, borders all zero as the first thing done in your stylesheet just to make everything consistent among browsers when it comes to the default padding and margins these browsers have.
Below is a portion of my default CSS file that I always use and just modify for every website.
/* undo some default styling of common (X)HTML browsers
************************************************************/
/* No list-markers by default -
* must redefine bullets w/ bg graphics
********************************************************/
ul,ol {
list-style:none;
}
/* Avoid browser default inconsistent heading,
* font-sizes and pre/code
********************************************************/
body,h1,h2,h3,h4,h5,h6,pre,code,td {
font-size:1em;
}
/* Remove inconsistent (among browsers) -
* default padding or margin
********************************************************/
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input,label,div,dd,dt,dl,table,tr,td,img,hr {
margin:0; padding:0;
}
/* prevent blue linked image borders
********************************************************/
a img,:link img,:visited img,fieldset {
border:none;
}
I will not go into every line one-by-one, but just to give a few explanations what is happening:
If you have this in your HTML file:
<span>Big Text?</span> <p><span>Big text?</span></p>
And this in your CSS file:
body { font-size: 12px; }
span { font-size: 24px; }
This will display something like:
Big Text
Big Text
But if your CSS file has this, p and span together separated by a space:
body { font-size: 12px; }
p span { font-size: 24px; }
You will get something like this:
Big Text
Big Text
Ok now the line-by-line explanation. Since you can already identify a comment from not a comment, you should easily find the comments in the CSS code above. And the first CSS code that is not a comment is:
ul,ol {
list-style:none;
}
In Microsoft Internet Explorer, the default unordered list (ul) style is a disk, a solid colored circle. And in Mozilla Firefox, the default unordered list (ul) style is a solid diamond. Making all list styles go away, and just assigning new list-styles when needed on a page assures you that the bullets or numberings will be the same on all browsers.
Next CSS code is this:
body,h1,h2,h3,h4,h5,h6,pre,code,td {
font-size:1em;
}
This makes all font sizes all 1em, which is very small, but at least you are assigning it some value which avoids the browser from displaying in their default size. Since among various browsers, the default size is different.
One of the most easily observable inconsistencies among browsers are the default margins and paddings, on almost any element. As how web designers before used to do is (including myself) is try to get a good compromise to find the "middle setting." Where a graphic is slight to the left on one browser and slightly to the right in another kind of browser. Tables did the trick in positioning things on a page but sometimes tables just won't follow you so the transparent gif image was born. Usually at a 1x1 pixel size, the image was resized in HTML and used like a pusher of elements on the screen to place things where you wanted them to be at a per pixel precision.
Now that all margins and paddings are all zero, you can now be sure that on all browsers, the margins and paddings on any element should be the same. The next steps will be involving the building a simple homepage since I believe learning by example is the best way to teach this stuff. And the first thing we play around with is the body tag of the site.
[ top of page ]