Internal styles are CSS rules embedded directly within an HTML document's <head> section using the <style> tag. This method is suitable for styling single HTML pages, providing a quick way to apply styles without external files.
Example 1: Basic Text Styling
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Example</title>
<style>
/* Selects all paragraph elements */
p {
color: blue; /* Sets text color to blue */
font-size: 16px; /* Sets font size to 16 pixels */
}
</style>
</head>
<body>
<p>This paragraph will be blue and 16px.</p>
</body>
</html>
Explanation This example demonstrates how to set the color and font size for all <p> elements on the page. The CSS rules inside the <style> tag are applied globally to the HTML document.
Example 2: Styling a Specific Element by ID
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles ID Example</title>
<style>
/* Selects the element with id "header-title" */
#header-title {
text-align: center; /* Centers the text */
background-color: lightgray; /* Sets background color */
padding: 10px; /* Adds 10 pixels of padding around the text */
}
</style>
</head>
<body>
<h1 id="header-title">Welcome to Our Website</h1>
</body>
</html>
Explanation Here, we target a specific <h1> element using its id attribute. This allows for precise styling of individual elements within the HTML structure.
Example 3: Styling Multiple Elements by Class
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Class Example</title>
<style>
/* Selects all elements with the class "highlight" */
.highlight {
background-color: yellow; /* Sets background to yellow */
font-weight: bold; /* Makes the text bold */
}
</style>
</head>
<body>
<p class="highlight">This text is highlighted.</p>
<p>This text is normal.</p>
<span class="highlight">And this span is also highlighted.</span>
</body>
</html>
Explanation This example showcases how to apply the same style to multiple elements using a CSS class. Elements with the highlight class will have a yellow background and bold text.
Example 4: Combining Element and Class Selectors
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Combined Example</title>
<style>
/* Selects paragraph elements that also have the class "important" */
p.important {
color: red; /* Sets text color to red */
border: 1px solid red; /* Adds a red border */
padding: 5px; /* Adds padding inside the border */
}
</style>
</head>
<body>
<p class="important">This is an important paragraph.</p>
<p>This is a regular paragraph.</p>
</body>
</html>
Explanation This code demonstrates a more specific selector, targeting only <p> elements that also possess the important class. This allows for fine-grained control over your web page's design.
Example 5: Using Media Queries for Responsive Design
<!DOCTYPE html>
<html>
<head>
<title>Internal Styles Responsive Example</title>
<style>
body {
font-family: Arial, sans-serif; /* Sets a common font */
}
/* Styles applied when screen width is 600px or less */
@media (max-width: 600px) {
p {
font-size: 14px; /* Reduces font size on smaller screens */
color: green; /* Changes text color to green */
}
}
</style>
</head>
<body>
<p>This text will change style on smaller screens.</p>
</body>
</html>
Explanation This example illustrates using a media query within internal styles to create responsive designs. The paragraph's font size and color will adjust when the screen width is 600 pixels or less, optimizing for various devices.