By linking these files together, you can easily manage the look of your webpage by updating the CSS file, keeping your HTML clean and focused on content.
Using link element, we can link the styles sheets to an html page.
<link rel="stylesheet" type="text/css" href="style.css" />
This line links the external CSS file named styles.css to the HTML document. The rel="stylesheet" attribute specifies the relationship between the current document and the linked document. href="styles.css" points to the location of the CSS file.
Folder hierarchy
In general, it is good to keep css files in styles folder, and html files in html folder like below.
<link rel="stylesheet" href="../css/styles.css">
1. ../css/styles.css is a relative path to the CSS file.
2. ..: This indicates that the browser should go up one level in the directory structure from the current location of the HTML file.
3. css/: After going up one level, the browser navigates into the css folder.
4. styles.css: Finally, it points to the styles.css file inside the css folder.
Step 1: Write the following code in the index.html file.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Webpage</title> <!-- Link the external CSS file --> <link rel="stylesheet" href="../css/styles.css"> </head> <body> <h1>Welcome to My Webpage</h1> <p>This is my first webpage with an external stylesheet!</p> </body> </html>
<!DOCTYPE html>: This declaration defines the document as an HTML5 document.
<html lang="en">: The <html> tag is the root of the HTML document. The lang="en" attribute specifies the language of the document as English.
<head>: The <head> section contains metadata and links to external resources like stylesheets and scripts.
<meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is a universal character set that includes almost all characters from all languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage is responsive by setting the viewport to the width of the device.
<title>: Sets the title of the webpage, which appears in the browser tab.
<link rel="stylesheet" href="styles.css">: This line links the external CSS file named styles.css to the HTML document. The rel="stylesheet" attribute specifies the relationship between the current document and the linked document. href="styles.css" points to the location of the CSS file.
<body>: The <body> section contains the content of the webpage, which will be displayed to the user.
<h1> and <p>: These are HTML elements. <h1> is a heading tag, and <p> is a paragraph tag. The content inside these tags will be styled by the external CSS file.
Step 2: Create the CSS File
Write the following code in the styles.css file.
styles.css
/* styles.css - External stylesheet */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #333333; text-align: center; } p { color: #555555; font-size: 18px; }
Open the index.html file in your web browser. You can see a simple webpage with styled text.
No comments:
Post a Comment