Internal CSS
Internal CSS is a method of adding CSS styles to an HTML document by defining the styles within the head section of the HTML document. This method is useful when you want to apply styles to multiple elements throughout the HTML document, without affecting other pages on the website.
To add internal CSS, you need to define the styles within a <style> tag within the head section of the HTML document. For example, to make the text of all <h1> elements red and center-aligned, you would add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h1>Welcome to my website!</h1>
</body>
</html>In this example, the CSS styles for <h1> elements are defined within the <style> tag in the head section of the HTML document. This will apply the specified styles to all <h1> elements within the body of the HTML document.
It’s important to note that internal CSS styles can be overridden by inline or external CSS styles. Therefore, it’s important to have a consistent and organized way of applying CSS styles to ensure that styles are applied consistently throughout the website.