HTML Basics: Inserting CSS

When dealing with HTML you are going to naturally encounter CSS if you want to make your website look remotely decent. CSS itself is easy enough to learn and will be explained throughout this tutorial but the first real step to using CSS is knowing how to combine it with your code.

But first what is CSS? CSS stands for Cascading Style Sheet. It is, as the name implies, a way to write styles into your HTML to give it a certain look and feel. In the past, websites were designed with nothing but tables and frames, now it's rare to even find a site with a table on it.

So, now that we understand what CSS is how do we use it? It's very simple really, CSS has three ways of combining it with your code, all three have different purposes and uses. These are external, internal, and inline.

The first one we are going to discuss is external. An external style sheet is most commonly used for CSS that is going to be reused on other pages. This is most easily demonstrated by looking at my background. It is the same on every page and is displayed with CSS. It is stored in an external style sheet.

You can create a style sheet in any text editor such as notepad. For Windows users I personally recommend using notepad++ as it will color all of your code which will make it much easier to spot mistakes. I use Linux GEdit which is the default text editor for Linux users.

A basic external style sheet would look something like this:

style.css

body {
    color: #000000;
    width: 960px;
    margin: auto;
} 

This would make the font color black and the width of everything in the body tag 960 pixels. "margin: auto;" makes the content on the page automatically align to the center based on the browser size. For better understanding of this all you have to do is look at my blog right now and notice that all the "content" is in the center and only 960 pixels wide.

Having the CSS file alone doesn't really do you any good though if your HTML files aren't using it. The way to make your HTML see it is very simple though. You simply do this:

htmlFileName.html

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Make sure your embed code is within the head tag of your page. You can name your css file anything you want as long as it has the .css extension, it's just most common to name it "style.css". You MUST embed the style sheet into every html file you wish to be affected by it.

Now that we have covered external CSS let's talk about internal. Internal style sheets are good for  when you want a specific page to look unique compared to the rest. Using our previous code as an example here is some internal css:

htmlFileName.html

<head>
<link rel="stylesheet" type="text/css" href="style.css"> <!--You only need this if you want the external style sheet in the page as well. -->
<style>
body {
    color: #333333;
}
</style>
</head>

This could be used if you want a specific page to have a different font color while still maintaining everything else that was used. The reason this works is because internal style sheets has priority over the external style sheet.Whatever the internal style sheet has set is what will be used for that page and the external style sheet just fills in the gaps.

Now for the inline CSS. This is most useful whenever you only have one tag that you want to be affected by the CSS but it is still recommended that you use external or internal for future reusability if things ever change and you do want to use it more then once.

An example of inline code:

<p style="color: #FFFFFF;"> This font is white </p>

This would make everything inside of the paragraph tag white regardless of internal or external style sheet settings. Just like how internal css has priority over external, inline has priority over everything. Using these three ways of implementing css at once will result in a very nice design and feel for your website.