I'm writing this post because of how often I see people asking questions about or saying that they don't know anything about CSS. I know that to the complete novice CSS looks intimidating but really it's a very simple thing to master. There just aren't that many things to get used to. Hopefully this simple explanation of the basics will be enough to get the beginners up and running. This by no means covers everything related to CSS but it is the basic rules and everything else you can Google and understand how to apply the answers you find on Google.

First a word about tags. Tags, with just a couple of exceptions always have an opening tag and a closing tag. For example a paragraph tag is written like so...





Note the "/" character in the closing tag. This tells the browser that this is the end of the paragraph tag block. Everything between the p tags is treated and rendered as a paragraph. This general rule of opening and closing tags is pretty much universal with all HTML code/markup. Exceptions would be in the case of certain tags that don't actually have any content such as an <img> tag. These tags contain all their information inside the tag itself. For example...



Notice the closing bracket "/>" contains our closing "/" character. This is what's considered a self closing tag. Maybe at another time we will dissect the different components of the tag.

OK, let's move on to the CSS.

CSS stands for Cascading Style Sheet

It is a way to add styling to your page layout and content. There are basically 3 ways to add your styling to your content.

1.) Internal stylesheet. With this method we add the CSS rules to the header of your document using the <style> tag. This would be done like so...
























Now let's say we have one particular h1 tag that we want to be different than every other h1 tag on our site. We can use an inline style on the individual tag and it will override the style that is defined in our stylesheet. Styles applied at the element level are applied before styles that are defined in a stylesheet. So we could make a change to our h1 tag like so...





This will give us an h1 heading that gets all of its styling from our css file except the font-size. The font-size will be applied from the inline style. So this h1 heading will be a blue Tahoma font 50px high instead of 28px high.


Similarities and Differences


In all three of our methods you will notice that styles are defined using the same syntax, a name and a value i.e. In each pair the name is separated from the value by a colon ":" and each name/value pair is closed with a semicolon ";" This syntax is common across each method whether it's an inline style or an external stylesheet.

What is different is the way our styles are packaged. For an inline style we use the "style" attribute which for inline styles is written like so...



This style of notation is used within a tag like so...





You will notice that the style is inside the opening <> brackets and the attribute houses our name/pair elements. But the always uses the same syntax.

Next, in an internal stylesheet we still see the same syntax but we wrap it in "<style>" tags like so...







Lastly we come to the external stylesheet. Again we see the
























In the above example I have defined styles directly for the <p> tags and the <h1> tags. A better way might be to define a class like so...














By using this method when I want to apply this in my HTML document I would simply write my <p> tag like so...





You see in my opening <P> tag I call my class "leftAlignedBlue" and the style that is defined in my CSS file is applied to my paragraph text. Doing it this way I can have several styles defined and apply them whenever or wherever I like.