OneBite.Dev - Coding blog in a bite size

link css

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

Link CSS To HTML : A Comprehensive Guide

Cascading Style Sheets (CSS) is an essential component in modern web design. This article is designed to help beginners understand how to link CSS to HTML with an easy guide and code examples that you can follow along.

Code snippet for linking CSS

First, let’s take a look at how a basic CSS file gets linked to an HTML file.

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This page is styled with external CSS.</p>
</body>
</html>

The important line here is the <link> element in the <head> of our HTML page.

Code Explanation for linking CSS

Let’s dive a bit deeper into how the code above works.

  1. <!DOCTYPE html>: This is the document type declaration; it’s not a HTML tag but an instruction to the web browser about the version of HTML the page is written in. In this case, we’re using HTML5.

  2. <title>My First Web Page</title>: This tag sets the title of your web page, which appears on the title bar of the browser or in the browser tab.

  3. <link rel="stylesheet" type="text/css" href="styles.css">: This is where the magic happens. This tag tells the browser that we’re linking a stylesheet to our HTML file. The rel attribute specifies relationship between the HTML page and the linked resource. Here, it’s a “stylesheet”.

    The type attribute provides the MIME type of the linked resource, which is “text/css” for CSS files. The href attribute specifies the URL of the linked resource, which should be the path to your CSS file. In our case, it’s a file called “styles.css” in the same directory as our HTML file.

  4. <h1> and <p>: These tags define a heading and a paragraph respectively on your page.

In conclusion, the <link> tag is a crucial element for linking a CSS file to your HTML. Remember, the path in the href attribute should be correct in order to properly style your webpage.

css