iEntry 10th Anniversary
CSS
Tutorials
AjaxBack to Basics: A Beginners guide to starting a CSS Document
Here’s a tip for you. Never let the browser to decide what your site will look like. What we’ll go over today is a quick and easy way of defining styles for common html tags that should dramatically cut down on the amount of guess work a browser will have to do to interpret your website. As you all know some of our more popular browsers **cough** IE **cough** tend not to display things as well as we want on their own.
The good news is that it’s really simple to fix. The bad news is that it’ll take a little bit of typing to get it down to the way you want. I hope you’ve warmed your fingers up a bit so that you don’t get a cramp. Let’s get started…
Now, I like to start with the <body> tag when I’m creating my style sheet. It really doesn’t matter what order you go in, but I generally go down the list of what’s first presented on the page.
body {
}
First up let’s define the margins and the padding of the body so that we’ll get a nice even border across all browsers.
body {
margin: 0px;
padding: 0px;
}
What the above does is tell the browser to make all margins and all padding zero pixels across the entire body (meaning our website can go full screen all the way out to the edges).
Next we’ll go ahead and define our fonts and background color that we want the browser to use.
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font: normal 0.92em Arial, Helvetica, sans-serif;
}
With the font, I’ve used a little bit of short hand just to keep things compact and simple. If you aren’t familiar with this, it’s perfectly ok to do what’s comfortable for you.
With that out of the way, let’s move on to our next set of tags. For me this is either a <table> tag with <td> tags within it or a <div>, depending on what type of site I’m doing. Now is a good time to go ahead and define what we need for these two.
td {
font: normal 0.92em Arial, Helvectica, sans-serif;
}
div {
margin: 0px;
padding: 0px;
font: normal 0.92em Arial, Helvectica, sans-serif;
}
You’ll notice that I’ve zeroed out the margin and padding on all <div> tags. Why would I do this? Simple, not all browsers use the same settings to display these. Doing this we bend the browsers to our will. I prefer zero when doing all CSS layouts, but you can set them to whatever works best for you.
Next on the list will be our handy dandy links, but before we jump into these I’d like to say a few things. Links are a little different animal when it comes to redefining them. You could just make a standard “a” class in your CSS, but that doesn’t cover all aspects of the link itself. Instead we’ll use what’s called “pseudo-classes” for our linking.
a:link {
color: #0000CC;
text-decoration: underline;
}
a:hover {
color: #0000CC;
text-decoration: none;
}
a:visited {
color: #551A8B;
}
What this basically means is that we’ll be able to control various states of a link like it’s normal state (a:link), it’s mouse over effect (a:hover), and it’s state after it’s been clicked (a:visited). I set all my links to default blue with an underline. Then when you put your mouse over them they stay blue, but the underline disappears. Once it’s been clicked, just so you know you’ve clicked it before, I chose to use a dark purple. Like always you are free to use whatever effects/colors you’d like. This is just to give you a starting block to build upon.
Now we’ll move onto the next tag we’ll redefine, to make appear standard across all the browsers, the *lt;p> paragraph tag. For some reason there is a huge difference in the margins created by the <p> in FireFox and Internet Explorer. We’re going to fix that.
p {
margin: 10px 0px;
}
Finally we’ll move out to our head tags <h”x”>. The “x” would be replaced by a number to suit your needs of course. These aren’t really used as often as they used to e, but they still hold some value SEO wise. So, just to be sure, we’ll go ahead and include how we want them to look instead of the greatly oversized bold black text they normally default to.
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.1em;
}
For the sake of time, and a lot of reading we’ll end it here. What you should end up with is a very basic CSS document that addresses a few issues that you may encounter when browser checking your new website.
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font: normal 0.92em Arial, Helvetica, sans-serif;
}
td {
font: normal 0.92em Arial, Helvectica, sans-serif;
}
div {
margin: 0px;
padding: 0px;
font: normal 0.92em Arial, Helvectica, sans-serif;
}
a:link {
color: #0000CC;
text-decoration: underline;
}
a:hover {
color: #0000CC;
text-decoration: none;
}
a:visited {
color: #551A8B;
}
p {
margin: 10px 0px;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.1em;
}
There are a lot more HTML tags that we could redefine, but I find that the above is a great first step towards creating a browser friendly site using CSS. I hope this helps all of you out there who are just now getting your feet wet.