Read the full article here:
In this article, we'll discuss three methods to add or link CSS to an HTML document:
- Inline styles
- The style tag
- External stylesheets
Inline Styles
Inline styles in HTML allow you to apply custom CSS styling rules directly to elements within an HTML document.
To apply inline styles, you need to add the style attribute to the HTML element you wish to style. The style attribute should contain one or more CSS property-value pairs enclosed within curly braces. Below is an example:
<h2 style="color: red; font-size: 24px;">Hello World</h2>
Style Tag
Another common way of adding CSS to your document is using the style tag. The Style tag in HTML allows you to define CSS rules directly inside an HTML document (usually the head of the markup). This method is common when working on single page website where there is less styling needed.
<!DOCTYPE html>
<html>
<head>
<title>Style Tag Example</title>
<style>
h1 {
color: blue;
font-size: 36px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
One significant advantage of using the Style tag is that you can define specific styles for different media types. For example, you can define different styles for printing, screen, or mobile views.
External Stylesheets
An external stylesheet is a separate CSS file that is linked to an HTML document using the link tag. This file typically has a .css extension and contains the style rules for the entire website. Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
In the example above, the link tag is used to point to style.css, which is a separate file that contains CSS rules for the website. However, keep in mind the inline styles have the highest priority so they will override the stylesheet.
Check out this post here.
Also, have a look at my blog.
Thanks!
Top comments (5)
As an experienced blogger and SEO expert, I've always found that integrating CSS into my HTML pages breathes life into them, providing them with an appealing look and feel. The process is relatively simple, and the results are incredibly rewarding.
Firstly, let's talk about the three methods you can use to add CSS: inline, internal, and external. Each has its purpose, but my personal favorite is the external method. As an SEO expert, I understand the importance of page speed for Google rankings, and keeping my CSS external helps keep my HTML clean and load faster.
Creating an external CSS file is straightforward. You just need to create a new .css file (for example, 'styles.css'), and then link it in your HTML document within the head tags like this:
<link rel="stylesheet" type="text/css" href="styles.css">.Then you can start defining your styles in the CSS file. The magic of CSS is that changes made in this file will reflect across all HTML pages linked to it. This is especially helpful when making site-wide style changes.
Of course, there are times when inline or internal CSS might be necessary, particularly for style-specific elements. But in general, it's best to keep your styles in an external file for better website performance. As a blogger, ensuring your site is visually appealing and SEO-friendly will lead to an engaging experience for your readers, and keep them coming back for more.
Great tip - thanks for sharing.
Something that's worth noting is that inline styles will override Stylesheets. Also, if stylesheets are linked, they will be loaded separately - there might be a possibility of seeing a 'Flash of Unstyled Content'.
Thanks for the info! I have updated the article!
No problem - glad I could help.
I find external CSS to slow down page loading, especially for first time visitors, because they need to wait for it to load. Unless you have a really huge CSS used in many pages, seems better to integrate it.