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
- The HTML <style> tag and class attribute
- Margin – Adding space outside an element
- Padding – Adding space inside an element
- Colors – Text and background colors
- Fonts – Changing how text looks
- :hover – Restyle on mouse over
- Project 1 – Complete HTML and CSS code
- External stylesheets – Giving CSS its own file
- The HTML <div> and <span> tags
- CSS Selectors
- Project 2 – Styling our website header
- Display – inline, block, inline-block
- Project 2a: Horizontal menu links
- Sizing – width, height, line-height
- Project 2b: Centering the menu links
- Text-decoration – Underline, overline, ...
- Project 2c: Removing underline on links
- Float & clear – Move to left or right
- Project 2d: Move 2nd menu to the right
- Project 2 – Complete HTML and CSS code
- CSS Practice Problems
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
<input type="button" value="Button 1"> <input type="button" value="Button 2">
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.