W3.CSS Defaults

❮ Previous Next ❯

W3.CSS is Easy to Read

W3.CSS pages are easy to read, even for people with slight reading disabilities.

  • The default font-size is 15px
  • The default font is Verdana, which has a good letter spacing
  • The default line-spacing (1.5) is also very good

HTML Headings <h1> - <h6>

By default, W3.CSS styles HTML headings this way:

Example

<h1>Heading 1 (36px)</h1>

<h2>Heading 2 (30px)</h2>

<h3>Heading 3 (24px)</h3>

<h4>Heading 4 (20px)</h4>

<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
Try It Yourself »

Font-Size Classes

Headings should be used for what they are: Headings.

With W3.CSS, font sizes can be set by the following w3-size classes:

Example

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Try It Yourself »

Overriding the W3.CSS Defaults

Overriding the W3.CSS default settings is very easy.

You have at least three options:

  1. Override the default settings in the <head> section of your page
  2. Add your own CSS file after W3.CSS
  3. Download and change the content of the W3.CSS file

Override in<head>

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 »

Add your own CSS

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="myStyle.css">

Change W3.CSS

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

Changing the Default Font

In the head of your web page (or in your style sheet), after loading W3.CSS, change the style of html and body:

Example

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
  font-family: cursive, sans-serif;
}
</style>
Try It Yourself »

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.