1. Home

W3.CSS Defaults

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

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

    <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>

    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

    Overriding the W3.CSS Defaults

    Overriding the W3.CSS default settings is very easy.

    You have at least three options:

  • Override the default settings in the <head> section of your page
  • Add your own CSS file after W3.CSS
  • 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;}

    Add your own CSS

    <link rel="stylesheet" href="/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="/w3css/4/w3.css">
    <style>
    html, body, h1, h2, h3, h4, h5, h6 {
      font-family: cursive, sans-serif;
    }
    </style>

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US