How to override inline css with external or internal css?

How to override inline css


Inline css is used to override any css styles we write either internal or external. But the question is, if we need to override then how to override inline css styles with external or internal css???


First, let me explain the difference between internal, external and inline css styles with few examples.


Internal CSS


The internal css style is used mostly when style needs to be applied only single HTML page.

Internal css style is enclosed between style tag with attribute type. See the following example for internal css.

Example for Internal CSS:

<!DOCTYPE html>
<html>
<head>
<title>Stuff Around The Web</title>
<style type="text/css">
body {
  background-color: #f2f2f2;
}
h2 {
  color: #222222;
  text-align: center;
}
p{
  font-size: 14px;
  text-align: center;
}
</style>
</head>
<body>
<h2>What is Internal CSS?</h2>
<p>The internal css style is used mostly when style needs to be applied only single HTML page.</p>
</body>
</html> 


External CSS

The external css styles are added in a separate file which is saved with .css extension and linked inside the HTML file using the link HTML tag. See its example.

external.css

body {
  background-color: #f2f2f2;
}
h2 {
  color: #222222;
  text-align: center;
}
p{
  font-size: 14px;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Stuff Around The Web</title>
<link rel="stylesheet" href="external.css" />
</head>
<body>
<h2>What is External CSS?</h2>
<p>The external css styles are added in a separate file.</p>
</body>
</html> 

Inline CSS

Inline css is used to apply styles to any element and in most cases to override css styles. It is applied by adding an attribute named style to the HTML elements.

See the following example.

<!DOCTYPE html>
<html>
<head>
<title>Stuff Around The Web</title>
</head>
<body style="background-color: #f2f2f2;">
<h2 style="color: #222222;text-align: center;">What is Inline CSS?</h2>
<p style="font-size: 14px;text-align: center;">The internal css style is used mostly when style needs to be applied only single HTML page.</p>
</body>
</html> 


Finally let me show you how to override inline css styles with external or internal css?

In the above example, we have applied the color #222222 i.e black for the h2 heading using inline css. What if you want to override that black color with red (#ff0000) but cannot remove the inline css. See the following example for how to do it.

<!DOCTYPE html>
<html>
<head>
<title>Stuff Around The Web</title>
<style type="text/css">
h2 {
  color: #ff0000!important;
  text-align: center;
}
</style>
</head>
<body style="background-color: #f2f2f2;">

<h2 style="color: #222222;text-align: center;">How to override inline css styles with external or internal css?</h2>
<p style="font-size: 14px;text-align: center;">The internal css style is used mostly when style needs to be applied only single HTML page.</p>

</body>
</html> 


You see what I have done here 🙂

I have used !important with the style, it will override the inline css.

I hope it may help someone. If it helped you please consider sharing to help others.

Liked it? Please Share:

Author: Haroon

Leave a Reply

Your email address will not be published. Required fields are marked *