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.

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 {
  color: red;
  font-size: 32px;
}

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

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

Or apply a class across multiple elements:

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

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 element in the of your HTML document
3. External CSS, using a separate .css file linked to your HTML document using the element in the 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.

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.

© %currentyear% DK New Media, LLC, All Rights Reserved.