Internal CSS refers to the method of including CSS (Cascading Style Sheets) code within the <style> tags of an HTML document. It allows you to define the style rules for specific elements directly within the HTML file. This CSS code affects only the HTML document in which it is defined, unlike external CSS which is stored in a separate file and can be used across multiple HTML documents.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* Internal CSS starts here */
body {
font-family: Arial, sans-serif;
background-color: #f3cfcf;
}
h1 {
color: blue;
}
p {
font-size: 16px;
color: #333;
}
/* Internal CSS ends here */
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This is an example of using internal CSS to style elements within an HTML document.</p>
</body>
</html>
output
Hover button
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* Internal CSS starts here */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.btn:hover {
background-color: #0056b3;
}
/* Internal CSS ends here */
</style>
</head>
<body>
<a href="#" class="btn">Click Me</a>
</body>
</html>
output
styling a Table
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* Internal CSS starts here */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Internal CSS ends here */
</style>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* Internal CSS starts here */
.nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
}
.nav li {
display: inline-block;
margin-right: 10px;
}
.nav li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
.nav li a:hover {
background-color: #555;
}
/* Internal CSS ends here */
</style>
</head>
<body>
<ul class="nav">
<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>
</body>
</html>
output
styling a form
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* Internal CSS starts here */
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
/* Internal CSS ends here */
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>
output
0 Comments