Overview
This post is the first in a series aimed at CSS beginners. If you’ve only ever used HTML and want to start using CSS, then this is for you. This post lays the foundation for using style sheets.
Why CSS?
CSS is not HTML, but rather a way to separate structure from design. For example, if you have a header (“h1”) in HTML, you can use a style sheet to define how it should look. This comes in handy when you have multiple HTML elements with the same design. Let’s say that you are in charge of a large company website. You’ve been instructed to go through the entire site and change all of the headers from blue to red. Using HTML, that’s a big job. Using CSS, you would only have to make one small change. I very much recommend visiting the css zengarden website if you would like to see more practical applications to using CSS.
Before you can learn about CSS structure or code, you need to know how to integrate style sheets with HTML. The following will explain 4 different ways to do that.
Style Sheet Types
There are 4 style sheet types, or in other words, 4 ways to utilize style sheets in your HTML.
- Inline
- Embedded
- Linked
- Imported
Inline
When adding inline styles, you can apply them directly to the HTML tag using the style attribute. When used repeatedly, inline styles defeat the purpose of CSS, as they don’t separate structure from design. Inline styles are useful only when you need to add a single instance of a particular style. Inline styles are used like this:
<p style="color: blue;">
your content here
</p>Embedded
This is one of the more common style types you will run into. Embedded style sheets are placed within the head section of the document and affect only that document. They must be placed in between “style” tags and be clearly defined as CSS. Here is an example of an embedded style sheet:
<html>
<head>
<style type="text/css">
p.main {
font-weight: bold;
color: red;
background-color: blue;
}
h1 {color: yellow;}
</style>
</head>
<body>
....
</body>
</html>Linked
Linked style sheets provide the real power of CSS. You can link many webpages to a single CSS file. When you need to make design changes throughout the website, you only need to alter one CSS file! For example, if your company colors changed, and they need to be reflected on the website, you would only have to change one file, rather than the entire site. Pretty simple isn’t it? Linked style sheets are placed in the head section of the document like this:
<link rel="stylesheet" type="text/css" href="mainstyle.css">
Imported
You can import one style sheet into another style sheet using the “@import command. When importing a style sheet into another, it must be the very first rule in the style sheet. Imported style sheets are useful if you want to use different style sheets for different parts of your website. They are displayed like this:
@import url(otherstyle.css)Creating a Separate Style Sheet
You may be wondering how to set up a separate CSS file for linking or importing. It’s very easy. Simply place all of your CSS code in a notepad document and save it with a “.css” extension. There’s no need to define head or body sections like you would in HTML. All you need to do is place the code in the file.
Now that you understand how to integrate style sheets into your HTML code, you are ready to learn about CSS syntax. In the next tutorial, I will explain how to write basic CSS code and demonstrate how to use it with HTML.