CSS or Cascading Style Sheet can be applied to a HTML page in multiple ways. In addition each browser has its own CSS which will be applied for naked HTML elements. For example, when you have H1 tag on a page without any styles then then Google Chrome itself apply larger font size to show it as a heading.
Types of CSS
Inline Styling
Inline style is directly defined on a HTML element inside a web page affecting only that element. Below is an example of using inline style to create a green paragraph with font size 14px.
<!DOCTYPE html> <html> <head> <title>Using Inline CSS</title> </head> <body> <p style="font-size:14px; color:green;"> Here is the green paragraph with font size of 14px. </p> </body> </html>
The result of the above code will be rendered on a browser like below:
Internal Styling
Internal style is defined within <head> section of a HTML document affecting all particular elements on that page. Below is an example of creating two paragraphs with same style properties.
<!DOCTYPE html>
<html>
<head>
<title>Internal Style</title>
<style>
p {margin-left: 20px, border: 1px solid grey; background: #fafafa;}
</style>
</head>
<body>
<p>
Here is the paragraph with 20px margin left with background color and border.
</p>
<p>
This is a second paragraph with same properties.
</p>
</body>
</html>
The result on the browser should look like below with both paragraphs having similar styles.
Using Internal CSS
External Styling
External style are defined in an external text file with an extension .css and linked to the HTML document using <link> tag within <head> section. Below is how the external stylesheet can be linked in a HTML document:
<!DOCTYPE html> <html> <head> <title>External Style</title> <link rel="stylesheet" type="text/css" href="external-style-sheet.css" /> </head> <body> <p> Here is the paragraph and the style will be applied from external stylesheet. </p> </body> </html>
The difference between internal and external styles is that internal styles are applied on all elements only on a particular HTML page. But the style defined inside the external stylesheet can be applied to all the elements on the entire website just by linking the CSS file on all the page headers.
Thus the external stylesheets have biggest advantage of making modification, maintenance and tracking of styles easy in a centralized file. You can also use more than one CSS file on a page header. There are many CSS frameworks like Bootstrap offers predefined stylesheet for creating responsive website. Simply include the file link from content delivery networks (CDN) and save the storage and bandwidth of your server.
Cascading Order Determination
Now that you have understood there are three ways to apply CSS on HTML and the browser also has its own predefined styles.
Viewing CSS Style of Browser
The question here is – what would be the result on a browser when the same element is styled in different ways? For example, assume you have defined the color of paragraph element in the following manner:
- Red in external stylesheet
- Green in internal style
- Blue in inline style
- Black in browser
What is the final color of paragraphs on the browser? The answer is, the paragraphs will be in blue color as defined in the inline style. CSS stands for cascading stylesheet, hence it applies the styles in a cascading manner with the following priority:
- First and highest priority for inline styles
- Second priority for internal styles
- Third priority for external styles
- And the last priority for browser style
These priorities help browser to pickup and apply the correct styles to the elements as in the above example, three other paragraph styles will be disabled. You can view the CSS style priorities with the use of developer console on the browser.
Checking Style Priority in Developer Console
Priority Within Same CSS
What would happen if you define the element with two styles within same CSS block or in a same file? Below are the rules for CSS cascading in such cases:
Last Selector
When the two selectors are same then the last style will take precedence over the first one. For example, if you define the style like below then the paragraph color will be in red.
p {color: blue;}
p {color: red;}
More Specific
The more specific selector rule will be applied than the generic style definition. For example, if you define the styles like below then the H1 element will be in blue color.
* {color: red;}
h1 {color: blue;}
Quick Fix
When you are modifying a bigger website files, it is difficult to understand the existing rule sets. As a quick fix you can suffix “!important” attribute in the CSS property value to ensure that value supersedes all other values. Going back to the above example, if you want the paragraph to be in green color then use “!important” attribute in the internal style.
Remember use of “!important” is not recommended as you are manually changing the priorities. The good practice is to use the styles in correct and proper order to reduce the amount of code on each page of your site.
Leave a Reply
Your email is safe with us.