EXTERNAL CSS
Open index.html in a text editor and add the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<button class="my-button">Click Me</button>
</body>
</html>
/* styles.css */
h1 {
color: blue;
}
p {
font-size: 18px;
}
.my-button {
background-color: yellow;
color: black;
padding: 10px 20px;
border-radius: 5px;
}
In the example above, we link the external CSS file (styles.css) to the HTML file using the <link> tag inside the <head> section. The href attribute specifies the path to the CSS file.
The CSS file contains the styles for the HTML elements. In this example, we've defined a blue color for <h1> headings, a font size of 18 pixels for <p> paragraphs, and a yellow background color, black text color, padding, and border radius for the button with the class .my-button.
When you open index.html in a web browser, it will apply the styles defined in styles.css to the HTML elements.
output :
HTML FILE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS FILE
/* styles.css */
.navbar {
background-color: #333;
color: #fff;
padding: 10px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
margin-right: 10px;
}
.navbar a {
color: #fff;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
OUTPUT
HTML FILE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<br>
<input type="submit" value="Submit" class="submit-button">
</form>
</body>
</html>
CSS FILE
/* styles.css */
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
.submit-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
OUTPUT
0 Comments