There are various approaches to adding CSS rules to HTML. In this post, I will detail the multiple approaches to doing this.
External stylesheets are considered the preferred way of handling CSS. This is because it is much easier to change one style in your CSS file than to change the styles throughout all the pages.
When a user first views your website page, the browser will download both the HTML and linked CSS file. If the user leaves the page and returns to it, the browser will only need to download the HTML as the external stylesheet is cached.
Adding an external CSS stylesheet is done by placing a <link> element in an HTML document.
The <link> element must have a rel attribute and an href attribute. The rel attribute should be set to "stylesheet" and the href attribute should be set to the absolute or relative path to the stylesheet.
It is suggested that the <link> tag be put in the HTML file’s <head> tag so that the styles are loaded before the elements themselves are loaded. If the <link> tag is not put in the <head> tag, users will see a flash of unstyled content before the page loads.
Example
example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>
External stylesheet
</h1>
</body>
</html>
style.css
h1 {
color: blue;
font-size: 1.5rem;
font-family: “Ubuntu”, serif;
}1
You can add multiple CSS files to your HTML page.
<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="second.css" />
The <style> tag is used to put CSS directly into HTML documents. The <style> tag works just like an external stylesheet does. The only difference is the location of the CSS. Again, the <style>tag should be placed in the <head>.
example.html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 1.5rem;
font-family: “Ubuntu”, serif;
}
</style>
</head>
<body>
<h1>
Internal stylesheet
</h1>
</body>
</html>
Inline styles are used to apply styles directly to an element. This is not a recommended practice as it can clutter up the code. It is better to make a separation of concerns by placing them in different areas.
Inline styles override both external and internal styles. This can be useful in some circumstances but should be avoided as it will be harder to maintain.
Example
<h1 style="color: blue; font-size: 1.5rem; font-family: “Ubuntu”, serif;">
Inline styles
</h1>
The @import at-rule is used to import styles from other style sheets. You can use the @import at-rule with internal and external styles.
Internal
<style>
@import url(“style.css”);
</style>
External
example.css
@import “style.css”;
JavaScript and jQuery offer methods of changing CSS properties through an element’s style property.
JavaScript
let element = document.getElementById(“example”);
element.style.color = “blue”;
element.style.fontFamily = “Ubuntu, serif”;
Note that we list JavaScript style properties in lower camel case instead of lower-case.
jQuery
Changing CSS properties with jQuery is much more compact.
$(“example”).css(“color”, “blue”);
$(“#example”).css({
“color”: “blue”,
“font-family”: “Ubuntu, serif”
});
jQuery css() method - https://www.w3schools.com/jquery/jquery_css.asp
HTML DOM Style Object - https://www.w3schools.com/jsref/dom_obj_style.asp