CSS styling and specificity

For a long time CSS has been responsible for making web pages look beautiful, and interactive, and in some cases helped with basic functionalities.

To do this, it must interact with the elements in the HTML (Hyper Text Markup Language) document.

This guide is for anyone trying to style HTML with vanilla CSS in any form be it in a standard HTML document, JSX, creating web components, or writing in PHP or XML, the rules still apply though the processes might be slightly different.

Adding CSS to an HTML Document

There are several ways to add CSS to an HTML document in this article, we will cover three which are:

• Inline CSS

• External CSS

• Internal CSS

Inline CSS

This method of adding CSS to HTML involves using the style attribute to directly embed CSS style rules into the elements opening tag

(for details regarding html elements and how to use them, see my previous article)it will allow the element to look something like this:

While this method is convenient for quick styling, its repetitive nature makes it hard to maintain. It also affects the speed of an application as it increases the size of the html file thereby taking longer to load.

Internal CSS

This method of styling adds the style rules to the head tag of the html document using the style tag.

While it’s great for styling single HTML documents, its single-page scope puts it at a disadvantage for styling multiple HTML documents.

Also, mixing the structure of the html with CSS styles within the same document can make the HTML file harder to read and maintain.

An example of the internal styling syntax can be found below:

External CSS

This is written in a separate file with a .css extension and is linked to an HTML document using the tag in the head element.

This is the best practice for adding CSS to HTML files for a few reasons some are:

• Separation of style information from HTML structure

• Reusability of code as these external files can be linked to different HTML files

• Reducing load times because browsers can cache external CSS files, so the CSS does not need to be re-downloaded.

• Ensures uniform styling across multiple pages, making the website look cohesive and professional.
  Using this method of styling is very easy you just have to

1. Create a CSS file with the .css extension so your file can be named style.css or home.css
2. Link this CSS using the link element in the head tag of the HTML file As seen below:

Add your style rules to your CSS file. And you’re all set to style your page.

The methods used to style the HTML page can vary for different reasons and conditions. While the external CSS method is the best practice, different circumstances call for different methods of styling so choose the method that best fits your project.

Specificity in CSS

Specificity in CSS refers to a set of rules that determine which CSS styles are applied to an element when there are multiple conflicting rules.

In a nutshell, It is a way to calculate the weight of different CSS selectors. The more specific a selector is, the higher its specificity and the more likely its styles will be applied.

Specificity calculation

Specificity is determined by four major categories of selectors they are:

1. Inline CSS: (styles added directly to an HTML element via the style attribute) has the highest specificity.
2. IDs: unique identifiers for elements that have a high specificity.
3. Classes, Attributes, and Pseudo-classes: These selectors have medium specificity.
4. Element (Type) Selectors and Pseudo-elements: These have the lowest specificity. In CSS, specificity is calculated through a point-based system.

This system starts at 0, element selectors and pseudo-element selectors which include pseudo-class or attribute selectors get 1 point, 10 points are given to classes, ID selector gets 100 points and inline styling gets 1000 points which is why it is always given the highest priority in CSS.

What this means for your code

Let’s say we have an HTML document with an h1 element say and we style it in our external stylesheet so we have something like this in the HTML:

The styles applied to the H1 elements will be the styles from the ID selector because, on the specificity point list, the ID has more points than the element selector.

Now say we throw in some inline styles for the H1 in the HTML document directly modifying the H1 to be:

The inline styles will automatically override the styles given by the ID because it has a higher specificity value than the ID.

Why understanding specificity is important

Styling with CSS allows for static ugly ducklings to transform into beautiful swans. The methods of styling are easy to understand and follow and though their usage may vary from project to project, external CSS remains the best practice.

These methods however won’t be fully effective if you do not understand specificity and how to use it. Understanding specificity allows you to know why and how your styling will react to certain style rules.

This helps minimise conflicting style rules, and redundant code and improves the overall performance of your web app. Happy coding!