There are going to be times when you are applying a particular style to an HTML element and it just doesn’t apply. It happens to every web developer. This article will cover the steps you can take to figure out what is wrong, along with fundamental concepts about making styles more specific and giving them a higher priority. Usually, the more specific a style is, the higher priority it has. Before getting into specificity and priority, first let’s go over some common reasons why your styles may not apply.
Make sure your HTML file is connected to a CSS file
The most straightforward way to do this is to add a universal style to the body in your CSS.
body {
background-color: lightblue;
}The above style should change the tint of the entire webpage to lightblue. If this doesn’t happen, make sure the stylesheet is connected properly using the <link rel="stylesheet" href="path/to/stylesheet">. Remember that the <link> tag doesn’t need a closing tag and should be added inside the <head> tag of your HTML.
If you still can’t figure out the correct path to target the CSS file, it’s easiest to make sure the CSS file is located in the same folder as the HTML file. If it’s not, try moving it. If all else fails and you really need to add some styles, you can resort to using the <style> tag in your HTML, though this isn’t a good practice.
Use an ID to target the HTML element
Although classes are the most common way to target HTML elements for applying styles, id properties have a higher priority. So if there are some styles that you wish to add to a single HTML element that are not applying, give that HTML element an id="some-container" property (make sure it’s suitably named) and then target that element in your CSS with the # character to select the id name. The below styles will have a higher priority application on the container element and its children.
#some-container {
background-color: ivory;
}
#some-container p {
font-weight: bold;
}
#some-container h2 {
text-decoration: underline;
}The above styles will bold all paragraph text and underline all h2 headings inside of an element with the some-container id. Remember that ids should be unique to one element in very unique cases. Most of the time, even for applying styles to one element, it’s better to use classes. This makes using an id when you need it more fool-proof.
As shown in the snippet above, you can target nested elements within an element with an ID to get higher priority for its child elements, too. To apply styles to the p2 and h2 tags, the above code snippet is using one ID and one element tag selector. Usually the best way to get higher priority for an element is to use two classes to target the element instead of using two different selectors for its parent and itself. Consider the HTML code below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Document with a few styles</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav class="navbar">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Blog</a>
</nav>
</header>
<main>
<aside class="sidebar">
<a href="/css-selectors">CSS Selectors</a>
</aside>
</main>
<footer></footer>
</body>Notice that the link tags within the sidebar (the <aside> tag) should be styled differently from the links in the top navigation bar in the <nav> tag. What is the best way to style these in a way specific to the section they are in? Notice the class names given to each element. Those should be specific enough. In the CSS file, using a .navbar a selector for adding styles to the navbar and .sidebar a for the sidebar links would do the trick.
Now what if you wanted to move the Home link in the navbar over to the top-left of the page? For that it would be better to add an ID to the home link and give it a different style. Changing the HTML link with the Home link to <a href="/" id="home">Home</a> will give it a high enough priority to apply those styles. So how should a navbar like this look? There are two ways to target the first element in the list of links in the <nav>: the first is to use a pseudo-class called :first-child and the second is to use the ID of home. Since we’ve already given it an ID that is a high priority selector, let’s use the ID and add the following styles:
a {
float: right;
}
#home {
float: left;
}This will cause all links except for the “Home” link to move to the right of the page. We may not want to do this to the sidebar link, though. So let’s make the first style more specific by adding a nav selector in front of the a. This will keep the links in the body unchanged.
nav a {
float: right;
}
#home {
float: left;
}Summary
While specificity helps target the elements you want to style, priority helps determine which styles are applied if there is ever a conflict. When CSS prioritizes which styles to apply, inline styles that are defined in the HTML tag have the highest priority. In the above example, defining the home link as <a href="/" style="float: left;">Home</a> would have the highest priority, but it’s not reusable. Try to avoid that. Instead, use class names to add a prioritized, reusable selector for your styles. If you must distinguish one element from others, it’s acceptable to use an id property for that element’s unique styles.