Skip to main content

Methods For Including Css In Html Document

by Rustcode
Ways To-Write-CSS-In-HTML-Document

Before starting this article, let me tell you that both html and css are different languages and their work is also different. Html is a hypertext markup language that shows our content on a web browser in a sequence of our HTML tags. But if we talk about CSS, It is Beautifying and aligning HTML content that is showing on the browser. In short, we can say that CSS is used to design our user interface and create a smooth user experience.

After knowing the functionality of HTML and CSS, Now our next step is how to add CSS to our HTML document so that we can create an attractive web page and maybe develop a good user experience. If we want to add CSS to the HTML document then we have three methods which we will discuss in detail now. So let's start.

Methods:

  1. Inline
  2. Internal
  3. External

These three methods are used to add CSS in any HTML document which is a beautified user interface. Now we will discuss all three methods one by one. We are assuming that you know the basics of html and css already.

1. INLINE CSS

  • Inline css is directly added in html starting tag with the style attribute.
  • Inline css is generally applied for specific effects on particular elements.
  • By inline css, you can apply any kind of css property on any html element.
  • This method is not recommended because it can make your HTML code difficult to maintain and reuse.

EXAMPLE:

<!DOCTYPE html>
<html>
<head>
</head>

<body>

  <h1 style="color:black; text-align:center;" >Heading.</h1>
  <p style="color:green; font-size: 12px;" >Paragraph.</p>

</body>
</html>


2. INTERNAL CSS

  • Internal css is added in html between the head tag using the <style> element.
  • In this way, the html and css are written in the same file.
  • In between style tags we write css code.
  • This method is useful for small projects or when you want to apply styles to a single page only.

EXAMPLE: 

<!DOCTYPE html>
<html>
<head>
 <style>
  h1{
    color:black; 
    text-align:center;
  }
  p{
    color:green; 
    font-size: 12px;
  }
 </style>
</head>
<body>

  <h1>Heading</h1>
  <p>Paragraph.</p>

</body>
</html>


3. EXTERNAL CSS

If we want to add external css in any html document, we need to create an external css file. In that file, we will write css code and then we will link that file with our html document. Here We are creating an "externalstyle.css" file which has all css code and that file we will connect with html document.

  • You need to create a separate css file.
  • Link that file to html document using the <link> element.
  • This is the recommended method because it allows you to easily reuse your styles across multiple html pages.

EXAMPLE:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="externalstyle.css">
</head>
<body>

<h1>Heading</h1>
<p>Paragraph.</p>

</body>
</html>


This is our HTML file, I have already included CSS file as you can see and now we will create our "externalstyle.css" file.

externalstyle.css

h1{
  color:black; 
  text-align:center;
}
p{
  color:green; 
  font-size: 12px;
}

So these three ways to insert CSS code in HTML document, now I want to share one additional tip that is related to this article and very very important for front-end web developer.

- Inline CSS has priority after that internal and external CSS have the lowest priority.

Conclusion:

Finally, you have learned how many methods to insert CSS in an html document. And which type of CSS insertion has more priority. Bootstrap is an example of external CSS insertion.

If this article is useful and informative for you, share it. And if you have any doubt, please leave a comment.

Comments

Post a Comment