< !-- Digital window verification 001 -->

What Is CSS? How to Learn CSS for Beginners

Updated on | Sign up for learn to code tips


CSS is one of the cornerstones of the web. If HTML is the bones of a website, CSS is what makes the site look better than a skeleton. Without CSS, web pages would be dull and boring.

For beginners, CSS is a great programming language 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 of CSS make sense to even the not-so-tech-savvy. Plus, we see CSS every day on the websites we know and love, which makes it easier to understand the need for CSS and how and why CSS is used.

In this post, we’ll cover what exactly CSS is, what CSS does, why CSS is important, and why you should learn CSS (plus some resources to get started learning it). This post is for you if you’re new to coding and web development, or if you’ve already learned HTML and are ready for the next step.

Table of Contents 

Disclosure: I’m a proud affiliate for some of the resources mentioned in this article. If you buy a product through my links on this page, I may get a small commission for referring you. Thanks!

What Is CSS?

First off, what does CSS stand for? CSS stands for Cascading Style Sheets. CSS is a style sheet language that adds styling and formatting to documents written in a markup language like HTML. Almost all webpages and user interfaces written with HTML use CSS.

Currently in its third version (often referred to as CSS3), CSS adds presentation (e.g., layouts, colors, fonts) to a web page whereas HTML creates the page structure. Why is CSS important? Without it, websites would be bland, hard to navigate, and not welcoming to users.

CSS code

Like HTML, CSS is not your typical “programming language” (e.g., JavaScript, Java, Python). It doesn’t require knowledge of loops, variables, and other computer science concepts.

🎨 Instead, as the name suggests, CSS is a “style sheet” language that adds style to the contents of a web page. It turns plain HTML (which usually looks like a plain Microsoft Word Doc on its own) into beautiful and uniquely customized websites. For this reason, the importance of CSS in web designing is difficult to overstate! 

When it comes to learning web-development-related skills and technologies, HTML and CSS are often the starting point, and are often taught together in the same course since they’re so closely related.

Start coding now

Stop waiting and start learning! Get my 10 tips on teaching yourself how to code.

Don't worry. I'll never, ever spam you! Powered by ConvertKit

What Is CSS Used For?

CSS allows web designers, developers, bloggers, etc. to make 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 CSS, the latest version of CSS3 has really expanded and allows for more creativity.

Why do we use CSS? Ultimately, it makes our lives easier. CSS allows us to separate the presentation from the structure (HTML) into different files. This is done through an external stylesheet using a .css file extension. (This external stylesheet is the most preferred since it’s much more efficient when it comes to making changes.)

Separating out the CSS and HTML files comes with benefits like being able to share styling across multiple web pages, reducing complexity/repetition in HTML files, improved page load speeds, making universal style changes across a whole website quickly and easily, etc.

There are also other methods to include CSS styles, such as internally (where the style is defined at top of an HTML page) and inline (adding the style right to the specific HTML tag).

CSS on laptop

CSS also makes websites more accessible. 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, enabling the same markup page to be rendered in different methods like on-screen, in print, by voice, and on tactile Braille devices.

➡️ Having an accessible website is important for many reasons. Read more about web accessibility here, or listen to my podcast interview with Judith Lung: Why Accessibility Matters (According to a Totally Blind Programmer) (S6E3).

How Does CSS Work?

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

Codecademy explains it elegantly:👇

The “cascading” in CSS refers to the fact that styling rules “cascade” down from several sources. This means that CSS has an inherent hierarchy and styles of a higher precedence will overwrite rules of a lower precedence.

What this means is 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 over 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, check out this article on how to insert CSS.

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

And cascading is a good thing. Going back to our example, let’s say you’ve set a color for all your paragraphs on the website. Cascading makes it easy for you to go in later and change the paragraph color for one page or section.

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 its syntax (i.e., the rules of the language).

What Does CSS Look Like?

CSS is made up of selectors, properties, and values.

CSS on computer

Let’s go over these by using an example. If you had an HTML paragraph that looked like this: <p>Hello world!</p>, you could style that paragraph with CSS.

It might look like this: 

p {

  font-family: verdana;

  font-size: 20px;

  color:blue

}

As you might guess, this would change the font family to Verdana, the font size to 20px, and the font color blue.

In this case, the “p” in the CSS is called a “selector” because it’s selecting which HTML element to add the styling to. 

All of the info between the curly brackets is called a “declaration” because you are “declaring” what the style will be. Declarations include “properties” and “values” that change the way a selector looks.

Similarly, if you had an HTML heading <h1>CSS Example</h1>, styling it with CSS would look like:

h1 {

  color: white;

  text-align: center;

}

This would change the font color to white and align it in the center of the page.

Note: You can also keep your CSS on one line, like so: p {font-family: verdana; font-size: 20px; color: blue}

Below is an example showing how CSS appears 👇

CSS syntax

CSS properties include:

  • background-color
  • font-weight
  • margin
  • padding
  • width
  • border-style
  • opacity
  • And much more! 

Here’s a full list of CSS properties.

Want to get better with HTML?

Download my free HTML5 cheat sheet below.

Don't worry. I'll never, ever spam you! Powered by ConvertKit

CSS3 Features

In addition to the makeup of the CSS language itself, many designers and developers have the need for CSS features that make working with it even simpler.

CSS Frameworks

CSS frameworks are libraries that make styling websites with CSS 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 Animations

With CSS3 has come animation. 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 CSS animation effects (and how to use them) to look at once you master the CSS basics.

Media Queries

Using CSS is also 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 allow you to format the presentation to different screen sizes, like tablet, mobile, and desktop, without having to change the content itself. Convenient! Learn more about media queries here.

How to Learn CSS

So, why CSS for your coding journey? And if you want to learn CSS, how should you go about it? In this section, we’ll quickly cover some of the important Q&As about how to learn CSS.

🤔 Who should learn CSS?

CSS is perfect for anyone wanting to build their own site (e.g., blog, portfolio, ecommerce). It’s also an ideal starting place for someone looking to become a developer or designer. Really, for anyone who is looking to learn website basics, CSS is a great place to begin.

Heck, if you’re a graphic designer or UX designer (or aspiring to be one), having CSS skills under your belt is a huge advantage when it comes to the job market.

🧠 Is it difficult to learn CSS?

CSS is unique in that it’s easy to learn and get started with, but it can become more complicated as you dive deeper. Learning CSS basics is easy, but mastering it may require a bit more dedication and practice.

⏰ How long does it take to learn CSS?

Since CSS is pretty easy to learn, it should only take a few weeks to get a basic understanding of the syntax and how it works.

Depending on how many hours you spend studying, it should take a few months for you to become comfortable with the language, and by the year mark, you should be completely fluent.

In the edX course CSS Basics, you can learn the basics of CSS in 5 weeks (spending just 5-7 hours per week).

The LinkedIn Learning path Learn CSS has 27 hours of content. If you spend 5-7 hours on it each week, it would take you 3-5 weeks.

❓ When to learn CSS

If you’re a new coder, you might be wondering where CSS should fall in your learning plan. I recommend either learning HTML first and then CSS, or learning HTML and CSS together in the same course. They’re often taught together, so it’s up to you if you want to tackle them separately or at the same time.

💻 Where to learn CSS

Here are five of my favorite places to learn CSS:

  1. Learn CSS on Codecademy: In this CSS course, you’ll learn all the basics of CSS: how to set up the correct file structure, edit text and colors, and create attractive layouts.
  2. Introduction to CSS3 on Coursera: Taught by the University of Michigan, this CSS course is designed to teach you CSS rules, how to test code, and how to establish good programming habits.
  3. Team Treehouse: Has over 36 CSS-related videos and workshops. And they add new courses all the time. 
  4. CSS-Tricks: Current and relevant CSS tricks. Also has an extensive CSS almanac, which is great as a reference. One of my favorites.
  5. Mozilla Developer Network: A great free and updated reference guide for CSS.

Also check out these free places to learn CSS (and other languages) for free!

After CSS: Next Steps

Once you’re comfortable with both HTML and CSS, a good next step is to learn JavaScript. This will help you build more interactive, engaging websites. 

For example, you can add simple games, different scroll effects, change the color of something on your website when the mouse hovers over it, display a timer or count-down, create drop-down navigation menus, and much, much more.

What language to learn after CSS can also depend on your goals in tech. If JavaScript doesn’t fit into your career goals, it might be best to choose something else! Listen to the LTCWM Podcast episode with David Clinton for more insight on how to choose which skill to learn next!