Three Types of CSS
CSS comes in three types:
- In a separate file (external)
- At the top of a web page document (internal)
- Right next to the text it decorates (inline)
External style sheets are separate files full of CSS instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using one of these next two types). This is how you change a whole website at once. And that’s perfect if you want to keep up with the latest fashion in web pages without rewriting every page!
Internal styles are placed at the top of each web page document, before any of the content is listed. This is the next best thing to external, because they’re easy to find, yet allow you to ‘override’ an external style sheet — for that special page that wants to be a nonconformist!
Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element. On the other hand, this can make maintaining web pages a real chore!
Before we introduce CSS, let’s briefly review HTML. A simple web page is made of tags. Everything must go between the opening and closing tags. Thesection contains invisible directions called meta information. The section is where we put all the visible stuff. Here’s a super simple HTML example:
Now here is a short, simple example of CSS using an external file (we’ll call it ‘stylish.css’). We’re going to tell our web page to be white and to make our h1 heading, noted in our simple HTML example as ‘John Adams’, appear in red at 24 units high:
In the sample file, the top line is a comment and doesn’t do anything. The next part (called body) tells the web page what background color to use for the body section. Right after that, the h1 part says we want our largest heading (h1) to be the color red and its font size to be 24 units high.
Now, to include this external CSS file (‘stylish.css’), we have to include a link for it within thesection of our blank web page, as shown on screen:
We don’t need to include an external CSS file just to decorate one web page. We can just define our styles at the top of the page, in thesection. Here’s a quick example in which we’re making our heading (h1) blue at a font size of 28 px:
For those special times when you have something on your page that just can’t conform to your overall theme, well, you can go ahead and let it show its true individuality using inline CSS. To show you how, let’s override our h1 style, shall we? That way we can show you the power of CSS at the same time.
As you can see in the sample above, in thesection we originally told the h1 style to be blue and 28 units high. But CSS lets us override that in certain places. In this case, we included instructions within the section, and our inline snippet of CSS told the website to show the h1 heading as ‘John Hancock’ in red at a font of 48 px high.
Any More CSS Stuff?
Did you think that was all too easy? If you did, you’re right, there’s quite a bit more to CSS if you want to get at the power of it. CSS offers something called selectors that lets you specify what and when to decorate site elements, but we won’t go there today. Just know there’s a lot more!
Let’s review these amazing cascading styles that let us dress up our web pages uniformly without changing the content. Think of style sheets as a kind of computer dress code, a uniform way to display web pages with a consistent look and feel.
We learned that style sheets come in three types, external, internal, and inline. External ones have their own file and apply to every web page that includes them. Internal ones apply to the whole document, but you have to put them at the top of the page in the header. Inline styles let specific spots really stand out and be different, but at a cost of being hard to find and modify.
CSS also has things called selectors, which let you specify what and when to decorate site elements.