Reviewing CSS Style Priority Level

By . Filed in Web Design

The Cascading Style Sheet (CSS) is, I think, the simplest of languages compared to other web-related languages, so it is not surprising to find many people who are just beginning to learn how to create a website will mostly learn this language and HTMLfirst.

In this post, we will go back to CSS basics. We are going to review how the CSS styles are initially applied, which styles will apply, how some styles declaration overwrite one another while others don’t.

So, this post is specifically dedicated for beginners who are just starting to get the hang of the challenges, probably still making mistakes and errors when compiling their first stylesheet. So, let’s just get started.

Default Browser Styles

Firefox, Chrome, Safari, Opera and Internet Explorer are currently the top five desktop browsers in the market. These browsers and all other browsers follow a standard rule to include built-in default styles to render the HTML elements.

So, when we put in some random HTML elements without any styles added, you will see that it is still properly rendered in the browser.

But, if we inspect those element carefully, each of the browser have (slightly) different values for their “default” declaration which cause to inconsistency across the browsers, particularly in the old one like IE6, 7 and Firefox 3.0.

For example, as you can see from the above screenshot, the newest Firefox rendered the blockquote by default with margin: 16px 40px 16px 40px, while on the other side the Internet Explorer 7 will render blockquote with margin: 0px 40px.

To overcome the inconsistencies shown above, many web designers and developers prefer to overwrite all those styles with CSS Reset. This CSS file generally contains almost all HTML Type selectors, defining them with equal rules.

There are many CSS reset available, but here are my top three favorites:

Selectors

You probably often read this term across the web design/development blogs you visited; Selectors.

The Selector in CSS is the syntax used to target any parts on the HTML document for the styles to be applied to. There are three basic selectors we are going to discuss here, as they probably will be the common selectors used on your first website. We’ll cover others in future posts.

Type Selector

We have mentioned once above, Type selector will target any specified HTML elements on the document. For example:

p {
	/** declaration **/
}

will match all the p or the paragraph elements and using it will eventually overwrite the default styles given from the browsers.

Class Selector

When you have added a class or even many classes to an element, you can also target those classes. The Class Selector begins with a dot parameter.

.box {
	/** declaration **/
}

The above snippet will match all elements that have the box class, or we can also select more specifically.

p.box {
	/** declaration **/
}	

It will target only the p element that has the box class.

When we are using the Class selector, all the same styles declaration from both the Type selector and the Default Browser will be overwritten.

ID Selector

The ID is a very restrictive attribute, we can only have one id on an element and it must be unique as well.

<div id="content">Content</div>

In case we have an id in an element, we can use the id selector to target that element; the id selector is defined with a hash # parameter.

#uniqueID {
	/** declaration **/
}

Since the ID is unique, it has the strongest priority level of the type of selector. So, when we declare styles with the ID selector it will ultimately overwrite all the same declaration from the Class, Type selectors and the Default Browser styles.

Embedding the Styles

We have come through all the essential basic selectors and now we will look into how those styles are embedded in an HTML document.

External Styles

External styles are the styles that are added in a separate file, usually in a .css file which then are linked to the HTML document using the <link> tag to apply those styles.

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

And all the styles declared in the files will behave like what we have mentioned in the Selectors section above, namely it will mainly overwrite the default browser’s style, and overwrite to another style declaration depending on the priority level of the selectors.

This practice is the most recommended way to attach the styles, particularly when you have thousands of lines of CSS codes with many pages to attach to.

By doing so, the styles will also be easily manageable, for instance, you can separate the CSS files into several files depending on its specific role, such as typography.css to control all the styles related to Typography and so on.

Internal Styles

The internal styles are the styles that are embedded directly in an HTML document, generally inside the <head> tag.

<head>
	<style type="text/css">
		h1 {
			/** declaration **/
		}
		p {
			/** declaration **/
		}
	</style>
</head>

But this practice is not recommended when you will have hundreds of line of styles as your HTML page will be too long and the style will only affect where the styles are embedded. When you have let say ten pages, you will need to copy those styles and embed them in all the pages and when you need to change the styles you have to change it to ten different pages, which is obviously a tedious task.

Based on its priority level, the internal style is higher, so it will overwrite the external styles.

Inline Styles

Inline styles are the styles that is directly embedded in the HTML element.

<p style="margin: 5px;">This is a paragraph</p>

This example above will add 5px margin to the paragraph element and it will also overwrite the margins that have been declared for that element both in internal and external styles.

But do avoid doing this, as your markup will be cluttered with all those style declarations; if you have a bunch of styles embedded, it will even become a nightmare to see and maintain all your html and styles.

Further reading: Three ways to insert CSS – W3CSchools.

The !important Rule

There are some circumstances when we have to apply a specific style for an element but the same style for that element has also been declared elsewhere in the stylesheet or in the document. For example:

We have the following anchor tag with embedded styles

<a style="color: #border: 1px solid #156E8E; background-color: #389ABE;">This is a link</a>

And we also have a separate style for that anchor tag in the style sheet.

a {
	border: 1px solid #333;
	background-color: #555;
}

In that example, we can use the !important rule to force the browser to use the styles in the style sheet instead of the one in the element.

a {
	border: 1px solid #333 !important;
	background-color: #555 !important;
}

The !important rule will indicate that this style is the most important and must be applied over the other style even when it is directly embedded in the element (Inline Styles).

Further reading: !important CSS Declarations: How and When to Use Them – Smashing Magazine.

Conclusion

We have come through the entire subject matter in this article. We can see now that each selector and the way we embed the styles have different priority levels in the browser’s mechanism. As I’ve mentioned earlier, these subject are intended for novice levels so they are definitely not something new for seasoned web designers.

But, I think every web designer in general will agree that going back to basics is sometimes necessary to review our fundamental knowledge of a subject. In fact, we often miss some of the basic stuff, as we tend to be more impressed with awesome (and crazy) stuff like this.

Lastly, I have provided a demo and source file for you to examine our discussion in this article further.

I hope you enjoy this post and if you find some inaccuracy in it, or I have missed some important points, don’t hesitate to notify me in the comments section below.

Author:

Thoriq is a writer for hongkiat.com. He is also a web developer with very unpredictable sleep cycle.

Tags:

Advertisement