CSS, which stands for Cascading Style Sheets, allows you to add styles to your website or blog. CSS works side by side with HTML, so that you can specify how your HTML elements should be displayed in the browser.
CSS is a relatively easy language to learn, compared to various scripting languages. Even if you’ve never coded CSS before, once you see how it works, it shouldn’t take long to get the hang of it.
Why Should I Use CSS?
One of the great things about CSS is that it enables you to specify how your website/blog is presented to the end user, regardless of which user agent (eg, browser) they are using. For example, you can specify how your website should look on a typical computer. You can also specify how it should look on say, a mobile device. You can even specify how it should sound to a blind person who accesses your website using a screen reader.
Another great thing about CSS is the ability to change the look of a whole website in an instant. If you’ve ever used “Themes” on a blog or a website builder, you’ll know what I mean. That’s how “Themes” work. They simply point your website or blog to a different CSS file.
So learning CSS is definitely a must if you intend to write your own code. Also, because CSS is so closely aligned with HTML, you should learn it at the same time, or just after, you learn HTML.
Adding CSS to your Website
Once you learn the syntax of CSS, you will see that there are four different ways of adding CSS to your web pages. These are; External, Embedded, Inline, and Import. Although you will probably only use one or two of these methods on a single website, there’s nothing to stop you using all four methods at the same time if you wish.
Note that if you use a publishing system such as a website builder, CMS, or blog software, you won’t need to worry about this. Your CSS will be taken care of by your publishing system.
External Style Sheets
One of the more powerful aspects of CSS is the external style sheet. External style sheets allow you to specify all your styles in one place. That way, if you need to update the styles across your whole website, you only need to update them in one place. For example, if you have a 50 page website, and you would like to change the color of the headings on all 50 pages, you only need to update one CSS file. That is because, each page on your website will look at your CSS file to find out how it should be presented.
Embedded Style Sheets
Embedded style sheets allow you to specify styles at the head of individual HTML pages. Therefore, each page could have its own styles that the other pages don’t know about.
Inline Style Sheets
Inline style sheets allow you to add CSS within your HTML code. In a way, this is similar to embedded style sheets, however, with inline style sheets, you don’t specify the CSS at the head of the page – you specify it within each HTML element that you want to style.
Imported Style Sheets
Imported style sheets are similar to external style sheets, in that all the styles are specified in an external file. The difference is that, the import method allows you to import one style sheet into another.
How Do I Learn CSS?
There are many resources for learning CSS including online tutorials, downloadable e-books, and hardcopy books.
I recommend starting with this this CSS tutorial that I wrote at Quackit. Also, for links to CSS codes and examples, check out the main CSS page.