OneBite.Dev - Coding blog in a bite size

link css file

Code snippet for how to link css file with sample and detail explanation

Linking a CSS File

CSS predefines the style of a webpage’s elements, enhancing the user interface and overall browsing experience. This simple guide will demonstrate how to link a CSS file to an HTML document.

Code snippet: HTML Document with Linked CSS

Let’s start by understanding the piece of code required to link your CSS file to an HTML file.

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="mystyles.css">
   </head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

Code Explanation for HTML Document with Linked CSS

The magic happens inside the <head> tags of the HTML document. The <link> tag is used to link various files to HTML files. In our case, we are linking a CSS file.

  1. The rel attribute signifies the relationship between the HTML file and the linked file. In this case, it’s set to “stylesheet” because the linked file is a style sheet for the HTML document.

  2. The type attribute is used to specify the MIME type (Multipurpose Internet Mail Extensions) of the linked document. For a CSS file, this attribute should always be set to “text/css.”

  3. The href attribute specifies the URL of the linked file. If the CSS files are in the same directory/folder as your HTML file, you can simply state the name of the file. However, if your CSS file is located in another folder, you would have to specify its location.

And that’s it! It’s a fundamental yet impressive skill to acquire as you advance your HTML/CSS knowledge.

css