External stylesheets are the most recommended way to apply CSS to your web pages. They separate your content (HTML) from your styling (CSS), making your code cleaner, more maintainable, and improving website performance. This separation is crucial for efficient web development.
Example 1: Linking a basic external stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Stylesheet Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This paragraph will be styled by the external stylesheet.</p>
</body>
</html>
Explanation: This HTML code links to an external CSS file named style.css using the <link> tag within the <head> section. The rel="stylesheet" attribute specifies the relationship as a stylesheet, and href="style.css" points to the location of the CSS file.
Example 2: Specifying a media type for the stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Stylesheet Example</title>
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<h1>Check out our print-friendly page!</h1>
<p>This content has different styles for screen and print.</p>
</body>
</html>
Explanation: Here, two external stylesheets are linked. The media attribute is used to apply print.css only when the page is printed and screen.css only when viewed on a screen, optimizing user experience across devices.
Example 3: Linking a stylesheet from a different directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directory Stylesheet Example</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h2>Styling from a separate folder</h2>
<p>Keeping CSS organized in a dedicated folder is good practice.</p>
</body>
</html>
Explanation: This example demonstrates linking a stylesheet (main.css) that resides within a css subdirectory. This practice helps in organizing project files and maintaining a clean file structure.
Example 4: Using an absolute URL for an external stylesheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute URL Stylesheet</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
<h3>Normalized Styles</h3>
<p>This page uses a CSS reset from a CDN to ensure consistent rendering across browsers.</p>
</body>
</html>
Explanation: This code links to an external stylesheet using an absolute URL, typically from a Content Delivery Network (CDN). This is common for popular libraries like CSS resets or frameworks, leveraging faster loading times.
Example 5: Linking multiple external stylesheets
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Stylesheets</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
</head>
<body>
<h1>Styled with multiple CSS files</h1>
<p>Layering stylesheets allows for modular and scalable designs.</p>
</body>
</html>
Explanation: This demonstrates linking multiple external stylesheets. The browser applies styles in the order they appear, allowing for modular design where theme.css can override or extend styles from base.css. This improves maintainability and scalability for complex projects.