An internal style sheet is CSS tucked inside one HTML page. Put a <style> element in the page’s <head>, then write rules that tell selected elements how to look. It is like giving one page its own small wardrobe. section 7.4
Each style rule has three small parts:
- A selector chooses the elements to style, often a tag name such as dt. section 7.4
- A declaration block uses braces to hold one or more declarations. section 7.4
- Each declaration pairs a property with a value, and semicolons separate declarations. section 7.4
Style every definition term at once
Place this in the head: <style> dt { font-size: 20px; font-weight: bold; } </style> Every dt element on that page receives the same size and bold text. Change the value once, and all of those elements change together. section 7.4 section 7.6
Internal styles are much easier to maintain than repeating inline styles on many elements. They suit a single-page site especially well; across many pages, copying the same <style> element becomes repetitive, so an external style sheet is more practical. section 7.3 section 7.6
<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 rule-shaped template as a fill-in-the-blanks guide: selector first, declarations inside braces, then another rule if needed. section 7.4
When two style sources disagree, the cascade gives an inline style greater weight than an internal style sheet. For example, an inline blue color overrides an internal rule that sets the same div text to red. section 19.26
