< !-- Digital window verification 001 -->

CSS Basics: Learn More About Cascading Style Sheets

| Get awesome (and free) stuff here


CSS is one of the cornerstones of the web. Without CSS, webpages would be dull and boring.

Look:

CSS is a great language for beginners to learn because it is easy to grasp and there are a ton of resources and tutorials available showing how to use it.

In fact, one of the first things I learned related to web-design and development was CSS.

The syntax and concepts making up CSS makes sense to even the not-so-tech-savvy. Plus, we see CSS everyday on the websites we know and love. (Making it easier to understand how and why it is used.)

What is CSS?

CSS stands for Cascading Style Sheets and almost all webpages and user interfaces written with HTML use it. CSS is a style sheet language that adds styling and formatting to documents written in a markup language.

Currently in its third version (often referred to as CSS3), CSS adds presentation to a web page whereas HTML creates the page structure.

side note

Understand that HTML and CSS work in conjunction. However, a webpage can be created with HTML alone. (But it would not be very pretty.)

There are different ways to incorporate CSS into your HTML page, but the most common would be through an external stylesheet using a .css file extension. (This external stylesheet is the most preferred, for it is much more efficient when it comes to making changes.)

However, there are other methods to include CSS styles, such as internally (style defined at top of HTML page) and inline (so adding the style right to the specific HTML tag.)

Why is CSS important?

CSS is important because it allows web designers, developer, bloggers, and so forth to make our websites unique and attractive. CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add effects to images, etc.

While in the past it was possible to add style via HTML or more simpler CSS, CSS3 has really expanded and allows for more creativity.

Ultimately, it makes our lives easier. CSS allows us to separate the presentation from the structure (HTML) into different files.

Who should use it?

CSS is perfect for anyone wanting to build their own site. Or someone looking to become a developer or designer. Really, for anyone who is looking to learn website basics, CSS is a great place to start.

Heck, if you're a graphic designer, having CSS skills under your belt is a huge advantage when it comes to the job marker.

Nowadays there are more advanced CSS extension languages that offer even more workflow efficiency – i.e. Sass. But before jumping into those, it is important to understand how CSS works and syntax.

Some CSS3 Features

There are many CSS features. Here are just a few to be aware of.

Cascading

As I mentioned earlier, CSS stands for Cascading Style Sheets. You may be wondering what this cascading business is.

From Wikipedia:

“The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.”

Huh?

Basically, there is a cascading order to the CSS styles you set. Let's say in the beginning of your external style sheet you make all paragraphs have a blue font. But then, inside your HTML document, you make a single paragraph a red color.

Because of the cascading order, the red style declaration will win out the blue. And that paragraph will be red.

The Cascading Order

Generally speaking all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

(For more info on cascading, look to this article.)

This may sound confusing to beginners. Don't worry. It's kind of like the order of operations in math, or something.

And cascading is a good thing. Because, say you set a color for all your paragraphs on the website, you can later change the paragraph color for one page or section.

CSS Makes Accessibility Easier

In the past, setting up HTML files so that they were accessible to screen-readers and other kinds of methods was a pain. CSS3 has made this easier.

Again, taken from Wiki:

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices.

Having a website that is accessible is important for many reasons. Read about why here.

Great for Mobile thanks to Media Queries

Like HTML5, CSS3 has also been constructed to be more mobile-friendly.

To allow your website to be visually appealing on multiple screens, CSS3 has this nifty feature called media queries.

Media queries allows you to format the presentation to different screen sizes, like tablet, mobile, and desktop, without having to change the content itself. Yay!

Learn more about media queries here.

CSS Frameworks

These CSS frameworks follow the notion of making life easier. They are great for rapid prototyping, but also allow customization.

Two of the most popular CSS frameworks are Bootstrap and Foundation.

I've never worked with Foundation, but I hear it's somewhat similar to Bootstrap. And I absolutely love Bootstrap. 

Seriously, I use Bootstrap on everything I build from WordPress sites to static sites and now, most recently, web apps.

CSS Animation

With CSS3 has come animation. That's right.

In the past, to animate something small on your site, you would have had to rely on JavaScript. Now with CSS3, adding a little animation effect is simple.

Here are some popular animation effects (and how to use them) to look at once you master the CSS basics.

Recommended CSS Tutorials and Guides for Beginners

  • CSS-Tricks Current and relevant CSS tricks (duh!). Also has extensive almanac, which is great as a reference. One of my favorites.
  • Mozilla Developer NetworkA great free and updated reference guides for CSS.
  • Lynda.com: Always a favorite of mine. Lynda.com has professionals teaching other professionals. They have a range of CSS courses, however some can be outdated. Make sure to check the year the course was released and double-check the course teaches CSS3! (There's really a ton of CSS based courses, so start here with CSS Fundamentals.)
  • CodeBabes: This free learning platform has an interesting entertaining intro to CSS video series. It's actually fairly educational.
  • Code SchoolCode School has a few online classes that teach CSS at beginner, intermediate and more advanced levels. They also have some Sass courses.
  • Team TreehouseTeam Treehouse is a robust online learning platform with heavy emphasis on video learning. Team Treehouse has over 15 CSS-related videos and workshops. And they add new courses all the time. Click here to get your first two weeks on Treehouse free.

Image courtesy of Flickr, by anieto2k