Basic HTML Website Part 2 – Adding CSS

This post is a continuation of the previous one: Basic HTML Website – Tutorial on creating a basic HTML Website. Now that we have our structure in place, we can now add CSS, which is if you remember from my skeleton example, is like skin on a human body. It is what makes it look good. What can CSS do? Some quick examples would be changing the text color, background color, adding borders, changing text size, adding an animation, etc. At the very least you can do just about anything. Let’s dive right on it. If you remember from the previous tutorial it was very basic and didn’t look all that interesting. We are going to build off of that same website and turn it into something much more interesting! Let’s get started . . .

 

There are three ways to get CSS into your website. First you can link to a separate CSS file (recommended). Second you can use in page CSS (typically in the head tag). Third you can use inline CSS (not recommended). I am going to use a separate CSS file as I believe this is the best way to keep things organized and not get complicated. How do you link to the CSS file? Let me show you:

In the head tag you put this code where the “rel” is telling the browser what kind of link this is (Cascading StyleSheet) and the “href” is the link to the file.

css link

A CSS file is different than an HTML file. It does not contain tags or anything real similar to HTML. Below is a partial example of an external CSS file:

external css example

Looks a bit different but trust me, thought it may look complicated it is pretty easy to understand. I will walk you through setting up a CSS file and putting some basic styles in it to make our HTML site look nicer. First a css file is saved as a .css instead of .html. For example we will save our external file as “style.css.” Go ahead and create a new blank page in the editor of your choice (I’m using Sublime2) and save it as “style.css.” I’m going to change the background color of the whole page to a light blue and have the default font-size set to 14 pixels. The code will look like this:

background

“body” is the element we want to change. Body refer to the site as a whole. I’m changing the background to a light blue and the font size to 14px (or 14 pts). Everything that is enclosed in the brackets (“{}” is what items will be changed (selector). Then the value is on the right side of the colon “:” and that tells the browser what it should do with that selector. Let’s review. Your start off by deciding what element you want to change, lets say an h1 tag. Then you decide what you what to change about the h1 tag. For example the color and font size. You would type in the selector “color:” don’t forget the colon, and then add the value. With color you can specify the actual color like “white”. You must end each selector line with a semicolon “;” which tells the browser that is all that needs to be done. Here is my example with the h1 tag:

h1 css example

Hopefully that makes sense. Let’s try doing one on your own. We are going to change the paragraph (“p”) tag. Let’s make the following changes:

  1. width = 300px
  2. color = orange or #ffaa00
  3. text-align = center
  4. background = white or #fff
  5. padding = 25px
  6. border-radius = 15px

What did you come up with? Compare your CSS with mine.

Hopefully you were able to come up with the same thing as what I did. This concludes the tutorial though there could be many more things that could be done. I want this to be a simple way of implementing some CSS and possibly give you some ideas of what can be done on your site. As always if you have any questions let me know.

Here is the webpage after adding CSS:

css added to site