Three ways to insert CSS
There are three the common ways to insert a stylesheet -:
- Inline style
- Internal style sheet
- External style sheet
- Inline style -: This is when you use the style attribute of an HTML element to specify the CSS rules for that element only. This method is useful when you want to apply a specific style to a single element, or when you want to test some CSS changes quickly.
For example:
<h1 style="color :blue; text-align:center;">This is a heading</h1>
<p style="color : red;">This is a paragraph.</p>
2. Internal style css -: We can include CSS rules directly within the <style> element in the <head> section of our HTML document. This method is useful for small, one-off styles and eliminates the need for an external file. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Our CSS rules here */
body {
background-color: #f0f0f0;
}
</style>
</head>
<body data-rsssl=1>
<!-- Our HTML content here -->
</body>
</html>
3. External style sheet -: With an external style sheet, we can change the look of an entire website by changing just one file. This is when we link to an external file that contains the CSS rules. We can use the <link> element in the <head> section of our HTML document to specify the location of the external style sheet file. This method is useful when we want to apply the same style to multiple web pages, as we only need to change one file to update the look of our website. For example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body data-rsssl=1>
<!-- our HTML content here -->
</body>
</html>
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
Here is how the “styles.css” file looks like:
body{
background-color : lightblue;
}
h1{
color : green;
margin-left : 20px;
}
Note:
Cascading Order : All the styles in a page will ‘cascade’ into a new “virtual” style sheet by the following rules, where number one has the highest priority:
- Inline style (inside an HTML element).
- External and Internal style sheets (in the <head> section)
- Browser default
So, an inline style has the highest priority, and will override external and internal styles and browsers defaults.
