If you’re setting out to learn how to use CSS (Cascading Style Sheets), the first step may not be learning the language but learning where to put the language. There are basically 3 ways to apply CSS to your HTML.
Note: With tools like jQuery and old-fashioned JavaScript, some might say there are more than 3 ways to apply CSS, but this article is about the 3 basic ways that will suit most purposes.
It doesn’t matter which order you learn these in but for this article we’ll go from the specific to the general. We’ll start with inline, then move to internal, then finish with external.
Inline
We start with the inline method of CSS placement. Inline style declarations allow us to define styles at the exact point we need them. For example, if we want to make a headline show up as large, bold, crimson text, we will find that headline in our HTML and add the CSS where the headline appears in the markup. Here is an example of what this inline CSS declaration would look like:
<h1 style="font-size:2.5em;font-weight:bold;color:#990000;">Sample
Headline</h1>
<p>This is a paragraph that has no inline styles applied to it.</p>
What you see in the code example above is mostly HTML, but it has some CSS essentially dropped right in the middle of it. We have specified that our h1 heading should have a font-size of 2.5 em (fairly large), a font-weight of bold (the CSS way of saying it should be boldfaced) and a color of #990000 (the hexadecimal, web-safe code for crimson).
We’ve also included a paragraph below the headline in our example, but we haven’t added any inline styles to it. With inline style declarations, we only affect the elements that we choose to style.
Now, if this was the only way to apply CSS, you might wonder just how useful this technology is. After all, it would be pretty tedious to have to add these kinds of statements to every piece of content you want to style throughout a website.
That’s where the other 2 methods of CSS placement come in so let’s move on.
Internal
Let’s say we want all our h1 headings and paragraphs on one particular web page to have a certain size, color and maybe a certain line-height (space between lines). One way to do this would be to include internal styles on the page rather than inline.
With internal placement of CSS, we will make our style rules in the HEAD section of the HTML. By using this method, the style declarations we make will affect only content on this page.
The basic syntax for writing internal CSS is to enclose these style declarations in style tags, so we add the following lines inside the HEAD section of our page:
<style>
h1 {font-size:1.5em; color:#990000;}
p {font-size:.9em; line-height:140%;color:#000000;}
</style>
This code sets the style on all p elements and all h1 elements within this particular web page. Keep in mind that there are ways to override those styles on certain paragraphs. One way to do that would be to put an inline style on a certain paragraph that sets its color to gray instead of black. Another would be to add more rules that would affect certain paragraphs using classes and IDs.
In case you’re wondering, technically you could put your internal CSS declarations in the BODY of the HTML rather than the HEAD, but placing the CSS in the HEAD is better for organization and performance and is definitely the way to go.
External
The 3rd method for applying CSS to your HTML is to put your CSS in an external file (call it something like style.css) and then link to that CSS in your HTML file. The great thing about this method is that you can have 1000 pages (or more) in a website and have every one of them link to that stylesheet. This means you can make changes to that one CSS file and have the changes apply across all 1000 pages of your site.
There are basically 2 steps to this method, building the CSS file and then linking to the CSS file in your HTML. We won’t cover making the CSS file in this post, so let’s just assume we have a CSS file called style.css that lives in the same directory on our server as the HTML file we want to apply it to.
All we have to do is type the following in the HEAD of our HTML document:
<link rel="stylesheet" href="style.css" media="screen" />
As long as you have a stylesheet called style.css then any HTML file that includes that link in its HEAD will have the rules from style.css applied to it. This is generally how you would go about setting styles that control the appearance of a whole website in one place, the external CSS file.
Note: The href part of the link above has to correctly link to style.css, so if you are linking from a different directory you will have to use relative or absolute linking to navigate the path to style.css.
When to use which
You might wonder why there are 3 ways to apply CSS to your HTML, but once you start doing this stuff on your own website, you’ll quickly realize that all 3 methods are useful depending on the situation.
For example, most well-done CSS websites with more than about 2 pages employ an external CSS file to define most styles for the site. You can think of these as the default styles for all pages.
Now suppose there is one page where you want all styles to be the same as the rest of the site but with bigger paragraph text, or different colored headlines. You can use internal placement to define those different styles in the HEAD section of that page only and override the styles in your external CSS file. But, there’s a catch. If you want to override the external CSS with internal declarations, you’ll need to place the internal style tags and declarations after the link to the external style sheet.
Internal styles do not necessarily override external styles. If your internal styles come before the external CSS link, the external will overwrite the internal.
On the other hand, when we’re talking about overriding external or internal CSS with inline styles, things are a little more clearcut. Inline styles do override internal or external CSS. This means you can use inline styles if you have something that you just want to do for one specific element on one page without writing a rule that affects anything else.
It’s probably best to use inline styles sparingly. One of the main advantages of CSS is to separate the presentation, or look, of your website from the content of the site. External stylesheets and, to some extent, internal rules in the HEAD of a page, facilitate this separation. Inline styles mix presentation and content, and doing this too often can leave you with a site that’s difficult to maintain when you start making changes to the look with CSS.
If you are just getting started with CSS, here are a couple of good introductions (one video / one article) that cover a lot more than the one topic I’ve discussed above:
