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

So what's hard about CSS?

You've seen quite a bit of CSS now; it all seems quite straightforward - you write some css, tweak it 'til it looks good and you're done! In theory this is exactly how CSS works and is why CSS is brilliant.

Unfortunately, the realities are not quite so straightforward. Different browsers will render CSS with subtle differences. Take a look at the cat picture above. The styling is relatively simple - all we've done is add a border and a shadow. The following CSS will probably do this in your browser:

.img-polaroid {
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);     /* transparent black border */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

However, to get this effect in all browsers you need the following:

.img-polaroid {
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ccc;                           /* grey border for browsers that can't do transparency */
  border: 1px solid rgba(0, 0, 0, 0.2);             /* put the transparency after for browsers that do */
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* some browers only understand webkit box shadow */
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* others need this */
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Just because your site looks good in Chrome, doesn’t mean it will look good in Internet Explorer. Making your site look good (or even presentable) in multiple browsers takes time, effort and experience.

What else is hard about CSS?

About 5 years ago, ‘all’ you would have had to worry about is the cross-browser display issues. Since then, the mobile web has exploded and you have another (far more important) concern: how will your site look when viewed on a mobile?

Making webpages that look good when viewed at multiple different sizes is a whole new level of complexity.

Should I just give up then?

You might be the sort of person who relishes this sort of challenge - if so, great! If not, help is at hand

Twitter Bootstrap

Twitter Bootstrap is set of CSS (& Javascript) files, released by the makers of Twitter.

Twitter Bootstrap is a set of ready-made CSS files that provide solutions to common presentation requirements in a cross-browser and responsive way. To make use of Twitter Bootstrap, you need to do two things:

1. Link to the Twitter Bootstrap stylesheet in the head of your html page.
2. Attach the relevant Twitter Bootstrap class to you html element.

Now we'll create a mini project to demonstrate some of the features of Bootstrap.

We'll now look at some of Bootstraps elements that come straight out of the box!

The bootstrap website comes with example code that we can copy into our own site. We'll do this now!

Forms

Forms in HTML are notoriously difficult to style well, fortunately for us bootstrap takes care of this.

Form elements in HTML are all enclosed within a parent <form> tag.

Input tags live within forms and they allow us the user to input text into a website. They are commonly used for login forms and search bars.

<form>
    <label>Email</label>
    <input type="text">
    <label>Password</label>
    <input type="password">
    <input type="submit">
</form>

Much like <forms>, <table>s are also hard to make look nice using HTML.

Tables have one enclosing <table> tag and inside are made up of table rows <td> and table cells <td>

<table>
    <tr>
        <td>Name</td>
        <td>Email:</td>
    </tr>
    <tr>
        <td>My Name</td>
        <td>name@example.com</td>    
    </tr>
    <tr>
        <td>My Other name</td>
        <td>othername@example.com</td>    
    </tr>

Other Elements

There are loads of HTML elements that bootstrap can style for us, including custom elements that we may want to use on our sites. Think navigation bars!