What is CSS?

Explanation of this example

If you were to put this “in real life” in your extra CSS, the H1 head of each page of your website would turn blue and would have a height of 12 pixels (which is too small for a heading, so don’t do that).

There is a reasonable chance that your theme does not accept this code and “thinks” I just show the H1 head according to the settings I have in my theme. There is also a solution for that. A solution you will often need if you start to apply CSS. It is a way of ‘overriding’ a theme or a specific plugin, like a LMS.

The solution if a CSS code is “refused” by the theme

You would to apply this code, but the result is not visible to the visitor:

h1 {color:blue ; font-size: 12px ; }

You change the code by adding !important before the last semicolon. Then the CSS code is like this:

h1 {color:blue ; font-size:12px !important; }

Now you have a chance that the font size is 12px, but the text is still not blue. The solution is the same: just add !important after the blue. The CSS code will be:

h1 {color:blue !important; font-size:12px !important; }

These were only examples of the syntax of CSS. In the menu, you will find CSS for multiple WordPress related situations.

CSS Class Selector – an explanation

In the example, we shared CSS code for a specific nameable property of the theme, such as a H1 heading: so H1 is the Property on which the CSS code is targeted at. As soon as you apply this code, it changes all the H1 heading on the website.

What frequently happens is that you want to adjust one element, not all of them who share the same selector. Like a specific text block, heading, or image.

You accomplish that by creating a “class”. Almost every theme and every decent Page Builder has the option of not only placing a CSS code in the Extra CSS, but also to assign a class to a block. We’ll explain this in details in the example below.

Example CSS class

Starting point: you want to make a heading red, but only a few headings you choose, not all. You achieve this by using a class; In the example earlier, we used the selector H1. We can’t use that now because it would apply to all H1 headings on the website.

Instead of H1, you make up a name! That name must meet a few conditions:

1. The name has to be unique: it cannot be identical to a class used elsewhere on this website.
2. Because a theme (and other plugins) also use classes ‘under the hood’, the name shouldn’t be universal; give it a personal touch! For example, start every class you create with your initials.
3. The name should be an indication of what it does. If I named a class BB01, and see that name a year later, it wouldn’t tell me what it does. But naming the class bb-head-red, tells me I created the class and that it’s used to create red headings.

Now we are going to write the CSS code

1. You start with a dot and the name of the class, in this case .bb-head-red
2. Then always a {
3. Then the Property, in this case color
4. After the property a : (colon) and the value red
5. To be certain, we add !important
6. After the value and !important we add the ; (semicolon)
7. If there is no other property and value, you close the CSS with a }

.bb-head-red {color:red !important; }

Put the CSS code on your website

Apply the CSS Class to the block or element

• You open the page or post where you want to adjust the title.
• On the correct page, click Edit.
• Whether this is Kadence Blocks, Greenshift, Divi, Elementor, it works the same with every builder.
• Each element or block of a good builder has a field with advanced or options with the name: ‘Extra CSS classes’
• Type the name of the CSS class you created, but without the . (dot) at the beginning. This is essential. Otherwise, it will not work. That looks like this:

Then click Save so that this added CSS Class is part of your page. Now the H1 heading where you have added the class, will be red.

Tip 1: put instructions in the CSS code

It is useful to put an indication of its use, in every CSS code that you use or save. You put this at the start of the code and place it like this:

/* Give an indication of what the CSS code does */
.bb-head-red {
	color:red !important; }

Tip 2: Store your CSS code somewhere

It is useful to make a note somewhere of the classes you have created, with both the code and the purpose of the code. We keep all codes applied by us in the (free or paid) Upnote app. This note application has the advantage that no graphic layout is applied so that the code can still be used later.

Tip 2: Remember you often don’t see the effects backend

Occasionally, CSS code immediately has a visible effect while editing a post. However, keep in mind that in numerous instances, a lot of CSS code only shows at the frontend; that’s how a visitor sees it.