Quick Guide to CSS

If you want to learn CSS, then don’t be afraid. It’s an easy language to learn. Learning CSS is essential if you own a website as you can do minor design and appearance changes to make your website unique, especially if you are using premade themes and templates. If you are a web developer or a server side developer, you can also benefit in learning CSS as it can be integrated to your development projects. There’s really nothing that can prevent you from learning CSS if you fall to at least one of the criteria above. If you have a computer, a notepad and a browser, you can start learning CSS at no cost at all.

CSS Tools

Before starting to learn CSS, you need to have the necessary tools. Don’t worry; you don’t need to purchase a software license or buy something online. One recommended tool for Windows users is Notepad++, a free programmer’s text editor and for Mac users, OS X’s TextEdit that comes bundled with the operating system. Both are free to use and download and they have advanced features that you’ll need to make your CSS learning experience better. If you already got those text editors or if you have a preferred programmer’s text editor, you can go ahead.

Oh, you also need to have the latest versions of popular web browsers so you can test your CSS code into different scenario to see if your design is consistent. The reason behind this is that each browser has its own way of displaying things. For example, a text may appear perfectly centered in Chrome but it’s slightly off in Safari. If that’s the case, you can adjust your CSS codes to match the look and feel as closely as possible for each different web browsers. That will make your user experience consistent among different browsers, systems, countries and devices.

CSS Terminologies

Now that you have the required tools to begin, we can start learning some of the basic CSS terminologies that will be your foundation towards learning more advanced CSS. We are going to learn the CSS Syntax.

A CSS rule consists of a selector and a declaration block. It looks like this:

h1 {color: red; font-size:15px;}

This selector makes all top level heading in your web page colored red and sized 15 pixels. The selector is the “h1”; basically, this is an element, id or class. The property, which is “color” and “font-size”, defines which particular property of the selector you want to change, and on our example, we want to change h1’s color and font size. The value, which on our example are “red” and “15px” are the property’s value that we want to assign. On our example, we want all h1 elements change their color to red and font size to 15 pixels.