Content Marketing

What Are Cascading Style Sheets (CSS)?

Read below for a full explanation of how cascading stylesheets work. We display our apps at the top of the page so that it’s easy to find and use. If you’re reading this article via email or feed, click through to compress your CSS.

Compress CSS Uncompress CSS Copy Results

Unless you’re actually developing sites, you may not fully comprehend cascading style sheets (CSS). CSS is a stylesheet language used to describe the appearance and formatting of a document written in HTML or XML. CSS can be used to specify the styles for various elements such as font, color, spacing, and layout. CSS allows you to separate the presentation of your HTML document from its content, making it easier to maintain and update the visual style of your website.

CSS Language Structure

The selector is the HTML element you want to style, and the property and value define the styles you want to apply to that element:

selector {
  property: value;
}

For example, the following CSS will make all <h1> elements on a page have a red color and a font size of 32px:

CSS

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

Output

Heading

You can also specify CSS for a unique ID on an element:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Output

Intro

Or apply a class across multiple elements:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Output

I want to highlight a word in the span tag.

You can include CSS in your HTML document in three ways:

  1. Inline CSS, using the style attribute on an HTML element
  2. Internal CSS, using a <style> element in the <head> of your HTML document
  3. External CSS, using a separate .css file linked to your HTML document using the <link> element in the <head> of your HTML document

Responsive CSS

CSS is incredibly flexible and can be used to adjust the display of elements based on screen resolution, so you can have the same HTML but build it responsive to the device resolution:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS Compression

You can see in the example above that there’s a comment, a media query, and multiple styles that use spaces and line feeds to organize the view of the CSS. It’s a great practice to minify or compress your CSS on your site to reduce file sizes and, subsequently, the time it takes to request and render your styling. It’s not a small amount… you can see over 50% savings on some of the examples above.

Many server configurations offer tools that will automatically compress CSS on the fly and cache the minified file so that you don’t have to do it manually.

What is SCSS?

Sassy CSS (SCSS) is a CSS preprocessor that adds additional functionality and syntax to the CSS language. It extends the capabilities of CSS by allowing the use of variables, mixins, functions, and other features that are not available in standard CSS.

SCSS Advantages

  • Improved maintainability: With the use of variables, you can store values in one place and reuse them throughout your stylesheet, making it easier to maintain and update your styles.
  • Better organization: With mixins, you can group and reuse sets of styles, making your stylesheet more organized and easier to read.
  • Increased functionality: SCSS includes many features not available in standard CSS, such as functions, control structures (e.g. if/else), and arithmetic operations. This allows for more dynamic and expressive styling.
  • Better performance: SCSS files are compiled into CSS, which can improve performance by reducing the amount of code that needs to be parsed by the browser.

SCSS Disadvantages

  • Learning curve: SCSS has a different syntax from standard CSS, and you’ll need to learn this new syntax before you can use it effectively.
  • Additional complexity: Although SCSS can make your stylesheet more organized and easier to maintain, it can also introduce additional complexity into your codebase, especially if you’re not familiar with the new features and syntax.
  • Tooling: To use SCSS, you’ll need a compiler to translate your SCSS code into CSS. This requires additional setup and tooling, which can be a barrier to entry for some developers.

In this example below, the SCSS code makes use of variables to store values ($primary-color and $font-size) that can be reused throughout the stylesheet. The CSS code that is generated from this SCSS code is equivalent, but it doesn’t include the variables. Instead, the values of the variables are used directly in the CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Another feature of SCSS that’s demonstrated in this example is nested styles. In the SCSS code, the h1 styles are nested within the body styles, which is not possible in standard CSS. When the SCSS code is compiled, the nested styles are expanded into separate styles in the CSS code.

Overall, SCSS provides many advantages over standard CSS, but it’s important to consider the trade-offs and choose the right tool for your project based on your needs and constraints.

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button