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 takes precedence.
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 »
