Cascading Style Sheets (CSS) are used to design the layout of a webpage.
You can set an element’s style either in the HTML document itself, by adding an external CSS file, or by using JavaScript.
There are three ways CSS can be applied to an HTML document:
- Inline – by using the style attribute inside the HTML elements to be styled
- Internal – by using a <style> element in the document’s <head>
- External – by using a <link> element which links to an external CSS file
All three are explored below.
To set the inline style, simply set the style attribute on the HTML element as follows:
HTML
<h2 class="h2colored" style="color:blue">
I'm blue
</h2>
In the example above, the <h2> element’s text will appear blue on the user’s screen.
Note: Inline CSS is the most specific, and thus has precedence over the other two approaches. Inline CSS overrides most other CSS declarations.
To set an internal style that applies to elements in the entire HTML document, you can add a <style> element to the document’s <head> element, as follows:
HTML
<head>
<title>Document</title>
<style>
.example {
color: blue;
}
</style>
</head>
<body>
<h1 class="example">
I'm blue
</h1>
</body>
In the example above, every HTML element that has the class “example” will appear blue on the user’s screen.
Note: It is possible to use elements like <h1> under the <style> tag as well.
You can also set the document’s CSS by linking to an external stylesheet. To do so, include a link to the CSS file in the document’s <head> element, as follows:
HTML
<head>
<link rel="stylesheet" href="/style/style.css">
</head>
The href attribute should contain the name and location of the CSS file you wish to add to the document. This CSS file contains information on the styles to be applied to your document – below is an example:
CSS
.exmaple {
color: blue;
}
There are a few ways to set an HTML element’s style with JavaScript.
The most direct method is by using the style property, as follows:
JavaScript
// Enlarge font size of an element
largeFonts();
function largeFonts() {
const el = document.querySelector('p');
el.style.fontSize = '2rem';
}
HTML
<p>
Difficult to read?
</p>
The above code applies a style that makes the <p> element’s text appear larger on the user’s screen.
Syntax
Below is the syntax for manipulating the style property on an HTML element using JavaScript:
Element.style.CSSproperty = value
Element: An HTML element
CSSproperty: a valid CSS property (e.g. color).
Note: While using the style property, CSS properties are written in camelCase and not with the more standard snake-case.
value: the value must be a string that contains information that matches the expected CSS property requirements.
Note: You can only use the style property on single elements. The document.querySelector() method returns the first element that matches the selector (e.g. p). The return value from this function will always be a single element or, if no matching element is found, null.
Note: Using the style property in this way adds inline styling to the element.
There are two other ways to set style using JavaScript. The first is to use the setAttribute() method. The second is by adding a class using the add() method of the classList property. The class you add can then be handled using external CSS styling.
Related Articles
JavaScript – How to Use setAttribute
Explore recent posts
//Explore recent posts
//
2 -min read
4 -min read
32 -min read
More How-to's
//3 -min read
4 -min read
5 -min read