Sandra L

Web design has come a long way. In the late 90s and early 2000s, developers created layouts for web pages using tables. That meant everything was square, and if you wanted any sort of round corners, gradients, or other design features, you would have to use a background image to get the effect.

Now web developers can not only create more dynamic designs for web pages but also separate the design from the HTML markup for a much cleaner development process. You can use a few technologies for this. CSS is the default style language that every web browser can understand. SCSS is a superset of the CSS language. Let’s look at both and determine which one is the best for your next web development project.

HTML & CSS – Quickstart | Ebook included

Last Updated March 2016

  • 53 lectures
  • Beginner Level
4.6 (5)

HTML & CSS Quickstart-simple guide to get started with coding & build a solid foundation for advanced web development | By Sandra L

Explore Course

What is CSS?

CSS made its first appearance in 1994 at the WWW conference, but it wasn’t used widely or consistently in browsers until the mid-2000s. It stands for Cascading Style Sheets, which you can define as a scripting language that describes how HTML elements should show up in a web browser or when printing a web page.

assorted-color abstract painting

CSS styles are stored in separate files using the .css file extension. Because of this separation from the markup, you can reuse them across multiple pages on a website or application. Web developers can update a style site-wide from just one file. CSS solved a big problem with designing web pages, allowing for more flexible web designs. Let’s look at how CSS works.

CSS example

Let’s look at an example. Here is an example web page:

Here is the HTML for the web page:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div id="myid">
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </div>

        <div class="myclass">
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </div>

    </body>
</html>

The CSS file is included in the head using a link tag. Here is the style sheet for the page:

body {
    background-color: yellow;
}
.myclass {
    background-color: white;
}
#myid {
    background-color: black;
}
.myclass h1 {
    color: gray;
    text-align: center;
}
.myclass p {
    color: black;
}
#myid h1 {
    color: yellow;
    text-align: center;
}
#myid p {
    color: white;
}

You can find a JSfiddle of this page here.

CSS selectors

CSS uses what we call selectors to find HTML elements on a web page. This is what the names before the brackets in the style sheet above are doing. The key and value pairs between the brackets are the styles that will apply to the element the selector is targeting. The style sheet uses four of the most common types of selectors. These are:

You can choose from quite a few other types of selectors, including children selectors that work like descendant selectors but select only the direct children, adjacent sibling selectors, direct sibling selectors, and more. You can also select elements based on attributes other than the class or id.

CSS properties

The styles for each element that you select will set in the declaration block between the braces. Each of these consists of a key and value separated by a colon and terminated by a semicolon. In our style sheet, we only set the color, background color, and text alignment of the elements on the page. But there are over 500 valid CSS attributes you can set. Some are specific and can only apply to certain types of elements.

Web developers often use other common properties that are self-explanatory:

You can learn more about CSS in my course.

What is SCSS?

SCSS stands for Sassy Cascading Style Sheets or Sassy CSS. It is a superset of the CSS language that adds additional functionality to CSS and gives web developers more flexibility and power when creating web designs. It uses the same syntax as CSS requiring brackets and semicolons to designate blocks and line endings. Another language with features similar to SCSS, called SASS, uses white space to designate blocks and line endings, similar to the Python programming language. Most browsers aren’t able to understand SCSS or SASS and must be compiled into CSS before you can use them in a browser. The extension used for an SCSS style sheet is .scss.

SCSS example

In order to see some of the basic differences between SCSS vs CSS, let’s convert the CSS for the example site to SCSS. You can do this online here.

$theme_gray: gray;
$theme_black: black;
$theme_yellow: yellow;
$theme_white: white;

body {
    background-color: $theme_yellow;
}
.myclass {
    background-color: $theme_white;
    h1 {
        color: $theme_gray;
        text-align: center;
    }
    p {
        color: $theme_black;
    }
}
#myid {
    background-color: $theme_black;
    h1 {
        color: $theme_yellow;
        text-align: center;
    }
    p {
        color: $theme_white;
    }
}

This SCSS file will be compiled back into the original CSS file before we can use it in the browser, but when you write in SCSS, you use this syntax, which has many advantages for development. Let’s look at the benefits seen in our SCSS file and a few more of the features that SCSS adds to the original CSS language.

SCSS has variables

The first thing you may notice is the four lines at the top of the SCSS file:

$theme_gray: gray;
$theme_black: black;
$theme_yellow: yellow;
$theme_white: white;

These are variables, just like in a programming language. You define them by using a leading dollar sign. There is an enormous benefit in using the SCSS language. Commonly, when using variables in SCSS, you would put them in a separate file in your SCSS projects. Including them first when compiling makes the variables available for use throughout the project.

Many times, a web design project starts with a style guide that defines all the colors used in a website. By creating a variables.scss file with the colors from the style guide when you get started, you will never have to look up the colors again. Also, when one of the colors change, you can update it in one spot, instead of dozens of places in the style sheets.

Although we only have shown using variables for colors, you can use them for anything. One example is fonts. Can you imagine having to get this right every time you have to use it:

$ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

SCSS uses nested syntax

Instead of using the descendant selector that gives us power to segregate styles in CSS, we use nesting in SCSS.

So this:

.myclass {
    background-color: $theme_white;
    h1 {
        color: $theme_gray;
        text-align: center;
    }
    p {
        color: $theme_black;
    }
}

Replaces this:

.myclass {
    background-color: white;
}
.myclass h1 {
    color: gray;
    text-align: center;
}
.myclass p {
    color: black;
}

Nesting has many benefits:

Nesting is great, but don’t go overboard. SCSS still compiles down to CSS, and deeper nesting results in more lines. Another advantage to using SCSS is that you can plan your styles out ahead of time because the nested structure makes it easy. With a good style plan in place, nesting that is too deep shouldn’t be a problem.

SCSS has mixins

You can think of a mixin like a function. A mixin can accept parameters and return CSS. When writing CSS, you might find yourself writing similar sets of style properties over and over. Here is an example of a mixin that will generate a set of properties to style text:

@mixin set-text-style($family:'Tahoma', $weight: 500, $style: normal, $color: black) {
    font-family: $family , 'Arial', 'Helvetica', sans-serif;
    font-style: $style;
    font-weight: $weight;
    color: $color;
}

The mixin starts with the keyword @mixin. Then you give the mixin a name, like set-text-style. The parameters for the mixin are inside the parentheses. Our parameters are $family, $weight, $style, and $color. It will return the set of properties between the brackets with the variables replaced by the parameter we sent it to. The values behind the colon in the parameters list are the default values for the parameters. If you call the mixin without the parameter, the parameter will use the default value.

To use the mixin, just call it in place of a property in a SCSS file, by using @include, then the mixin with parameters.

h2 {
    @include set-text-style('Roboto', 600, 'italic', blue);
}

When this compiles, it will generate this CSS:

h2 {
    font-family: 'Roboto' , 'Arial', 'Helvetica', sans-serif;
    font-style: 'italic';
    font-weight: 600;
    color: blue;
}

If we don’t use any parameter, like this:

h2 {
    @include set-text-style();
}

It will return this as the default:

h2 {
    font-family: 'Tahoma' , 'Arial', 'Helvetica', sans-serif;
    font-style: 'normal';
    font-weight: 500;
    color: black;
}

We can also choose to only use some parameters by using keyword arguments. Here is how we would call the mixin to use all the default properties except the color, which it will set to red.

h2 {
    @include set-text-style($color red);
}

You can organize SCSS projects more easily

SCSS adds structure to your styles. With CSS, you can break up your style sheets into multiple files, organized by usage, but then you have to load all the files separately in the browser, each using a separate request. No matter how many files you break an SCSS style project into, you can compile them into one CSS file, so you have the freedom to organize the project however you want.

The @import keyword in SCSS allows you to import an SCSS file into another SCSS file. You can put your mixins in one file, place your variables in another, and then create as many other SCSS files as you need to break your styles into logical pieces and then import them all into the file that it will compile.

SCSS vs. CSS

We only covered part of the features that SCSS has, but it is pretty evident that using SCSS has a lot of advantages over using CSS.

Here is a breakdown of the differences between CSS and SCSS.

FeatureCSSSCSS
ExpressivenessModerateAdvanced
Variable SupportLimitedAdvanced
Nesting SupportNoYes
Mixin SupportNoYes
Easy to OrganizeNoYes

SCSS has many more features which we didn’t cover, including inheritance, functions (different from mixins), data types, control structures like if(), and more.

One thing that SCSS requires is compiling. So that will have to be added to your workflow. Many build tools can watch for changes in your SCSS files, re-compile whenever they detect an update and reload the browser. It may take time to learn how to use SASS and include compiling it in your workflow, but it is worth the effort. To learn more about the benefits of SCSS over CSS, check out this codepen and my YouTube video below.

Page Last Updated: March 2021

Top courses in CSS

50 Projects In 50 Days - HTML, CSS & JavaScript
Brad Traversy, Florin Pop
4.7 (3,611)
CSS - The Complete Guide 2021 (incl. Flexbox, Grid & Sass)
Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
4.7 (10,677)
Bestseller
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Jonas Schmedtmann
4.8 (29,901)
Bestseller
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)
Code And Create, George Lomidze, Lasha Nozadze
4.7 (545)
HTML5 + CSS3 + Bootstrap: The Beginner Web Design Course
Phil Ebiner, Nick Walter, Video School
4.6 (1,265)
SASS - The Complete SASS Course (CSS Preprocessor)
Code And Create, George Lomidze, Lasha Nozadze
4.5 (375)
Bestseller

More CSS Courses

CSS students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo