OneBite.Dev - Coding blog in a bite size

add css file in html

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

Title: A Beginner’s Guide to Adding a CSS File in HTML

Adding Cascading Style Sheets (CSS) to Hypertext Markup Language (HTML) is a vital part of website and web app development. Enhancing the visual design and usability of web pages, CSS is used to control the stylistic layout - from fonts and colours to spacing and sizing.

Code Snippet: Linking CSS and HTML

To include a CSS file in an HTML file, you’ll need to utilize the <link> tag. This tag is placed within the <head> section of your HTML file.

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <!-- Your content here -->
</body>
</html>

In the code snippet, the ’’ tag is being used to connect the CSS file to the HTML file. This tag has three important attributes:

  1. rel: This attribute stands for ‘relation’, defining the relationship between the HTML and linked document. In this case, rel="stylesheet" indicates that the linked document is a style sheet.

  2. type: This attribute specifies the MIME type of the linked document. When linking a CSS file, type="text/css" should be used.

  3. href: This stands for ‘HyperText Reference’ and it points to the location of the linked document. This should be set to the path of your CSS file. In our example, the CSS file named ‘styles.css’ is located in the same folder as the HTML file.

Remember, the browser reads your code from top to bottom, so it is good practice to link your CSS file in the <head> section of your HTML file. This allows the styles to be applied as the page is rendering, enhancing user experience as they won’t see a flash of unstyled content.

That’s how to add a CSS file in HTML. Experiment with the attributes, link more CSS files, and observe how the document behaves differently! Be adventurous in your coding journey.

css