3 Suggestions for CSS Beginners
Still somewhat new to CSS? Below are three suggestions to help improve your coding:
1) External, Not Internal
There are three ways to apply CSS styles to your web site:
- Use Internal CSS
- Use Inline CSS
- Use an External Style Sheet
Internal (or “embedded”) CSS is a set of CSS properties specified within the head tags of your page. For instance, if you want the background of your page to be black, you could do this:
<html>
<head>
<title>My Web Site</title>
<style type="text/css">
body {
background-color: #000;
}
</style>
</head>
Inline CSS is similar, except that the properties are applied directly to specific elements within the page. For instance, if you want one paragraph to have a 20px margin above it, you could do this:
<p style="margin-top: 20px">This is my sample paragraph.</p>
Using an external style sheet simply means that the CSS properties for your page are stored in their own file. For instance, if you want to link to an external style sheet named style.css, you could do this:
Note: this example assumes that style.css is kept in the same directory as your web page.
<html>
<head>
<title>My Web Site</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
So, which choice is the best? In most cases, using an external style sheet is the best practice for the following reasons:
- Universal Changes: if you change the paragraph font size or line height in the external style sheet, it changes across your entire site. In other words, you don’t need to change these properties on every page.
- File Size: now that most Internet users are on DSL, cable, or FiOS, it’s not quite as important as it used to be to monitor the file size of each page on your site. Still, it’s a good habit to keep your file sizes as small as you can in order to ensure that your site loads quickly. If you put your CSS within the head tags of every page (or within the body of every page) you’re going to increase those pages’ file sizes.
- Good Housekeeping: it’s always a good idea to keep your code as clean and streamlined as possible. Not only is it a sign of professionalism, it’s an effective way of making sure that future changes to the site will be as painless as possible.
2) Override Browser Defaults
Every web browser has its own defaults, which means if you don’t specify the CSS properties of all of your HTML tags, the look of your page will change from browser to browser. For instance, all browsers have their own defaults for paragraph font sizes, margins, and padding. If you don’t override these defaults, your text will look different in every browser.
Here are a couple of quick tips to get you started:
- Reset the margins and padding of everything on your site to zero. This way, you’ll only need to add padding and margin properties to elements that need them, and you won’t have to worry about the elements on your pages being positioned differently in each browser. To reset these properties, add the following code to the top of your style sheet:
* {
margin: 0;
padding: 0;
} - Don’t forget about line height. Simply setting the paragraph tag’s font size, padding, and margin aren’t enough to display your text identically across all browsers. You need to set line height, as well, or the vertical space your text occupies will change dramatically from browser to browser.
3) Eliminate Redundancies
In the interest of minimizing file size and streamlining your code, you should eliminate redundancies in your style sheet. What kind of redundancies, you might ask? Below are two prime examples:
- Unnecessarily Applying the Same Property to Many Elements: for instance, if you want your entire site to be in Arial font, you don’t need to set the font family in every heading, paragraph, and list class. Just specify the body’s font family as Arial, and all of the other elements will inherit that font family.
- Failing to Combine Properties: In many cases, you can combine several properties into one. For instance, instead of defining the top margin, right margin, bottom margin, and left margin of a paragraph separately, as in example 1, you can specify them together, as in example 2:
Example 1:
p {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 10px;
}Example 2:
p {
margin: 10px 5px 10px 10px;
}Note: when combining properties for both margins and padding, the numbers translate clockwise. In other words, the first number is for the top, the second is for the right, the third is for the bottom, and the fourth is for the left.
