0
0
CSSmarkup~5 mins

Linking CSS to HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction
Linking CSS to HTML lets you style your web page by connecting a separate CSS file to your HTML file.
When you want to keep your style rules separate from your HTML content.
When you want to reuse the same styles on multiple web pages.
When you want to make your HTML file cleaner and easier to read.
When you want to update the look of your website by changing just one CSS file.
Syntax
CSS
<link rel="stylesheet" href="styles.css">
Place the tag inside the section of your HTML document.
The href attribute points to the CSS file you want to use.
Examples
This links a CSS file named styles.css located in the same folder as your HTML file.
CSS
<head>
  <link rel="stylesheet" href="styles.css">
</head>
This links a CSS file inside a folder named css.
CSS
<head>
  <link rel="stylesheet" href="css/main.css">
</head>
This links to a CSS file hosted on another website.
CSS
<head>
  <link rel="stylesheet" href="https://example.com/style.css">
</head>
Sample Program
This example shows an HTML file linking to a CSS file named styles.css. The CSS styles the heading and paragraph with colors and fonts.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Link CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This paragraph will be styled by CSS.</p>
</body>
</html>

/* styles.css */
h1 {
  color: darkblue;
  font-family: Arial, sans-serif;
}
p {
  color: darkgreen;
  font-size: 1.2rem;
}
OutputSuccess
Important Notes
Make sure the path in href is correct, or the styles won't apply.
You can link multiple CSS files by adding more tags.
Browsers load CSS files before showing the page, so styles appear immediately.
Summary
Use the <link> tag inside <head> to connect CSS to HTML.
The href attribute tells the browser where the CSS file is.
Linking CSS keeps your styles separate and reusable.