In this, the sixth in the series on learning how to be a web developer, we will be looking at some basic page styling with CSS, including how to apply Eric Meyer’s reset. One the things I enjoyed most as I slowly built up my web development repertoire was gaining the tools to be able to put the web page I had in my head actually onto the screen. To have an idea, a colour scheme, or a theme floating around in your head is one thing, but seeing it for real on the page is very satisfying. Make no mistake, it takes time, but as I always found, with practice, repitition and hard work, it soon becomes second nature. There is a Chinese saying – the best time to plant a tree was ten years ago. The second best time is today. So, lets get started with some more basic CSS styling!

Making our page look more like a page.

Let’s start as always by opening out index.html file in our browser, and getting index.html and style.css handy in our text editor. If you didn’t follow the last tutorial, you can find it here. The first thing I do when laying out a page is make sure I can see what’s going on, ie. where my divs are. You will note I put a border around the wrapper before. We can get rid of that now as we know where the wrapper is and we are happy with that. So get rid of that and instead, put a border around the main and the header divs:

header{
border:1px solid black;
}

#main{
border:1px solid red;
}

Now refresh your page, and it should look like so:

My Awesome Page

You can of course use whatever colours you want, let your creativity run wild :)

Eric Meyer CSS 2.0 Reset

Depending on your browser and your attention to detail, some of you may have noticed that there is a small gap between the top of the header and the top of the page. This in turn has pushed the bottom ten pixels or so off the bottom of the page. So what’s going on here?

What’s happened is that the browser has applied what it calls a ‘User Agent Stylesheet’. In simple terms this means that the browser ( the user agent ) has applied its own stylesheet to the page. Essentially the browser is guessing what you want in the absence of any specific instructions regarding styles. And since each browser is different, each User Agent Stylesheet is different too. Already I’m sure you are thinking how are we ever going to make our designs look consistent from one browser to the next? Fortuantely, anything we put in our stylesheet will override anything in the User Agent stylesheet, so all we have to do is go through all the possible styles that a browser could set, and reset them to default baseline values. But there must be hundreds of styles I hear you cry! There are. But luckily this job has been done for us by a number of people. One of the most accepted reset standards has been put together by a chap called Eric Meyer, and this is the one we will be using here.

How do we use it?

Easy. Copy the reset css below and save it into a new file called ‘reset.css’ in your CSS folder:

Now put the following line in the very top of your style.css file. This will tell our main stylesheet where to find the reset code:

@import url("reset.css");

The import line will copy what’s in the reset.css file into your style.css file, as if you had typed it in yourself.

Now if you refresh the page, you will see a few things have changed. the annoying space at the top of the page has gone, and the footer fits in the page now ( except for the bottom border, but this is due to our sticky footer calculations not taking the border into account, so we don’t have to worry about that for now ). You will also see that there are no spaces around the text in the header any more. The reset has removed these too. This is why the reset is useful and why you should always it. It gives you a good cross-browser baseline to start styling from.

Classes in CSS

Right, we have a good starting structure now to put our own mark on the page. First thing we will do is size the header. Of course, from here on in, experiment with your own sizes, colours etc. That’s what helps you learn.

What have we done here? Remember how we declare an id with the ‘#’ in front of the name of the id? Here we are declaring a class called ‘title’ with the ‘.’ operator. In css, a dot will make a class. We apply the class to an element in a similar why to how we apply an id:

<div class="title">Everything in here has the title class applied</div>

So what’s a class? A very simplistic explanation is to say that we can use a class to apply the same styles to a number of different elements. For example the following class:

.angry-shout{
font-size: 40px;
color: red;
}

… would give all text that the class is applied to a big font size and red color. You can put as many of these classes where-ever you want an angry shout on the page. It is worth bearing in mind that this is one importatnt differentiation between classes and ids – An id can be applied only once on a page to only one element. A class can be applied to numerous elements. Of course, there is more to it than this, but it’s not worthing going into it in this post.

CSS Specificity

You can see that we are first of all specifying ‘header’, followed by ‘.title’. What this means is that we are making the .title class specific to the header element. This class will only work if applied to an element within the header element. This is a very important part of css – by using specificity you can do some quite powerful and nifty things that will save you a lot of time and help make your sites consistent. To see this in action, put the following div in the header tag in your html:

If you were to move the .title div out of the header, what do you think will happen? Give it a go.

Font-family

Before we wind up, just a quick note on ‘font-family’, a new css property introduced above. We use this to define our fonts to use in a specific style. The first value is the preferred font, and the following values are fallbacks. In our example if the computer viewing the page doesn’t have the Arial font installed, it will fall back to Helvetica, and again if no Helvetica, it will fall back to the system sans-serif default. If you don’t know anything about fonts and that sounds like a load of mumbo-jumbo, than have a look at this good typography into here from PSD Tuts

Outro

We’ve covered a bit more than I thought in this session. It always seems that I have an idea for what I will cover in the post, but don’t get anywhere near that as I realise there is a lot more to what I plan to do than what I plan to do :) I hope that I’m not going into too much detail or going to slowly, let me know what you think. Until next time, happy coding campers.