The style element is a small CSS workspace inside an HTML page. It belongs in the head section and holds the rules that control how page elements look. section 2.2 section 7.4
Listing 2.1 A Basic HTML Structure for Starting Any Web Page Project
<!DOCTYPE html> #1
<html lang="en"> #2
<head> #3
<meta charset="utf-8"> #4
<title></title> #5
<style></style> #6
</head> #3
<body> #7
</body> #7
</html> #2
See the basic page structure with the style element placed between the opening and closing head tags. section 2.2
Think of the style element as a set of instructions with three small parts:
- Choose a selector, such as an HTML tag or a class selector, to identify the elements you want to style. section 7.4
- Add a declaration block inside braces. section 7.4
- Place one or more property-value pairs inside the block, separating them with semicolons. section 7.4
<style>
selectorA { #3 #2
propertyA1: valueA1; #1
propertyA2: valueA2; #1
... #3
} #2
selectorB { #4
propertyB1: valueB1; #4
propertyB2: valueB2; #4
... #4
} #4
...
</style>
Use this pattern to see how the style element wraps selectors, declaration blocks, and CSS declarations. section 7.4
A focused styling job
An internal style sheet can target every dt element and give each one a larger font size and bold formatting. The style element keeps those instructions together in the page head. section 7.4
