Struggling with applying your own CSS while using template? Here you go
To give boost start to most of web development projects, there are thousands of free as well as paid templates available. Most of the time, to save time and efforts developers tends to start their project with any provided template from the internet.
However, while using most of the freely provided templates, developer couldn’t be satisfied with all parts of the design. In that regards, he/she would want to add his/her own custom CSS to the project. It become tricky sometimes, as in a template each component is designed in unified way through out the project, so sometimes our custom CSS might be overruled by the default CSS coded already with template.
So what to do, then?
Well don’t be confused, I have got you covered. As some of you might not know that CSS works in 3 ways: internal, external, and inline styles.
Inline styling is the highly prioritized from other styles of any component but you cannot write all the custom CSS inline for every component, right?
So what you can do is, go for internal styling which could be something like this:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>In this way, any styles set by template would be overruled, if you add your custom CSS internally.
Hope this was helpful for you, let me know below in comments.
See ya, till next time :)
