Last week we experimented with HTMl and dipped our toes into CSS and styles. In your final projects, much of your coding time will be spent trying to get your site to look the way you want it to. If you have a firm understanding of CSS (and of where to look for more info when you’re having trouble!), this will be a lot easier.
You already know about the Codeacademy CSS offerings. Another helpful tutorial site is Learn Layout, to which I’ll be referring later; and there are many other resources available on the web.
CSS Basics
- a web page links to a stylesheet
- the stylesheet instructs the browser as to how to display various kinds of web pages
- the browser then renders the page according to those instructions.
Sometimes when you have a really slow Internet connection, you will see a very ugly, cluttured web page before a smooth, clean, modern-looking website loads. That’s because your browser has loaded the web page but is having trouble accessing the stylesheet. E.g., here is the New York Times with and without CSS:


So, while HTML is responsible for the structure and content of a website, CSS is responsible for its presentation.
CSS Selectors
h1 { color:blue; font-family:serif; font-size:24px; } div { border: 1px solid black; } div.main p { color:red; } #specialid { float:left; }
They all follow the same pattern:
- first, a selector that identifies the elements to which these instructions will apply
- then an open brace “{” which marks the start of the actual instructions
- then a series of property-value pairs. Each of these sets the value of a particular property (duh). Note that at the end of a property, there is always a semi-colon!
- finally, a closing brace that ends the selector declaration.
Selector types
- Element selectors: these just give the element (like h1, p, div, span, etc.). they apply to all elements of this type.
- Class selectors: these give the name of a class attribute that an HTML element may have. This selector will always begin with a period (“.”). So for instance:
<p class="coolpara">Some Content</p>
.coolpara { color:green; }
- ID selector: this addresses the element with a particular ID:
<p id="myfave">Some Content</p>
#myfave { color:yellow; }
- Finally, we have many more complex selectors. This one here is a descendant selector:
div.main p { color:red; }
It addresses every p that is contained inside a div of class “main.”
Fonts, colors and borders
div.main { color:rgb(150,150,150); background-color(#b0c4ee); text-align: center; text-decoration:underline; font-family: "Times New Roman", Times, Serif; font-style:italic; font-size:1.25em; border: 4px green solid; border-radius:20%; }
There are plenty of other properties that can be set, in much the same way.
Display: Block vs. Inline
Box Model

For each element, you have the actual content, which is surrounded by the padding, surrounded in turn by the border, and once again surrounded by the margin. So for instance, try this code in JSBin:
.simple { width: 500px; margin: 20px auto; border 1px red solid; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border: 10px blue solid; }
<div class="fancy">
will look a lot bigger than <div class="simple">
, even though they are nominally the same size!
There are two ways to deal with this:
- subtract the size of the padding and border from your width values
- use the new “box-sizing:border-box” attribute. This will do all the math for you.
Positioning
The CSS “position” property has four possible values, whose names are impossible to remember and anyway don’t make sense. The four most important are:
.static { position: static; } .relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; } .fixed { position: fixed; bottom: 0; right: 0; width: 200px; background-color: white; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }
- Static positioning is the default. A statically-positioned element is said to be “unpositioned”.
- Relatively positioned elements are displaced relative to the position they “ought” to be occupying (according to the defaults). But meanwhile, the space it “ought” to be occupying is still considered “taken” by the browser, which won’t put anything else in that space unless you force it to do so.
- fixed elements have their position fixed to a spot on the screen (which is called “the viewport” in CSS talk). This is great when you want a fixed header or footer.
- absolutely-positioned elements are like fixed elements, only they’re positioned relative to the closest positioned ancestor, usually an element with a position property value of “relative”.
Understanding this well involves fiddling a lot with code; rather than make a bunch of fiddly exercies myself, I’ll direct you the codeacademy positioning exercies, which have a great help system that makes things a little easier.
Positioning 2: Float
Let’s play around with this briefly in JSBin.
Changes Comin’ Round Real Soon
It turns out that the theme framework we use may be converting to flexbox very soon. So, here is a very quick introduction to flexbox. You may want to look at this cheatsheet, this slightly more verbose one, or this very detailed specification. Meanwhile, there are lots of other new CSS features coming along, which will be supported by more and more browsers as we move forwards. We will keep an eye out for those as we continue; meanwhile, if you want to, you can check out transitions and learn a little bit about animations.