Welcome!

Ok, so you want to learn how to write CSS to style awesome web pages. Or, it's part of a subject you're doing and so you're learning because you have to. Either way, that's great. Writing CSS to style web pages is a fun and rewarding activity. CSS is one of the foundations of the internet and will empower you to do many things.

Introduction

The following pages are intended to give you a solid foundation in how to write clean, elegant CSS (Cascading Style Sheets) to style web pages. You won't be a CSS guru at the end but you will be well on your way and armed with the right knowledge and skills to get you there if that's what you want (which you should).

The World Wide Web is an increasingly important aspect of our lives. Web technologies are also being incorporated into many other areas as well. CSS is a key part of this and is responsible for the visual aspects of web pages. CSS ties in with HTML and Javascript to create elegant and functional web pages.

In this tutorial we are learning how to write CSS with our own bare hands. This tutorial is not going to look at programs which generate CSS for you such as DreamWeaver or ExpressionWeb.

Outline

This CSS tutorial is divided into 6 sections. In general I recommend you work through them in order but if you've come here just to learn about a specific topic then who am I to slow you down, just head straight on over.

You can now jump into section 1 and get started or keep reading below to learn a little more about this tutorial.

  1. Background Information - Introductory information about CSS, HTML and browsers.
  2. The Basics - What is CSS, what does it look like and what does it do?
  3. Including CSS - Different ways to include CSS rules in your web pages.
  4. Basic CSS Properties - An overview of basic CSS properties to get you started.
  5. Selectors - An introduction to the different CSS selectors available to use.
  6. Colour - A look at the different ways you may include colour in your CSS.
  7. Final Thoughts - Where to from here.

As CSS builds upon HTML we'll assume you already know how to write HTML. If not then you should probably start by checking out our HTML Tutorial.

Once you've worked through this tutorial and gotten the hang of CSS you may want to have a go at our Website Development Challenges to see what you can do with CSS and a bit of creativity.

Structure

The best way to learn CSS is as a series of small, easy to manage steps. This tutorial is organised as such, with each section building upon the knowledge and skills learned in the previous sections. If you work through them in order, read them fully (there is a fair bit of material but it is important for getting a proper understanding) and practice as you go I believe you should have a fairly pleasant and smooth journey to CSS mastery.

Each section is structured in the following format:

  • An introduction outlining what you will learn in that section.
  • Detailed material including extensive examples.
  • A summary of the most important concepts.
  • A set of activities to help you solidify your knowledge and skills.

Think of the activities not as tutorial questions (such as you may get in a class at school) but as direction on where to explore to benefit from your new knowledge and skills. Treat the activities as a starting point for exploration. The further you take it, the better you will do. (How well you do and how far you go depends on how unlazy you are.)

This site is also designed to work well on tablets. I know a lot of you like to be at your computer doing work and have your tablet next to them with reference material on it. If that is you then this site works quite well with that set up. Another good approach is to have your browser on one half of the screen of your computer and a text editor on the other half so you can try out the examples as you go.

Problem Solving and Creative Thinking

If you wish to succeed with css then there are two things which will help, Problem solving and Creative thinking. Here are some basic pointers to help you along the way.

  • Explore and experiment. Remember, you're learning how to assemble a set of building blocks and with them you can create all manner of creative and interesting layouts and effects. The examples you will find are intended to be an illustration of how they work, not the only thing you can do with them. I encourage you to tweak the examples and see how they behave. This will give you a much better understanding on how they work. You will have a lot of questions along the way along the lines of "What if....?" and "Can I ...?" to which I say, "Give it a go and see what happens." The worst you can really get is an obscure page. In which case you think about it a bit to understand why it didn't work, then have another go. Don't hold back!
  • Read carefully and don't skip over the fine details. I can't stress this enough. The fine details are important and are often the difference between your code working and not working. If something isn't working then re-read the material carefully and re look over what you have typed in to make sure you haven't make a silly little typo.

To learn more about problem solving visit our Problem Solving Skills tutorial.

About the Author

RyanHi. My name is Ryan Chadwick and I have been teaching HTML and CSS to students for over 10 years now. It's something that I very much enjoy. In a world where we are increasingly hiding the complexities away from users (smart phones and tablets in particular), it is always satisfying to give that power back to people and allow them to do amazing things with technology.

But teaching is only one of the things I do. I also develop and manage websites, and manage computer systems for a few different organisations. I feel that all my work is complementary and benefits from what I learn in the others. Combined, they give me a fairly good understanding of how technology works, and also an understanding of how people use technology, perceive technology, learn technology and work around technology.

This website is both for you, and for me. For you, it is a digital form of the knowledge I have gained from teaching over the years. For me, it is an opportunity to clarify and polish what I teach and how I deliver it. To these ends, if you have any feedback at all, be it to tell me you found a particular section confusing, or to let me know it was helpful, I would be more than happy to hear from you.

Drop us a message at

Using this material

Anyone may link to the content on this website.

If you are a teacher, academic, manager or trainer and wish to use this material in your classes or training you are more than welcome to link to these pages and refer your students here or show them in your classes, but please do not just copy my material.

I've put a fair amount of time and effort into creating this resource so please be cool and do the right thing.