W3.CSS Defaults
Good Styles by Default
W3.CSS gives HTML elements clean and readable default styles.
You can create a good-looking page before adding any W3.CSS classes.
Readable by Default
W3.CSS uses simple defaults designed to make text easy to read.
- The default font size is 15px
- The default font is Verdana
- The default line height is 1.5
Example
<h1>My Website</h1>
<h2>Welcome</h2>
<p>This page uses the default W3.CSS styles.</p>
Try it Yourself »
HTML Headings
W3.CSS gives all HTML headings a consistent font and size.
Use headings according to their meaning and document structure.
Heading 1 (36px)
Heading 2 (30px)
Heading 3 (24px)
Heading 4 (20px)
Heading 5 (18px)
Heading 6 (16px)
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try it Yourself »
| Heading | Default Size |
|---|---|
<h1> |
36px |
<h2> |
30px |
<h3> |
24px |
<h4> |
20px |
<h5> |
18px |
<h6> |
16px |
Font Size Classes
Headings should be used for headings, not to make text larger.
Use the W3.CSS font-size classes when you want to change the size of other text.
w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Example
<p class="w3-tiny">w3-tiny</p>
<p class="w3-small">w3-small</p>
<p class="w3-medium">w3-medium</p>
<p class="w3-large">w3-large</p>
<p class="w3-xlarge">w3-xlarge</p>
<p class="w3-xxlarge">w3-xxlarge</p>
<p class="w3-xxxlarge">w3-xxxlarge</p>
<p class="w3-jumbo">w3-jumbo</p>
Try it Yourself »
Defaults and Classes
W3.CSS defaults provide the starting style.
W3.CSS classes let you change that style when you need to.
Default Heading 1
Default paragraph text.
Larger Heading 1
Larger paragraph text.
Example
<h1>Default Heading</h1>
<p>Default paragraph text.</p>
<h1 class="w3-xxxlarge">Larger Heading</h1>
<p class="w3-large">Larger paragraph text.</p>
Try it Yourself »
Override the Defaults
W3.CSS gives you useful defaults, but you are always free to change them.
Add your own CSS after W3.CSS to override the default styles.
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
h1 {font-size: 64px;}
</style>
Try it Yourself »
Note
If two CSS rules apply to the same element, the rule loaded later overrides the earlier rule.
Use Your Own Style Sheet
For larger websites, keep your custom styles in a separate CSS file.
Load your style sheet after W3.CSS:
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="myStyle.css">
Your own style sheet can now override W3.CSS when needed.
Changing the Default Font
You can replace the default Verdana font with your own font stack.
Example
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
Try it Yourself »
You will learn more about fonts in the next chapter.
What You Have Learned
W3.CSS provides useful styles before you add any classes.
- The default font size is 15px
- The default font is Verdana
- The default line height is 1.5
- HTML headings have predefined sizes
- Font-size classes change text size without misusing heading elements
- Your own CSS can override the W3.CSS defaults
More Examples
Explore more ways to customize the W3.CSS defaults.
Custom Heading Sizes
Example
h1 {font-size:64px;}
h2 {font-size:48px;}
h3 {font-size:36px;}
h4 {font-size:24px;}
h5 {font-size:20px;}
h6 {font-size:18px;}
Try it Yourself »
Changing the Default Font
Example
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: cursive, sans-serif;
}
</style>
Try It Yourself »
