Styling your site with CSS gives you great freedom, as it enables you to customize it far beyond what your theme allows for. All you need to do in order to enjoy that freedom, is to assign CSS IDs or classes to elements on your pages and “call” them via CSS. This post will guide you step-by-step through the process.
Please note: While assigning CSS IDs and classes doesn’t require the use of plugins, overwriting your theme’s or plugins’ stylesheets might require one. CSS can be overwritten either via WordPress’ own Additional CSS field (Appearance->Customize->Additional CSS), via your theme’s custom CSS option (if available), or via a plugin. WPBN recommends the use of the free plugin Custom CSS & JS, as it has been tested by us on multiple websites and seems to work well, with no glitches.
Using CSS IDs and Classes Correctly
Before you start assigning IDs and classes to diverse elements on your site, it’s important to understand, what the difference between them is and when to use which.
CSS ID is a selector, used to identify individual elements that will then be styled in a unique way. IDs should therefore always be unique and assigned to a single element. You can, of course, use as many unique CSS IDs as necessary on any given page.
An ID in CSS begins with #. For HTML 4, the ID should begin with a letter and can include any number of letters, numbers, and ISO 10646 characters. Be though aware that some characters, such as periods for example, must be escaped, when calling an ID in CSS, which makes it a good idea to avoid them to begin with. In XTHML, IDs are case sensitive. To keep it simple, it’s recommended to always use small caps and to only use letters and numbers in IDs. IDs don’t need to be long or have intricate structure. You can surely think of enough simple IDs to cover your needs, without making your life too complicated.
An example of an ID in HTML is: id=”my-id”. In CSS, the same ID would be called as follows: #my-id
CSS classes are a selector, used to group similar items in order to implement mass style changes. Therefore, you can use the same CSS class on as many similar objects as necessary (Objects should be the same in terms of formatting but can contain differ in many aspects. For example, a group of data tables, where each table contains different number of columns and rolls but in the same time shares characteristics with the other tables, such as separator lines, cells, rows, borders, etc.)
CSS classes can be used to narrow down the target for certain CSS declaration in combination with an ID or HTML element (h1-h6, p, img, a, etc.).
In CSS, classes start with a full stop, . . The rules, regarding which characters you can use in classes, are the same as for IDs. In order to achieve maximum compliance, make sure the classes you use start with a letter, use small caps, and don’t contain characters beyond hyphen and underscore to avoid things getting complicated.
An example of a class in an HTML document is: class=”newclass_example8″. In CSS, you would call this class as follows: .newclass_example8
Pinpointing Predefined CSS IDs and Classes
In order to be able to work with CSS IDs and classes, you need two things: the ability to discover existing IDs and classes or assign new ones; and the ability to overwrite your site’s stylesheet, without actually changing anything in the original file. You could, in theory, also directly edit your theme’s stylesheet but be aware that any changes will be overwritten, if the theme updates. As long as you plan to change a lot, you might also consider using a child theme.
In order to discover existing IDs, you can use a tool as Chrome Developers, available to all Google Chrome users. All you need to do is, right-click anywhere on the screen, while viewing the site you want to edit in Chrome browser, and click on Inspect.
A section opens to the right of the screen, reviewing all styles on the current page.
To inspect an element on the page, right-click on it and click on Inspect again. First, you’ll notice that a section of the code to the right gets marked. This is the section, referring to the style of the element you are inspecting.
If you look at the bottom section of the Inspect tab, you will see a lot of names beginning with a full stop or hashtag. These are the predefined classes and IDs on this page, related to the inspected element.
You can find the predefined CSS ID or class of the element you want to style by hovering above the list of selectors (under the Styles tab in the screenshot above) until the element on the page gets selected (in the screenshot, it was the carrousel images that were inspected).
Now, you are close to pinpointing the class or ID you have to use in order to customize the element in question: out of all selectors, the one(s) that are highlighted (black in the screenshot above) are the ones you need to use.
The video below guides you through the process and shows, how to test, whether a CSS edit works as expected in Inspect mode.
Adding CSS IDs and Classes to Page Builder Elements
Another “easy” option to add CSS IDs and classes in WordPress is to use the built-in ID and/or class filed in most page builders, if you are using a page builder. Almost all page builder elements have built-in field, you can use to assign additional CSS classes (as all elements already have one or more CSS classes assigned by the developer) or an ID for individual styling.
The screenshot of WPBakery Page Builder shows an element, in this case a row, that allows you to assign both an extra CSS class and an ID to it. In most cases, you’ll only use one of them but more intricate designs might require that you use them both – and it is completely fine to do so, as long as the styles you want to apply don’t interfere with each other.
Both classes and IDs are entered WITHOUT a character in the beginning (# for IDs and . for classes). The rules about what characters you can use in them, are as explained before: start with a letter, use letters, numbers, underscores, dashes but avoid colons and dots, as well as other special characters that must be escaped in stylesheets. Classes can be used to style a group of similar objects, while IDs are used to style individual objects.
Before you can use the assigned CSS class or ID, you must save your changes. Then, you can go over to the Custom CSS & JS (or another) plugin and call the element, using the newly assigned selectors.
Adding CSS IDs and Classes in Text
Sometimes, you don’t have the option to use built-in CSS functionality, making things easy. In such cases, your only choice is to manually assign IDs and classes to diverse elements. Such elements can be a paragraph of text, an image or other page elements that can be accessed via the Text mode of the text editor.
All you need to do, is add the CSS ID or class to the element – in the example a paragraph – as follows:
<p id="id-name-comes-here">Paragraph text comes here</p>
Here’s how it works (screenshots show the sequence before->assign ID->call the ID in CSS->after):
Calling IDs and Classes in CSS
After you have assigned an ID or class, you are ready to use it. You do that by calling it in CSS. Remember that each class starts with a full stop and each ID with a hashtag in the stylesheet.
You can use single ID or class to change multiple design details, such as font-size, color, position, z-index, etc. The following example changes font-family, color, and font-size, line-height, and text-transform for elements with the class change-this:
If you want to learn more about CSS, try WPBN eAcademy’s free CSS course for non-developers.