What is CSS?

Contents

Intro

CSS is the way we tell a browser how to display our XHTML document. We write a list of rules describing the colour of the text, the size of the boxes— what goes where and what it looks like.

To write a CSS document, conceptually, we take the structure of an HTML document and lay it out so that:

  1. <body>
    1. <div id="header">
      1. <h1>My Page Title</h1>
      2. <ul class="navigation">
        1. <li> <a href="http://...">friends</a> </li>
        2. <li> <a href="http://...">profile</a> </li>
        3. <li> <a href="http://...">journal</a> </li>
        </ul>
      </div>
    2. <div id="content">
      1. <p> My content goes here</p>
      </div>
    3. <div id="footer">
      1. <p> My page by me!</p>
      </div>

Becomes...


body
	{ property:value; }
#header 
	{ property:value; }
#header h1 
	{ property:value; }
ul.navigation 
	{ property:value; }
#content 
	{ property:value; }
#content p 
	{ property:value; }
#footer 
	{ property:value; }

HTML pages are like tupperware on a shelf: boxes nested inside each other. Everything nested inside the body tag inherits the properties and values assigned to body, unless you say different. Everything inside #container inherits the properties of body and #container, and so on. CSS, then, cascades down the page, sort of like champagne filling a pyramid of glasses.

Before we go any further, let's explore some terms:

CSS terms

selectors:
anything you can select and then style is a selector; any html tag, class or id can be styled. Anything that can be given properties is a selector.
properties:
properties belong to selectors and they go in between curly brackets. Imagine each rule is part of a mini-biography of a selector:

Jane (sex: female; age: 30; status: single; background: archeology;)

Becomes

#content{ background: #fff; color: #000; border: 1px dotted #666;}

values:
the value of the property. Values go after the colon. The value of age is 30; the value of background is #ffffff.

To be complete, every property must have a value defined and vice versa. This property+value pair goes {inside the curly brackets} and each pair is separated by a semi-colon, just like complete clauses in a sentence.

#selector { property:value; }

Different kinds of selectors

id:
The hash sign # identifies unique elements. A unique element (something used only once on the page) is given an identity, just like you have a unique identity as a single person.
class:
For something used more than once, we may assign a class, or many classes, just like a person can be Welsh, British, a woman, and short. A class says this is a type, not a unique thing. In CSS, we use a dot to append a class. An unordered list of the class navigation is written like this:
ul.navigation { property:value; }
tag
For plain html tags, we don't use anything special, we just write the tag:
table { property:value; }

Selecting

Looking again at the example HTML document, see that the selector in a CSS declaration is actually a path. You can select every paragraph everywhere:

p { color:red; }

Or you can specify only certain paragraphs, in certain places, by writing out the path:

p { color: black; }
body #content p { color:red; }

You can read more about specificity later. For now, know that CSS is basically making pretty boxes and arranging them on a page. It uses a very clear jargon that's almost English, so it's easy to understand and to intuit further.

Some Values

On our archive, we use hex codes to define colours. Hex codes are a set of six letters (a-f) and digits (0-9) that make up a colour. #000000 is black. #ffffff is white. Everything else is somewhere in between.

We use ems as the general unit of measurement. 1 em is 100% of your font size; if your font size is 16px, 1 em is 16px.

1 em square:

Em is a scalable measurement, so if your visitor needs to zoom in or scale up the text, your layout is less likely to go madly wrong. Em the measurement is different from the HTML tag <em>, which means emphasis. Learn about our "Em Scale".

Block and Inline

HTML elements come in two flavours: block-level and inline.

  1. <ul>
    1. <li> block level elements </li>
    2. <li> are like building blocks </li>
    3. <li> they stack up one underneath the other </li>

Elements like <a href="http://...">links</a> and <em>emphasis</em> run along in a line, like text does.

Elements are either block or inline by default,* but in CSS we can decide how we want to display every single element on the screen. So we can make the list items <li> of an unordered list <ul>, which is a block containing a stack of blocks, into a line of elements very easily, by making the declaration: ul li {display:inline;}

  1. <ul>
    1. <li> css </li>
    2. <li> controls </li>
    3. <li> presentation </li>

Think of each #selector as a box. We can make it stack up, give it a background colour (or an image or both), a border, and we can give that border a colour and a thickness and a style. We can decide how big each box is and much blank space is going to be around it (margin) and inside it (padding). We can position (float, top, left) each box on the page. We can make the text in the box a particular size, colour, font, and make it bold or italic or asscaps; we can align it to the left or the right or centre it. We can do anything! (Almost anything.)

So CSS is a short profile of how your page is presented:

a.otw { background: #900; color:#fff; border:2px solid #000; font: 100 small-caps 1.5em 'gill sans',sans-serif; text-decoration:none; padding:0.15em }

OTW to OTW

Some useful CSS resources

← Back