In the CSS Basics for Bloggers article, we went through the different types of selectors. In this article, we will take it a bit further and show you, how you can use class and id selectors to make your blogging life much easier.
Classes and ids are HTML element attributes that are very commonly used in web development. So why should you as a blogger or website owner know how to use them?
Well, there are three main reasons:
- If you are making small styling tweaks to your posts/pages regularly, they will save you a lot of time.
- They will enable you to do changes you couldn’t do before.
- It will take very little time to get a grasp of them.
Classes are used to style HTML elements with the same class name. They can be used as many times as you want on a web page. Some parts of your blog posts, such as headings and links, are repetitive and you want them styled consistently throughout your blog. Classes can be a huge time saver in these cases.
So let’s look at a specific example. You can have many h2 headings on a single blog post and you want all of these look the same in all of your blog posts. To achieve that without using classes, you would have to apply styles to each of these h2 headings every single time, just as in the example below.
<h2 style="color:blue; font-size:30px;">This is a heading</h2>
And there is another huge downfall to doing things this way. In case you decide to make any changes to your h2 headings, increase the font size, for example, you will have to go to every single h2 heading on every single blog post and change it. You can only imagine how long it will take you to make these changes!
By using classes, you can make these changes in one spot! You add/change your CSS properties only once and they will show on any HTML element that contains this specific class name. Awesome, isn’t it?
How to use classes
1. Think of a class name. The name is completely up to you. It can contain any letter or number. It can also contain a dash. But it can only start with a letter. I recommend you to give your HTML elements a class name that makes sense and will be easy for you to remember. Examples of valid names: “myclass”, “blog-heading”, “linkstyle2” etc.
2. When you are writing a post/page, select the block you want styled, go to the Block tab and add the class name to the Additional CSS Class field. Now you have everything in order to apply custom styles to this block.
3. Go to Appearance > Customize > Additional CSS. Here you can add styles to your classes. The class selector always starts with a period and all the styles reside between opening and closing curly brackets.
They are used to target a specific element and can be used only once on a web page. They are less useful than classes, but there is one specific case when they will come handy – jump to links. These links will make navigation to different sections of a page/post quicker.
How can you make a jump to link?
- Select one of the Heading blocks you want the link to take you. Go to the Block tab > Advanced. You will see an empty HTML Anchor field. Here you can enter your anchor – id attribute – to the block. As with class names, id names are entirely up to you. The same naming rules apply to them.
- Now all you have left to do is to make a link pointing to this anchor name. To act as a link, you have to put a hash (#) in front of the name.
Let’s have a look at this example. I have given the above h2 (Classes title) an anchor name of “jump-to-class”. I also added #jump-to-class to the link below to allow quick navigation to this specific part of my post. Just try to click the link below to see it in action.
<a href="#jump-to-class">Jump to classes</a>
Do you ever struggle when styling your blog posts? If so, where do you lose the most time? Write a comment below and we will help you find a more efficient solution.