A short taster session into the fundamental technologies powering the world wide web.

Your First CSS Session

Last time we looked at HTML, and saw how this was used to mark up the information in a webpage. Right now, your HTML pages don't look very good, as you haven't given any styling information. The way to do this is using CSS (Cascading Style Sheets).

CSS is a way of separating the way your page looks from the content that it displays. As an extreme example of this check out CSS Zen Garden - by clicking on the links you completely change how the site looks, but the html remains unchanged.

There are a few ways to include CSS in an HTML file:

Put the css inline in the html.
Put the css in a <style>..</style> section in the <head>
Link to a separate .css file in the <head>

The first way is sometimes useful, but defeats the point of using CSS to separate presentation and information. The second way is a bit better and is what we'll do now - it's nice to have everything in a single file when you're just starting. The third way is the best. We'll look at how to do this soon.

CSS in the `<head>`

If you're putting your CSS in the <head> of your html file (option 2) it should look something like this:

<head>
  <title>Some title</title>
  <style>
    h1 { color: red; }
  </style>
</head>

The bit inside the <style> tags is CSS. The h1 bit specifies the tag that will be styled. The bit inside the { ... } specifies the styles that will be applied. Here we change the colour of the h1 text red.

A few more CSS properties

There are loads of CSS properties that you can use to customize your site, and luckily they all follow the same structure. Below are a few more:

p { font-family: 'Arial'; }
h2 { 
    font-size: 20px;
    border-width: 10px;
    border-color: blue;
    border-style: solid;  
}
h3 {
    background-color: green;
    font-size: 2px;
}

First CSS Exercise

In the below exercise, your task is to take the website that you created in the first session and turn it into this.

Although this doesn't get us closer to our final goal, it will teach us alot about CSS. These CSS skills will become very useful later on!

Hint: Remember, changind the font color is done with color: red; Give the border a solid style, a red color and a width of 5 pixels

Id's and Classes

So far you have used html tags to specify CSS rules. For example,

h2 { 
  font-size: 40px;
  color: pink;
}

will turn all your <h2> massive and pink.

It is often useful to be able to make CSS rules more specific, so you can apply different styles to different parts of the page. One common way to do this is to target specific html attributes - in particular id and class.

The `id` and `class` attributes

HTML tags can have attributes which provide additional information about the element. You've aready seen some examples of this:

<a href="http://www.facebook.com">
<img src="cat_pic.png">

Both href and src are examples of html attributes. They are written in pairs with their values: attribute="value".

There are some attributes that can be added to any tag. Two examples of these are id and class:

<h2 id="products_title">Our scrumptious puddings</h2>

<ul id="products_list">
  <li class="product_item">Black forrest gateau</li>
  <li class="product_item">Rasberry lemon swirl cheesecake</li>
  <li class="product_item">Sticky toffee pudding</li>
  <li class="product_item">Death-by-chocolate cake</li>
</uk>

Both id and class are used to add some information to the HTML tags. The key difference is that id should specify a unique element on the page, whereas multiple elements can share the same class.

CSS lets you target the id and class attributes in special ways:

/* make the h2 with id="products_title" purple */
h2#products_title { color: purple; }

/* remove the bullets from all li with class="product_item" */
li.product_item { list-style-type: none; }

The id is targeted by adding #id_value to the tag and the class is targeted by adding .class_value to the tag.

It is also possible to target any items with a given class or id by leaving out the HTML tag:

/* make any element with id="products_title" purple */
#products_title { color: purple; }

/* make any element with class="product_item blue" */
.product_item { color: blue; }

Divs and spans

There are two important HTML tags, that we didn't use earlier: <div> and <span>. Both are really useful when it comes to using HTML attributes to target CSS classes.

<div> stands for division and is used to break the page up into different parts. It is a 'block-level' element, which means that it will start a new line before and after it.

<span> can be used to apply classes and ids to certain bits of text. It is an 'inline' element, which won't start a new paragraph before or after.

<div id='info_section'>
  <p>This is a paragraph in the info section. We can use a span to target <span class='important'>certain bits of important text</span>.<p>
</div>

More advanced CSS

In the following exercise you will take what you created above and turn in into this.

Again, this exercise is more a exercise in CSS than a step towards our final goal!

<li class="last">...</li> Set the background color of everything that has the class 'last' to rgba(206, 36, 67, 1) Hint: list-style-type: none <button id="shop_button"></button> border: 0 padding: 10px rgba(206, 36, 67, 1) Above each <img> tag open a new <div> tag </a></div> <div class="product">...</div> Hint: .product { width: 400px; height: 200px; }

Got stuck? Check the solution and use the developer tools to help you out!