CSS Tutorial (Beginner) – Learn CSS website styling fast by example

CSS

0 Comments

If you just read our HTML tutorial, you're probably tired of how the browser styles your web pages by default. Well, we're about to change that with a new programming language called CSS. With CSS, you can restyle practically everything and make your website a lot more pleasing on the eyes.

Our goal with this guide is to get you from absolute beginner to intermediate as fast as possible. We'll be learning by example by working through 2 real projects. We specifically picked these projects because they cover pretty much all of the important topics in CSS (that beginners should know).

This guide assumes you already know HTML. If you don't, please read our HTML tutorial before continuing.

Need a place to host your website? Get your first month of HostGator web hosting for only 1 cent (or save up to 60%). Visit the previous link for the latest deals (updated daily).

Project 1 – Let's style some buttons

Our first project will be styling some buttons with CSS. Making a button may sound simple, but it requires a lot of CSS knowledge to do it right. You'll be surprised how much CSS you'll know once you're done with this.

Here's what a button looks like by default

HTML Code

<input type="button" value="Button 1">
<input type="button" value="Button 2">

Result

And here's what it will look like when we're done

  • Try moving your mouse over each of the buttons to see how it changes.

Leave a Comment