DEV Community

Cover image for How to Add CSS to your HTML Pages
Saleh Mubashar
Saleh Mubashar

Posted on • Originally published at discover.hubpages.com

How to Add CSS to your HTML Pages

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
webys profile image
Nicoletta Catalucci

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.

Collapse
 
ant_f_dev profile image
Anthony Fung

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'.

Collapse
 
salehmubashar profile image
Saleh Mubashar

Thanks for the info! I have updated the article!

Collapse
 
ant_f_dev profile image
Anthony Fung

No problem - glad I could help.

Collapse
 
danrabbit profile image
danrabbit

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.