Mockupless

Intro to CSS

CSS is a styling language. With CSS, you define how the content of a prototype is positioned and how it looks. If HTML is like the Layers panel in Figma or Sketch, then CSS is like Inspector that allows you to set width, height, fill, text styles and effects for the selected layer.

The easiest way to apply CSS to a container is by using the style attribute:

<div style="font-size: 32px">
  Large title
</div>
<div>
  Regular text
</div>

Being an attribute, style is placed inside an opening tag. It is followed by an equal sign and a pair of double quotes. Each style inside this attribute is a property (font-size) and a value (32px) separated by a colon.

When a style is applied, its effect should be immediately visible in the Preview on CodePen:

You can apply multiple styles to a container separating them with semicolons:

<div style="font-size: 32px; font-weight: bold;">
  Large and bold title
</div>
<div>
  Regular text
</div>

The code above specifies the size and the weight of the font in the first container:

Classes

Adding style attribute to a container is called inline styling. There’s a number of other ways to apply CSS, and using classes is probably the most popular approach. class is an attribute that you populate with class names separated by spaces:

<div class="header">
  Text with class “header”
</div>
<div class="paragraph intro">
  Text with two classes 
</div>
<div class="paragraph">
  Text with one class
</div>

To make this code work, you need to go to the CSS section of your prototype and define styles for the classes you used:

.header {
  font-size: 32px;
  font-weight: bold;
}

.paragraph {
  font-size: 18px;
}

.intro {
  color: #aaa;
}

A dot in front of the name tells a browser that this is a class. Styles in CSS are enclosed in curly braces and are separated with semicolons and line breaks.

When you apply classes to containers in HTML and define styles for those classes in CSS, you should be able to see the styles applied to the containers in the Preview:

It is common to name classes using lowercase letters and connecting words with hyphens:

<div class="paragraph intro-hero inner-content"></div>

Tags

In CSS, you can define styles not only for classes, but for tags too. For example, you can apply a text color to a button tag:

button {
  color: #1E90FF;
}

The code above will affect the appearance of all button tags in your prototype:

Multiple selectors

Another option you have when styling your containers is to define a single set of styles for multiple selectors:

input, textarea, select {
  border-color: #87CEFA;
}

This piece of CSS changes the border color for all inputs, text areas and dropdown controls:

Commenting

You can hide parts of your CSS code from preview similarly to the way you hide HTML code. Commenting CSS serves the same purposes as it does in the HTML section:

  • To temporary hide the code that you don’t want to be applied.
  • To visually separate your code into sections.
  • To leave comments for yourself and other designers.

The syntax is different from the one you use in HTML though. To comment CSS code, you enclose it in a pair of forward slashes and asterisks:

/* .something {
  background-color: #eee
} */

/* General styles section */

button {
  border-color: red;  /* replace with a nicer red later */
}

The keyboard shortcut is the same as in HTML too: ⌘+/ on macOS, ctrl+/ on Windows.

Choosing the styling approach

We recommend to use a mix of inline and tag styling during this course. Classes are highly reusable and make the HTML code cleaner, but creating a system of well-designed classes takes a lot of time and effort. Also, flexibility is an important part of the prototyping process: you need to be able to pivot quickly, try different layouts, and create freely—all without spending too much time on maintaining a design system.

Eventually, you will switch to classes, but you will not have to create them. In the Frameworks and libraries section of this course you will be introduced to Tailwind, a CSS framework that provides you with a collection of classes that come as a natural upgrade from inline styling.

Practice

Add some styles to the prototype from the Nesting article:

  1. Fork your result of the task in the Nesting article. You can also fork the prototype from the article.
  2. Add the style attribute with padding-bottom: 24px to the three main parent containers. This should add vertical spacing between items on the list.
  3. Add style with font-weight: bold and font-size: 18px to the containers with the user names.
  4. Add style with font-size: 13px to the containers with the time stamps.
  5. Go to the CSS section add specify font-family: sans-serif for the div tag. This should apply a sans-serif font to all elements on the page.

Don’t hesitate to look at the code of the prototype above if you encounter problems with the task. All styles from this task will be explored in more detail in the articles that follow.

← Units →