OneBite.Dev - Coding blog in a bite size

include css file in html

Code snippet for how to include css file in html with sample and detail explanation

Title: Including a CSS File in HTML for Better Webpage Aesthetics

Welcome to this insightful article on how to include a CSS file in your HTML. We are going to guide you through this seemingly complex but essential web development process in the simplest terms possible.

Code snippet for Including a CSS File in HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- Content of your webpage goes here -->
</body>
</html>

Code Explanation for Including a CSS File in HTML

To properly render your webpage with your customized styles, there’s a need to link the CSS file containing your styling rules to your HTML file. This is mainly done in the head section of your HTML document.

Let’s go through the code snippet step by step to understand exactly how to link your CSS file to your HTML.

  1. <!DOCTYPE html>: The doctype html declaration should be the very first thing in your HTML document, before the <html> tag. It is an instruction to the web browser about what version of HTML the document is written in.

  2. <html>: This is the root of your HTML document.

  3. <head>: The head tag contains information about the HTML document that isn’t visible on the page. It is in this section that we link our CSS file.

  4. <link rel="stylesheet" type="text/css" href="styles.css">: This is the critical part where you link your CSS file to your HTML document. The href attribute specifies the path to the CSS file. Please note that the filename is ‘styles.css’. Make sure it matches the name of your CSS file. rel="stylesheet" tells the browser that the linked document is a CSS stylesheet.

  5. <body>: The body section contains the actual content of your HTML document, such as text, images, video, games, playable content, etc.

Remember that the path to your CSS file mentioned in the href attribute should be relative to the HTML file. If your CSS file is located in a different directory, you would need to specify the correct path in the href attribute such as href="css/styles.css".

In this way, the styles defined in the CSS file will be applied to the HTML document and hence your webpage can be rendered as per your customized styles. Get started with beautifying your HTML page using CSS and happy coding!

css