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.
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.
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.
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.
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:
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.
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.
To learn more about problem solving visit our Problem Solving Skills tutorial.
Hi. 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
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.