This article explains how to use the CSS Selector control of a font section in more detail. Taking a couple of minutes to learn about CSS selectors will allow you to manage the typography of your theme like a pro.
Note: When it comes to CSS selectors, the order in which fonts section are sorted plays a role. Please refer to the documentation about sorting fonts to learn more.
What’s CSS?
Via CSS you are able to select any element of your theme and apply styling to it. For example, setting the background color of a button to blue and it’s text to white.
There are a few basic elements that are the same for any theme regardless of what theme you are using. Here’s a brief list of the most important ones and what these elements are encompassing.
- body – everything on the website
- h1 – the biggest headings
- h6 – the smallest headings
- h2, h3, h4, h5 – all the headings in between
- a – any link (could also be buttons, menus, and other clickable elements)
- p – any paragraph on the website
- li – list items like this one
As mentioned, these are elements on the page. You will find them on any WordPress theme out there. By applying CSS to them, you can modify how they appear on the page. In our case, you could place any of these element selectors inside the CSS Selector field within NovaFonts and begin styling them.
Selecting Multiple Elements
CSS also allows you to select multiple elements and apply styles to them at once. To group selectors, you simply divide them with commas like so: “h1, h2, h3, h4, h5, h6, a, p, li”.
Class Names & ID’s
CSS class names and ID’s are important to understand because the theme you are using most likely already has styles applied to it’s elements via class and ID selectors. These selectors are stronger than the simple element selectors described above and to override them you have to find out what their names are.
Below is a short video clip to help you find out what your theme’s class or ID selectors are. The theme we used to create the video is Twenty Seventeen and the browser is FireFox, both can downloaded for free. However, most browsers work similarly and you may already have the same functionality available in your current browser.
What you just saw in the video was us using right click on top of an element to bring up the context menu and then clicking on the Inspect Element option. This opened the inspector and we could see the elements, their class names and position with the document.
Inside the video we hover back and forth over three elements within the inspector. To the left of the inspector, the site is still visible and when an element is hovered over inside the inspector, the site reflects which elements on the page it refers to.
The class names of the three elements that are being hover over are “site-brand-text”, “site-title”, and “site-description”. The element with a class name of “site-brand-text” is what we could call the parent element.
To address an element via a class name within the NovaFonts CSS Selector field, you will have to prefix the class name with a dot (.) like so: “.site-title”. ID’s would have to be prefixed using a hash symbol (#), like so: “#some-id”.
Selector Specificity
There is one more concept we feel is worthy of your time and that’s CSS selector specificity. CSS selectors can be nested, which means, if you were to write a selector like: “.site-brand-text .site-title” (notice no comma but a space), you would only select all “.site-title” that are within any “.site-brand-text” elements. This can come in handy if you’d like to style only the headings inside a sidebar for example.
Sometimes theme styles can be harder to override than others and using a more specific “nested” selector also increases it’s strength. If, at times, you are having a hard time overriding certain elements on a page, use the inspector (as demonstrated in the video) to find one or more parent selectors to increase your selector specificity and overrule your theme’s default styles.
The code example below is drawn from the demo video above. Within it you will find an element with a class name of “site-brand-text”, which is the a parent of the “site-title” element and “site-branding” which is a parent to both of them.
<div class="site-branding">
<div class="site-brand-text">
<h1 class="site-title">Demo Site</h1>
...
</div>
</div>Based on the code example above, you could form a selector that looked like this: “.site-branding .site-brand-text .site-title”, or this: “.site-branding .site-title”.
Additional Information
Internalizing this short tutorial will not only allow you to gain full control over the NovaFonts CSS Selector field, but also supply you with a solid starting ground to become proficient in writing CSS. If this tutorial has sparked your interest, feel free to check out the links below to learn more.