How To Make A Website Part II: Styling And CSS

In part the first of our Night School series on how to make a web site, we learned a little about the bones of a web page: HTML. In today’s lesson, we’re going to start putting the clothes on our site using styling and CSS.

The video above walks you through the three ways you can apply style to elements in an HTML document. It assumes you’ve already watched the first lesson, so if you haven’t, you may want to have done that first. By the end of this lesson, you’ll understand how to add style properties to elements within your web page. For extra reference material, check out the text below.

What You’ll Need

• A plain text editor to write your HTML
• Your web browser of choice to test your HTML
• A desire to beef up your knowledge of how the web works

As you can see, it doesn’t take much to get started.

What Are Styles and CSS?

CSS stands for Cascading Style Sheets, and it’s the language your browser uses to interpret how elements on a web page should look. The CSS language is pretty easy to understand: You define specific CSS properties, which span everything from element dimensions (width and height), text (weight, style, font-type, colour, etc), positioning and spacing (margins and paddings).

Essentially, if it has anything to do with how an element should look, it has to do with CSS. To extend on the metaphor above, HTML and the elements in your document are the bones of the site. They provide structure. CSS dresses your site and makes it look nice — or not. That part depends on your design chops.

Written out, for example, CSS looks a little something like this: If I wanted to add a colour to a piece of text, the corresponding CSS property is, unsurprisingly, color. To define the colour property, you’d simply type color, a colon, declare what the style should be, then end with a semicolon. So, for example, color:red;

How to Apply CSS to Elements

Of course, you need to know where to apply your CSS styles so that the elements on your page reflect them. (You couldn’t just go typing color:red; willy-nilly and expect results. You can use CSS to apply styles to any element on your web page in one of three ways:

• Inline styles: This method is best for quick, one-off styles that you want to apply to one element without a lot of overhead. You can add inline styles to any element by defining the style attribute of an element. For example:

  <p style="color:red;">The text inside this paragraph tag will be red.</p>

  You can define more than one property using inline styles as long as you remember the semicolon between them:

  <p> style="color:red; font-family:Helvetica; font-size:20px;">The text inside this p tag will be red, 20-pixels wide, and use Helvetica.<p>


• Internal stylesheets: Inside the document (often inside the head), you can define styles for elements in the page using selectors. Internal stylesheets look like this:
  

  <style type=”text/css”>
  h3 {
  color:red;
  font-family:Helvetica;
  font-size:20px;
  }
  </style>

  In the example above, the h3 is the selector. It’s saying, “All H3 elements on this page should use the following styles.” You can also define selectors using classes or element IDs.

• External stylesheets: These stylesheets move the CSS to an external file ending with .css (for example, style.css. The syntax for external stylesheets is exactly like what you saw with internal stylesheets, but you don’t need the style declaration. Instead, you link to your external stylesheet like so:
  <link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />

  In this instance, I’ve got the style.css file inside a stylesheets folder, and I’m telling the web browser: “When you load the page, looks for the CSS here.” Everything inside looks the same as what goes inside the style tags of internal stylesheets.

When to Use Classes, IDs and Element Selectors?
Most of the time, for the sake of organisation, you’ll want to use external stylesheets. But how do you decide which selectors to use? Let’s quickly run through your options:

• Element selectors: You should use an element selector when you want most elements of that type to look the same way on your page. So if you wanted all h2 elements to be 30 pixels, you could add the following to your CSS file:
  

  h2 {
  font-size:30px;
  }

  From then on, every h2 will respect that style unless you override it.

• Class selectors: Classes are useful for broad styles that you want to apply to more than one element, but it may be a style that you want to use a little more selectively than you would when using the element selector. In the video, I defined the very boring red class like so:
  

  .red {
  color:red;
  }

  Using the dot (.) before the text “red“, I’ve told my browser that this selector is a class I’m creating. Now, in any element in my page, I can add an attribute of class="red" and its text will be red.

• ID selectors: Defined in CSS by a preceding hash (#), the ID selector is for one specific element and one element only. Essentially this provides a way to adjust styles for one specific element without using inline styles — keeping all your styling in one place. (IDs are also very useful for JavaScript, but that’s well beyond our scope here.) If I wanted an 800x600px div with a red background called my_red_div, it would look like this:
  

  #my_red_div {
  width:800px;
  height:600px;
  background:red;
  }

Watch the video to see all this in practice. Reading is one thing, but it all starts to make more sense when you can see it.

That’s It?

In a nutshell, yes! Of course there’s more to CSS, and there are some seriously more advanced ways of handling CSS selectors so you can really narrow down how elements inherit their styles, but that’s really the basics. The only thing missing: the properties!

I’m not, however, going to walk through every CSS property available (we frankly don’t have time in this lesson). As with most things of the programming nature, you’ll learn more from searching out your options than I could provide in one quick guide. Here are a few CSS references you might want to browse:

• W3Schools CSS Refrence
• Added Bytes’ CSS Cheat Sheet
• A List Apart

I’d love to hear more favourites in the comments for reference tools! I’m mostly a googler for this kind of stuff. I’m not CSS expert, but I’ve spent a good amount of time hacking CSS for my own pet projects, and believe me: A little bit goes a long way, but there’s plenty you can learn if you want to go deep.