<style> external style

by

To apply styles to your HTML elements using an external CSS file, you’ll need to link it within the <head> section of your HTML document. Here’s how:

1. Create the CSS File

  • Create a new file with a .css extension (e.g., styles.css).
  • Write your CSS rules inside this file:
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

2. Link the CSS File in HTML

  • Open your HTML file and add the following line within the <head> section:
<link rel="stylesheet" href="styles.css">
  • The rel="stylesheet" attribute specifies the relationship between the HTML document and the linked file.
  • The href attribute indicates the path to the CSS file.

Complete HTML Example

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph with some   
 text.</p>
</body>
</html>

Important Considerations

  • File Path: Ensure the href attribute points to the correct path of your CSS file relative to the HTML file. If they are in the same directory, you can use the filename directly. If they are in different directories, you’ll need to specify the relative path.
  • Multiple CSS Files: You can link multiple CSS files by adding more <link> tags within the <head> section.
  • CSS Order: The order of linked CSS files matters. Later styles can override earlier ones.
  • Browser Compatibility: While most modern browsers support external CSS, older browsers might require additional considerations or polyfills.