Categories
CSS can be inserted into an HTML document using three different methods:
1) External CSS: This method involves creating a separate CSS file (e.g., styles.css) and linking it to your HTML file using the <link> element in the <head> section. This is the recommended and most commonly used method as it keeps your CSS code separate from your HTML, making it easier to manage and maintain.
Step 1: Create a new CSS file (e.g., styles.css) and add your CSS code there.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
/* Add more CSS rules as needed */
Step 2: Link the CSS file to your HTML document.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="path/to/styles.css">
</head>
<body>
<!-- Your HTML content goes here -->
<h1>Welcome to My Website</h1>
</body>
</html>
Make sure to replace "path/to/styles.css" with the actual path to your CSS file.
2) Internal CSS: With this method, you can include CSS rules directly within the <head> section of your HTML document. Use the <style> element to enclose your CSS code.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
/* Add more CSS rules as needed */
</style>
</head>
<body>
<!-- Your HTML content goes here -->
<h1>Welcome to My Website</h1>
</body>
</html>
While internal CSS can be useful for small styles specific to a single page, it is generally not recommended for larger projects as it mixes content with presentation, making it harder to maintain.
3) Inline CSS: Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This method should be used sparingly, as it can lead to reduced code readability and maintainability.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your HTML content goes here -->
<h1 style="color: blue;">Welcome to My Website</h1>
</body>
</html>
While inline CSS might be useful for quick testing or making small adjustments, it's generally not recommended for larger-scale projects.
In summary, the best practice is to use external CSS by creating a separate CSS file and linking it to your HTML document using the <link> element. This method keeps your code organized and makes it easier to maintain and update styles across multiple pages.