Oluwaseyi Idowu

Posted on Aug 24, 2023

CSS Selectors, Combination And Avoiding Conflicting Styling; (CSS Selector Mastery and Best practices).

#css #webdev #developer #frontend

Introduction

Cascading Style Sheet (CSS) has stood out as the ultimate tool for styling a webpage. While the HTML helps in structuring and outlining our webpage, the CSS is used to colour, design and style our webpage. Let's say our webpage or website is a building, the HTML will be the block which are layered to give the shape of the building. The CSS will be the painting, styling and decoration of our building. It is also good to state where JavaScript stands in all of this. Ultimately, JavaScript is used in maintaining or giving functionality to the elements in our webpage. A simple colour combination implemented with CSS can make a lot of difference in a web page or site. Though there are many things to learn about CSS styling in this article, you will learn about CSS selectors and how to avoid conflicting styling in your web projects.

Table of Content

What are CSS selectors
i. What is CSS
ii. What are selectors
What are the uses of different CSS selectors
i. What are the different CSS selectors available
ii. What are the specific uses of CSS selectors
Examples of different CSS selectors and their uniqueness.
i. Examples of different CSS selectors
ii. What are the uniqueness of each CSS selector
Combination of different CSS selectors with examples
i. Pick & Mix Selectors
a. Multiple selectors
b. Hierarchical Selectors
c. Combined Selectors
ii. What is the difference between the one with space and one without space.
How to avoid conflicting styling in our web design
i. Understanding conflicting styling in web design
ii. What are the major causes of conflicting styling
iii. Ways and How to avoid conflict styling
iv. Principles and best practices in good CSS styling

Prerequisites

To get the most out of this guide, it is expected that you should have a basic understanding of HTML, CSS and or JavaScript. If you are not familiar with these technologies, we recommend that you take some few minutes checking them out to familiarise yourself with them before you proceed with this guide.

1. What are CSS selectors

Before we look at CSS selectors, it is important to understand CSS itself. So we will quickly look at the following to properly understand CSS and CSS selectors.

i. What is CSS:

According to the several sources including official documentation, tutorials and books, Cascading Style Sheet (CSS) can be defined as a style language used to describe the presentation and formatting of a document written in a markup language such as HyperText Markup Language (HTML) or XML. It allows developers and web designers to control the layout, design and appearance of web pages, making it easier to separate content from presentation. For example,if our web page is a building, the markup language HTML will be used for the layed blocks or structure of the building while our CSS will be used for the painting, designing and decorating of our building.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Hello World!</h1>
    </body>
    </html>

Note: You can generate the above by pressing control button + exclamation mark in vs code.

If we put the above in a filename.html file and open it with any browser, A white page with a black Hello World text is displayed.

Let say we want the colour of the text to be red, this is where CSS comes in.

We can include some style in the markup above by doing the below

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        <h1 style="color: red;">Hello World!</h1>
      </body>
    </html>

Note the difference!

ii. What are selectors:

Selectors can be referred to as markers or reference names with which we can style our HTML elements. In writing a good CSS, it is always good to keep all our CSS and styling files in a separate file. This is good practice. Most of the time, software engineers or developers name this file styles.css. So instead of including our CSS styling in our HTML we will keep it in a separate file. Atimes, some put it in a separate folder entirely. Create a new file named style.css in the same folder where we have the html file. All our css styling will be written in this CSS file.

To style our h1 heading above, first we need to remove the inline styling in the h1 above, so that our style can reflect.

Now in our CSS file we can use a selector to select our h1 and then write our style. See the sample below.
In our CSS file, write or paste the styling below;

h1 {
        color: red;
      }

This changes the colour of our h1 just as we have it when we write it within the h1 tag in our html file.

This is what we call an external CSS and for it to work we have to connect it to our html file by including the below within the head of our html file.

  `<link rel="stylesheet" href="style.css">`

In the example above, h1 is a selector.

2. What are the uses of different CSS selectors

As we have seen above, selector is simply a reference with which we can use to apply styles on our HTML elements. They are used as references through which we can apply a distinct or unique styling to any HTML elements.

i. What are the different CSS selectors available:

Imagine if we only have one selector and we have multiple h1 in our HTML document. Applying a different style to each of them would have been impossible because if the browser sees a different style for a single element, the last one is retained.
Take a look;

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>My page</title>
      </head>
      <body>
        <h1>Welcome to my site</h1>
        <h3>First Selector</h3>
        <p>This is a paragraph tag. We can include many sentences within here.</p>
        <h3>Second Selector</h3>
        <p>HTML is for layout. It is for inputting and arranging our document in our webpage</p>
      </body>
    </html>

In our style.css, Let say we want to apply different bacground-color to the h3

h3 {
        background-color: black;
      }

      h3 {
        background-color: brown;
      }

The background-color that we will see for both h3 will be brown. This is because the h3 tag selects all the h3 elements in our HTML. So what is the way out?

Important point to note:
In styling application on html markup with CSS, If there are two styles on the same element or html tag, the last styling is what is applied. This is well proven by what we have above. We have two different styles on the h3 but the style further down the line of code is what is applied. This is one of the most important rules to have in mind why using CSS.

There are other CSS selectors we can use. This includes;
a. HTML tagname
b. class
c. id

ii. What are the specific uses of CSS selectors

As we know all CSS selectors can be used to apply style to our HTML elements. With the different selectors above, each HTML element or content on our webpage or a group of content on our web page can have a unique style applied to them separately or as a group.

3. Examples of different CSS selectors and their uniqueness

You might be wondering, what are the differences between all these CSS selectors? Each of these selectors although have a lot of similarities but they also have their uniqueness.

i. Examples of different CSS selectors

Take a look at this.
Lets edit our body in the HTML above to the one below:

<body>
        <section id="section1">
          <h1 class="header1 brown">Welcome to my site</h1>
          <h3 class="blue">First Selector</h3>
        <p class="brown">This is a paragraph tag. We can include many sentences within here.</p>
          <h3 class="brown">Second Selector</h3>
          <p class="blue">HTML is for layout. It is for inputting and arranging our document in our webpage</p>
        </section>
      </body>

Then in our style.css, let's include the following styles

body {
        background-color: #8f8f8f;
      }

      #section {
        font-family: sans-serif;
      }

      .header1 {
        font-size: 3.5rem;
        line-height: 1.5;
        font-weight: 900;
        color: #fff;
      }

      h3 {
        font-size: 2.5rem;
        }

      .blue {
        color: blue;
      }

      .brown {
        color: brown;
      }

You can try to predict how the page will look like. Check it below

There are many things to note about our output as displayed here. The body and h3 are HTML tag selectors. header1, blue, brown are all class selectors while section1 is an id. It is important to pay attention to how each of them are used. By carefully using our CSS selectors, we can apply multiple styles and unique styles to any HTML element.

ii. What are the uniqueness of each CSS selector:

It is important to know the uniqueness of each of these CSS selectors. The first way to establish this is by their usage in our styling. We can look at how they are used also in both our HTML and also in our CSS file.

a. Looking at the way they are used or appear in each of our files.
For HTML tag name: if we have <h2>Heading<h2> in our CSS we can say h2 {our style}. Just like we have above, body and h3 are HTML tagname used in styling. For example the ash backgound-color on our output in our browser was a style applied to the body.

For Class: we include class="classname" within the opening tag of our HTML element. Looking at the usage, we use .classname {our style} to apply a specific style to our an HTML element using the classname.Looking at our sample above, our h1, first paragraph and second h3 content has the color brown because of the style on the class brown. Look at the word brown in our HTML file and .brown in our style.css. With this we are able to apply same style to multiple elements using classes.

For id: it has almost the same implementation with class in our HTML file. The difference is that for id we use id in our html and in our css we use #idname to style it.

b. Another way to consider their uniqueness is in the priority and peculiarity of each of them. In order of priority, id is the most. It is the most prioritised in an external styling, followed by a class and then HTML tagname.

id are the most unique and has special usage case which include the following:
Unlike a class that can be used on many elements at a time, a particular id can not occur twice in an HTML file. It is the most prioritised in an external CSS styling.

4. Combination of different CSS selectors with examples:

We can also combine the selectors to pick specific HTML elements to style in our CSS.

i. Pick & Mix Selectors

a. Multiple selectors

a selector, another selector {

}

Say we have an h1 and p with colour red.

We can just have the below in our CSS file;

h1, p {
    color: red;
}

b. Hierarchical Selectors

This is selected by hierarchy. That is selection based on the hierarchy of the selectors

E.g

#title .container-fluid {
    padding-top: 3%;
    text-align: left;
}

selector1 selector2

The first selector is a parent while the 2nd is a child.
So in using this, we will go from outside in, selecting the parents till we get to the specific child.

.container-fluid h1 {
color: red;
}

Then we read the hierarchy from right to left. The one on the right is the child and the one on the left is the parent.

c. Combined Selectors

This is combining selector

selector1.selector2 {
   display: flex;
   padding: 20px;
}

selector1#selector2

We will read this from left to right.

ii. What is the difference between the one with space and one without space.

Without the separator, we are targeting an element that has the classes we state but with the space it means we are following the hierarchy moving from the parent to child.
It is good to remember this about selectors, they have hierarchy id's that are the most specific which means they take much priority and then classes and lastly HTML tags.

Also it is good to note that the last styling will always be applied.
Also class selector is superior to HTML tag while id is superior to class and HTML tag. These are CSS rules.

Then also inline CSS is the strongest when it comes to where our styling is positioned.

5. How to avoid to avoid conflicting styling in our web design

It is important to understand the ways and methods to avoid conflicting styling in our development. We can have style conflict when the style implemented by the browser is different from the one specified by the designer or the developer. This can be very frustrating at times.

i. Understanding conflicting styling in web design

Conflicting styling is when the style on our page output by the browser is different from the one specified in our code. If you observe this, you can inspect the page by right clicking on the browser, then select inspect. Chrome is a good tool to see what style is applied on what element on the page.

ii. What are the major causes of conflicting styling

Conflicting styling can occur from any of the following;
a. Having multiple forms of styling. e.g having inline, internal and external or any two together.
b. Having multiple style sources. This can cause style conflict that is not properly addressed or monitored.
c. Omitting separators and proper formatting of styles.
d. Improper linking of style files in HTML files.

iii. Ways and How to avoid conflict styling

Ways to avoid conflict styling is to ensure to carefully attend to everything stated above and sticking to best practices in CSS styling.

iv. Principles and best practices in good CSS styling

a. Use id's very sparingly. Not only that you have one of those things but that it is distinct so use class instead. Only use id when you need to but always consider using class first.
b. When you want to use a class, always use one class. Try to apply to only one class as much as possible.
c. Avoid inline styling as much as possible. It is a very bad practice so don't do it.

Keeping to all the above helps you reduce debugging to the barest minimum.

Conclusion

Now that you have properly mastered CSS selectors and best practices for great styling, make further effort to refactor your previous stylings, practise what you have learnt and work on more web design projects using HTML, CSS and JavaScript.

DEV Community