Introduction to CSS classes

Learning objective

By the end of this session, you will be able to:

• Locate our CSS wiki
• Copy and paste our ready-made code into sites, to enable special effects
• Add CSS classes to your content

Video tutorial

Video transcript

In this CSS introduction course video, we will review CSS classes: what are CSS classes, the CSS Wiki and how to apply CSS to add effects to your sites.

Understanding CSS: What is CSS in HTML?

CSS stands for cascading style sheets; a feature of HTML that applies style definitions to control how elements of a webpage look.

This includes animations such as hover, zoom, or parallax on your site. We’ve created a CSS class Wiki that provides simple codes you can use in your designs.

We’ve organized the CSS into different tasks, such as varying effects or even parts of the site like sections or navigation.

Adding CSS is a two-step process. First, we copy the code provided below and add it to our site.

If we want to apply the code to a single site, we add it to our site editor.

But if we want this added to multiple sites, we need to add it at the theme level, which we embedded in the backend. Any site that is created off of that theme will include this code.

The second step is to apply the CSS class. In this case, we’ve underlined it. “Flip card”. Let’s go ahead and walk through this together.

Use CSS class in a section

The first step is copying the code. Let’s go to the site editor and add it to our site. Styling, local site styles, edit, and we can paste our code. Save, done. The second step is to add the CSS class. That’s the underlying term from the CSS Wiki “Flip card.” We can add the CSS class to the section, which will impact every tile within that section. Under the grid section, you’ll find an option that says, CSS class. Enter in the class. Now every tile in this section is impacted by a flip card. If we longer want this effect on the section, simply select the X to remove it and the original tiles will take into effect.

Use CSS class in a single tile

If we would like to apply the flip card to a single tile, select the tile in this case, the PDF tile, and add the flip card CSS class in the same fields. The animation or CSS is only applied to this single PDF tile, and the other two tiles are unaffected.

Now you know about CSS, go ahead, try adding an effect to one of your sites. Now, for more information on how to use this platform, see the next videos in the series.