Are you comfortable using HTML?

This lesson expands upon the topics previously covered in the Learn HTML in 45 Minutes! lesson, so please make sure you are comfortable with the topics covered in that lesson before continuing.

Learn CSS in 45 Minutes!

This lesson focuses on the fundamentals of CSS (Cascading Style Sheets), which is used to format the visual design of documents.

You may recall from the previous lesson that it's helpful to think of HTML like a blueprint for where the paragraphs, headings, and other sections of a website go. Following this analogy, if HTML is the blueprint that guides the structure of the website, then CSS acts as an interior designer for that structure. In other words, CSS tells the website (and us!) how things should look.

Did you know?

Just like any popular technology, CSS has changed and grown since it was first introduced. In fact, CSS even has different levels/versions, much in the same way as the iPhone (e.g. iPhone, iPhone 3, iPhone 3G, etc.). For this tutorial, we will be using CSS 2.1, since it is the current recommendation by W3C (World Wide Web Consortium), the primary authority on World Wide Web standards.

To get started, let's review a bit of HTML first. Remember discussing HTML elements in the previous lesson? If not, you might want to go back and review them, since they are essential for using CSS. For a quick review, take a look at the following HTML code, which is explained in more detail below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
<p><b>This paragraph is bold</b></p>
<p><i>This paragraph is italic<i></p>
<p><b><i>This paragraph is bold and italic...</i></b></p>
<p><em><strong>... and so is this one!</strong></em></p>
</body>
</html>

In the code above, we have a number of HTML elements, including the <body>, <h1>, and <p> elements. But is that really all the elements present? Of course not!

Exercise 1:

  1. See if you can find all of the HTML elements located within the <body> scope.
  2. How many different type of elements are there?
  3. Can you list them all?

Quick! Before you peek at the answer, make sure you've given Exercise 1 your best try!

Now for the answer: within the <body> scope, there are six different types of elements:

  1. <h1>
  2. <p>
  3. <i>
  4. <b>
  5. <em>
  6. <strong>

We now know that there are six different types of elements within the <body> scope in the code above...so what? Well, now that we are more familiar with HTML elements, we can move on to the main attraction, actually using CSS!

You can choose to implement CSS in three different ways, which are listed below.

  1. Inline style
  2. Internal style sheet
  3. External style sheet

Each of these approaches is discussed in brief detail below, with an example of what that use looks like.

Inline style

The inline style is probably the easiest to understand and doesn't require much understanding of HTML elements. The idea is simple: for whichever element you want to use CSS on, just add the CSS to that element within the < and > delimiters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body style="background-color:blue;">
<h1 style="color:white;">My First Website :)</h1>
<p style="color:yellow;font-weight:bold">Hello world! This is my first website.</p>
</body>
</html>

Now, let's see what this looks like!

My First Website :)

Hello world! This is my first website.

Cool, huh? While this example may not look the prettiest to you, the beauty of CSS is that it's easy to change to something you like even better! In order to do that, though, it's important to understand what exactly is being done.

In the <body> element, you can see that we have the line style="background-color:blue". This is saying that for the whole body, we want to apply the following style - in this case, we want the background color of the whole body to be blue. Easy!

CSS Colors

Although CSS "knows" about a large number of common colors such as red, blue, green, etc. and even some more descriptive colors like lightblue and plum, if you want a specific color, you may choose to use that color's equivalent hex (short for hexadecimal) value. This hex value corresponds to that color's overall RGB (red, green, blue) value in hex form. For example, red's hex value is #FF0000. In RGB form, we can see this as Red=FF, Green=00, Blue=00. Or, in decimal form: Red=255, Green=0, Blue=0. In fact, you may have seen this form displayed in other applications as (255, 0, 0). And we see this makes sense because the color red has a full value of red with no blue or green at all. To find a specific color's hex value, there are a number of useful sites, including w3school's color picker tool.

Similarly, in the <h1> element, we specified the color (note, there is a difference between color and background-color!) to be white. As we might expect, this changes the color of only the <h1> element.

Finally, we turn to the <p> element. Here, we again visit the color style, which, in this case, turns the entire <p> element yellow. However, we also have another style, font-weight:bold. This makes the entire <p> bolded. But more importantly, it shows that you can have more than one CSS style on a single HTML element! To separate the styles, we use a semicolon (;), which is also used at the end of a single style (like we saw with the <body> and <h1> elements).

Congratulations! You now know how to implement CSS styles inline!

Internal Style Sheet

The next way to utilize CSS is to use what is called an internal style sheet. With the internal style sheet, it's very important to know your HTML elements, since you are no longer applying the CSS within the < and > delimiters. In order to better understand, let's look at an example that produces the same result as the inline style.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
<style>
body {
  background-color: blue;
}
h1 {
  color: white;
}
p {
  color: yellow;
  font-weight: bold;
}
</style>
</head>
<body>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
</body>
</html>

First, notice that we no longer have any style="..." within the HTML elements like we did with the inline styles - rather, we've changed the HTML within (and including) the <body> to it's original state.

In place of the inline CSS, we've added a new HTML element within the HTML <head>, the <style> element. In between the <style> and </style> tags is where we'll specify the CSS to be used.

To start, let's look at the first part of the internal style sheet: body { background-color: blue; }. What this is saying is that we want to select the <body> element (described here with just the body selector). Then, we want to apply a certain number of styles to that <body> element, which we will specify within the { and } delimiters. Then, just like in the inline style, we specify background-color:blue (followed by a semicolon!).

For both the <h1> and <p> elements, the concept is the same! That is, we select the appropriate HTML element to apply CSS to (by using the name within the < and > delimiters) and apply the same styles we saw in the inline style. Pretty simple, huh? The benefit of this approach over the inline styles is that it keeps the HTML from becoming cluttered or too large. As we've implemented it so far, can you think of any problems with this approach?

Exercise 2:

  1. Try to think of any problems with the way we've implemented the internal style sheet.
  2. (Hint: this problem is nonexistent in the inline style approach!)

Have you come up with the problem? If not, it's okay. This is a tricky one! The problem occurs when we have more than one of a certain type of any HTML element that we wish to style from within the CSS. For example, suppose we had two separate <p> elements on our website. In the inline style, we would just add the CSS to each element individually, allowing for any differences to be specified within that element itself. But in the internal style sheet approach, we are applying the style to not just a single <p> element, but to all <p> elements!

While this may seem like a big problem, it is easily resolved. All that is required is for us, as aspiring web developers, to be a bit more specific in our CSS selectors. In other words, we need to tell the CSS to apply to something more specific than just the <p> element.

CSS Selectors

To learn more about CSS selectors, including the ability to specify which HTML element you want to apply styles to, stay tuned for future CSS lessons!

You may now be asking yourself, "Why would CSS apply to more than one element? Doesn't that just make my life more difficult, since I have to be more specific?". While I suppose this requirement for further thinking is a mild inconvenience, it also allows for great power in it's inherent generality. Suppose I had quite a few <p> elements on my page, but I wanted them all to be red. With the inline styles, I would have to add the color:red style to each of them individually. What a pain, right? With the internal style sheet, however, I need only to specify that I want a certain style to apply to all <p> elements, like we saw above and it will take care of the rest!

External style sheet

It's now time for us to learn about the final way to implement CSS, by using external style sheets! In fact, you already know pretty much all you need in order to use external style sheets. Simply put, an external style sheet is just an internal style sheet that is located in a different file than your HTML code. We can see this below in the following two files.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>My First Website :)</h1>
<p>Hello world! This is my first website.</p>
</body>
</html>

style.css

body {
  background-color: blue;
}
h1 {
  color: white;
}
p {
  color: yellow;
  font-weight: bold;
}

As you can see, we have pretty much the exact same code as in the internal style sheet example. However, we have removed the <style> tag from within the <head> and moved it to a new file, called style.css (without the <style> tags, since they are unnecessary). Additionally, in place of the old <style> tag, we have added a <link> element, which essentially tells us that it is a stylesheet (rel="stylesheet") of type CSS (type="text/css") and can be located by the filename style.css (href="style.css").

And that's it! The HTML now knows to look for styles in your style.css file and will apply them to the HTML document as required!

Exercise 3:

  1. Try to use an external style sheet yourself! Create a style.css file and add your own CSS to it.
  2. What happens if the CSS file is in a different folder than the index.html file? How can you solve this?
  3. (Hint: Remember the suggestion about StackOverflow from the previous lesson! Don't be afraid to search for answers online.)

Great! You know how to use all three types of stylesheets: inline, internal, and external. However, so far, we only know a few CSS attributes. Let's fix that! Suppose we wanted to make something like the following section. Any idea how to do that?

My First Website :)

Hello world! This is my first website.

The first step might be to identify what exactly is going on in the above section. To start, we notice that all the text is white, whereas before we had white and yellow. Furthermore, we notice that unlike the previous section that only used blue as the background color, this section uses stripes as its background (hint: this is an image!). Additionally, we notice that the text 'My First Website :)' is both centered in the section and italicized. The bottom text, 'Hello world! This is my first website.' is now placed on the right-hand side and smaller than before. Now that we understand what we see, how do we go about accomplishing the following things?

Exercise 4:

  1. See if you can figure out how to accomplish everything in the list above.
  2. (Hint: Remember StackOverflow? It, along with Google, serves as a great starting place for finding information!)

Hopefully you've given Exercise #4 your best effort! Now, let's talk about how everything in the list may be accomplished. It's first important to note that there is no single way to do any of the items in the list; in fact, many times you'll find that there are multiple CSS solutions to any given design problem!

Since you already know how to use white text color from the previous sections of this tutorial, we will start with the next item on the list, using a background image. One way to accomplish this is to use the background-image:url("...") CSS attribute, where the ... within the double-quotes is replaced with the url, or file path, of your image. Applied to the whole HTML body, for example, we can use the following in either our internal style sheet or external style sheet:

body {
  background-image: url("...");
}

So now we've accomplished setting an image as the background. Next on our list is to center text. In fact, we can also accomplish another item (right-aligning text) on our list at the same time! To align text horizontally - that is, either on the left, center, or right - we can simply use the text-align: attribute, with the left/center/right position filled out after the colon. Since we want to center the <h1> element and right-align the <p> element, we just add these to our existing CSS, which gives us the following:

body {
  background-image: url("...");
}
h1 {
  color: white;
  text-align: center;
}
p {
  color: white;
  text-align: right;
}

Awesome! We're making great progress! Now, let's see how to italicize text. From the previous HTML lesson, you know that you can italicize text from within the HTML, itself, by using the <i> element. However, if you wish to do this from the CSS styling, then you can utilize the font-style: italic attribute, which will produce the same effect. If we update our CSS to apply italics to the <h1> text, we now have the following:

body {
  background-image: url("...");
}
h1 {
  color: white;
  text-align: center;
  font-style: italic;
}
p {
  color: white;
  text-align: right;
}

Now all we have left on our list is changing the size of the text. Luckily, this is also easy! All that is required is the font-size: attribute. However, with this attribute we have a number of options. The first option is to provide an absolute pixel size that we want the text to match, such as 12px. Alternatively, we could specify that we want the font to be of a predefined size, like small, medium, or large. We could even specify that we want the font to be a percentage of it's normal size, such as 50% (for half size) or 200% (for double size)! For now, let's stick with an absolute pixel size, which would give us the following:

body {
  background-image: url("...");
}
h1 {
  color: white;
  text-align: center;
  font-style: italic;
}
p {
  color: white;
  text-align: right;
  font-size: 12px;
}

Great job! Let's review what we've covered today:

That's it for today! Make sure you try each of the exercises in this lesson and explore a bit for yourself online in order to solidify your understanding of CSS. Make sure to stay tuned for additional lessons!