Understanding the <style> Element
The <style> element allows CSS rules to be written directly inside an HTML document, making it possible to control the appearance and presentation of elements on that page.
The <style> element is normally placed in the document's <head>. The CSS written inside it can style headings, paragraphs, links, backgrounds, spacing, borders, and other visual aspects of the document without requiring a separate stylesheet file.
<style> Element Syntax
The style element contains CSS rules that apply to the HTML document.
<style>
h1 {
color: blue;
}
</style>Unlike void elements such as meta and link, the style element has both a start tag and an end tag. The CSS rules are written between them.
Where to Place the <style> Element
The style element is normally placed inside the document's head.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Webpage</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>My Webpage</h1>
</body>
</html>Keeping internal CSS in the document head separates the page's styling instructions from the content contained in the body.
Understanding CSS Rules
A CSS rule identifies the HTML elements to style and specifies the styles that should be applied to them.
p {
color: #333333;
font-size: 18px;
}In this example, p is the selector. It selects paragraph elements, while color and font-size are CSS properties with values that control their appearance.
The basic structure of a CSS rule is:
selector {
property: value;
}You do not need to understand every CSS property yet. The important concept at this stage is that HTML provides the document's structure and content, while CSS controls its presentation.
Using CSS in the <style> Element
CSS rules written inside a style element can affect matching elements throughout the document.
<style>
h1 {
color: #0088cc;
}
p {
font-size: 18px;
}
</style>With these rules, the browser displays the page's h1 elements using the specified color and its paragraphs using an 18-pixel font size.
The example below uses internal CSS to style several HTML elements. Edit the CSS values and HTML content to see how the appearance of the page changes.
Using Multiple CSS Rules
A single style element can contain many CSS rules that style different parts of the document.
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: #0088cc;
}
p {
line-height: 1.6;
}
</style>Each rule has its own selector and declarations. The browser evaluates the rules and applies them to the elements that match their selectors.
Keeping related CSS rules together makes the styling easier to read and maintain.
Styling with Classes
CSS does not have to style every element of the same type. A class can be added to selected HTML elements and used as a CSS selector.
<style>
.notice {
background-color: #eeeeee;
border: 1px solid #999999;
padding: 15px;
}
</style>The class is then assigned to an HTML element using the class attribute:
<p class="notice">This is an important notice.</p>The period before notice in the CSS identifies it as a class selector. Only elements with the matching class="notice" value receive these styles.
Classes are especially useful because the same class can be applied to multiple elements that should share the same presentation.
Internal CSS vs External CSS
Internal CSS is written inside a style element within the HTML document, while external CSS is stored in a separate stylesheet and connected to the document using the link element.
Internal CSS
<style>
h1 {
color: #0088cc;
}
</style>External CSS
<link rel="stylesheet" href="/css/styles.css">Internal CSS can be convenient for styles that belong to a single document, demonstrations, experiments, or small standalone pages.
External stylesheets are generally more practical when the same styles are shared across multiple pages because the CSS can be maintained in one file rather than repeated in every HTML document.
The <style> Element vs style Attribute
The style element and the style attribute both allow CSS to be applied to HTML, but they are used differently.
A style element contains CSS rules that can target one or more elements:
<style>
p {
color: #333333;
}
</style>The style attribute applies CSS declarations directly to a particular HTML element:
<p style="color: #333333;">This paragraph has an inline style.</p>Inline styles can be useful in limited situations, but placing reusable styles in a style element or external stylesheet generally keeps the HTML cleaner and makes the design easier to maintain.
Using Multiple <style> Elements
An HTML document can contain more than one style element, although a single organized stylesheet is often easier to maintain when the rules serve the same purpose.
<style>
h1 {
color: #0088cc;
}
</style>
<style>
p {
line-height: 1.6;
}
</style>CSS rules from the different style elements participate in the normal CSS cascade. If multiple rules apply to the same element, the browser determines the resulting styles according to CSS cascade rules.
The CSS cascade is an important subject of its own and will be covered in the CSS Tutorials. For now, keeping related internal styles together makes the document easier to follow.
Complete Internal CSS Example
The following document uses a style element to control the appearance of the page without using an external stylesheet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: #0088cc;
}
.notice {
background-color: #eeeeee;
border: 1px solid #999999;
padding: 15px;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>This paragraph uses the general page styles.</p>
<p class="notice">This paragraph also uses the notice class.</p>
</body>
</html>All of the CSS for this example is stored within the HTML document's style element and applies to matching elements in the page body.
Common <style> Element Mistakes
Problems with internal CSS often result from placing the style element incorrectly or from errors in the CSS written inside it.
- Forgetting the closing
</style>tag. - Writing ordinary HTML markup inside the
styleelement. - Forgetting braces, colons, or other required CSS syntax.
- Using a selector that does not match the intended HTML element.
- Repeating the same internal CSS across many HTML pages instead of using an external stylesheet.
- Confusing the
styleelement with thestyleattribute.
When an internal style does not appear as expected, check both the CSS syntax and whether the selector actually matches the HTML element you intended to style.
<style> Element Best Practices
Internal CSS works best when it is organized clearly and used for styles that reasonably belong within a single HTML document.
- Place the
styleelement in the documenthead. - Keep CSS formatting and indentation consistent so the rules are easy to read.
- Use meaningful class names that describe the purpose of the styled content.
- Keep related CSS rules organized together.
- Use external stylesheets when styles need to be shared across many webpages.
- Avoid unnecessary inline styles when a reusable CSS rule would be easier to maintain.
- Keep HTML responsible for structure and content while using CSS for presentation.
Learning to keep HTML structure separate from CSS presentation makes larger webpages and websites considerably easier to maintain.
Summary
The style element allows CSS rules to be included directly within an HTML document. It is normally placed in the document's head and can contain rules that style multiple elements throughout the page.
Internal CSS is useful for page-specific styling, demonstrations, and experimentation, while external stylesheets are generally better when styles need to be shared across multiple pages. Understanding the style element also introduces the important separation between HTML structure and CSS presentation.