Oct 3

CSS Basics

CSS stands for Cascading Style Sheets and they control the design of your website. It seems weird to use the word cascading in this context, but it makes perfect sense when you understand the logistics of how to code in CSS. A CSS file can be created just like an html file, but it has the .css extension instead of .html. Just like how we created a folder for all of our images, lets make one for just the CSS. Make a folder called “stylesheets” inside the game-genome folder, then create a file called “global.css” in that stylesheets folder.

Tip: You can create a folder in the Sublime Text 2 file directory by right clicking a folder.

Link to the CSS File

We can’t begin coding yet because the html files have no reference to this CSS file, so any changes we make won’t show up. To include our css folder we will have to place some code into the <head> of our document. It doesn’t matter in what order in relation to the other elements with <head>, just throw it in.

<link href="stylesheets/global.css" rel="stylesheet" type="text/css">

You can pretty much ignore the rel / type attributes, just know that they are required. The href attribute is the one that references the style sheet, and notice that it has a relative path. If you want to include this in gow3.html, which is within the /game-genome/games/ directory, it would look like this:

<link href="../stylesheets/global.css" rel="stylesheet" type="text/css">
Targeting Elements

Now lets test some code out to see if the link to our stylesheet worked. Copy and paste this block of code into global.css

body {
  color: #00AA00;
}

When you refresh the page you should see your entire background changed to green. If it has not then check out to see if your paths to the CSS file are correct. This code is the way that you can target a html element and set multiple attributes to it. Here it is again but with labels instead.

target {
  attribute1: value;
  attribute2: value;
}

The target is simply the HTML tag that you want to be affected by the attributes. We do not have to include the opening and closing carets in CSS, it knows what to look for without them. As you can see multiple attributes can be included from within this one block. They also don’t necesarially have to be in this format, this is totally fine:

target { attribute1: value; }

But you must always include the ending semi-colon ; at the end of each value. This use of a semi-colon is common in programming and is used to signify that this bit of code is done, so the computer can move on to the next bit. It will be required both in CSS and Javascript/jQuery in the future.

Cascading

Going back to this word, it is included because some attributes that you assign to a parent may be passed on to the child elements within it, like a waterfall cascades down to the lower rocks. Not all attributes do this, but it is really useful for the ones that do. For example, if we change the body element to have this attribute:

body {
  font-size: 50px;
}

This will make all the text on the page 50px in size. I never targeted the <div> element or the <li> elements, but since they are child elements to the <body>, they will inherit some of its properties. Lastly, if you select a target that has multiple instances on a page, such as our <li> menu list items, they will all be affected by that code.

Classes

Lets say there are multiple of the same element on one page and you need to target one specific element, that is done through Classes. These are attributes that you set on an HTML element within the .html document, then can reference within the .css document to change other attributes of that element. Lets see what an HTML element looks like when it has a class:

<div class="text-box">Hello World</div>

Pretty simple, right? A class can be attached to any html element and can contain letters, numbers, hyphens ( – ), and underscores ( _ ). Then, when you are in the css file, to target this element we would write:

.text-box {
  border: 1px solid #000;
}

Unlike targeting a regular html element where we could leave the carets off (< >) when referencing it in CSS, the period ( . ) must be prepended to the class name when targeting it. This is to avoid confusion if the class name is the same as a HTML element. If multiple elements share the same class name then they will both be given the same attributes. You may also add more than one class to the same element, with each class being separated by a space. For example,

<div class="text-box greenBorder big_font_size larger55">Hello World</div>
List of Attributes

To go over every attribute would take me forever, so here is a list of them. When learning CSS you will run into a lot of problems because the language is no where near 100% perfect. As always you must find ways to practice CSS techniques, and one of the best ways is to try and replicate a major website. Try to choose a very basic one, maybe twitter, then try to recreate the website yourself. Next lesson we will go over the best practices when using CSS and how to solve some basic “gotchas” when dealing with this very finicky language but after that we will quickly move on to Javascript.

Leave a comment