OneBite.Dev - Coding blog in a bite size

connect css to html

Code snippet for how to connect css to html with sample and detail explanation

Title: Connecting CSS to HTML

CSS, or Cascading Style Sheets, is a style sheet language used to describe the look and formatting of a document written in HTML. By connecting CSS to an HTML file, you can drastically improve the visual experience of your website.

Here’s a simple and straightforward code snippet that demonstrates how to connect your CSS to HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a sample sentence for my webpage.</p>
</body>
</html>

In this example, “styles.css” is the CSS file which houses all the styling information.

Code Explanation: Connecting CSS to HTML

In order to link CSS to a HTML file, you need to follow the steps below:

  1. Creating a CSS file: Write up your styling codes on a Notepad or any text editor and save it with a “.css” extension. For our code example, the file is named “styles.css”.

  2. Adding a ‘link’ element inside the ‘head’ tag of your HTML file: The <link> element in HTML allows you to link to external stylesheets. This should be placed inside the <head> tag.

  3. Setting ‘rel’ attribute as ‘stylesheet’: The ‘rel’ attribute specifies the relationship between the HTML page and the linked file. By setting ‘rel’ as ‘stylesheet’, the browser understands that the linked file is a CSS stylesheet.

  4. Specifying the type of the linked file: The ‘type’ attribute specifies the MIME type of the linked document. In our case, it’s ‘text/css’ as the file is a CSS file.

  5. Locate your CSS file using ‘href’: The ‘href’ attribute points to the location of the linked document. It should point to the CSS file you created in the first step.

Once this is done, your CSS file is effectively linked to your HTML file. Any changes made in your CSS file will apply to your HTML file. Remember to always check the path to your CSS file to avoid any broken links.

By effectively using CSS, you can ensure a more enriching user experience for your website’s visitors.

css