Toggle navigation
TUTORIAL HOME
W3.CSS Fonts
❮ Previous Next ❯
Easy to Read
W3.CSS pages are easy to read, even for people with slight reading disabilities.
W3.CSS 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>
»
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 got 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="https://www.Omegas.com/
<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 Page 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.Omegas.com/
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
»
W3.CSS External Fonts
Making the web beautiful!
With W3.CSS it is extremely easy to add new fonts to a web page.
Very easy to use (only CSS and HTML)
Unlimited use of external font libraries (Like Google Fonts)
Works in all modern browsers
Using a Font Class
Making the Web!
In the head of your web page (or in your style sheet), create a font class:
Example
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
In the body of your web page, use the font class name:
Example
<body>
<p class="w3-myfont">Making the Web!</p>
</body>
»
Using External Fonts
In the head of your web page, include an external font, and give the font a class name:
Example
<link rel="stylesheet" href="https://fonts.
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
In the body of your web page, use the class name:
Example
<body>
<p class="w3-tangerine">Making the Web Beautiful!</p>
</body>
»
More Examples
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.
»
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.
»
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.
»
Font effects does not work in Internet Explorer 9 and earlier.
❮ Previous Next ❯
TUTORIAL HOME
W3.CSS Fonts
❮ Previous Next ❯
Easy to Read
W3.CSS pages are easy to read, even for people with slight reading disabilities.
W3.CSS 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>
»
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 got 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="https://www.Omegas.com/
<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 Page 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.Omegas.com/
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
»
W3.CSS External Fonts
Making the web beautiful!
With W3.CSS it is extremely easy to add new fonts to a web page.
Very easy to use (only CSS and HTML)
Unlimited use of external font libraries (Like Google Fonts)
Works in all modern browsers
Using a Font Class
Making the Web!
In the head of your web page (or in your style sheet), create a font class:
Example
.w3-myfont {
font-family: "Comic Sans MS", cursive, sans-serif;
}
In the body of your web page, use the font class name:
Example
<body>
<p class="w3-myfont">Making the Web!</p>
</body>
»
Using External Fonts
In the head of your web page, include an external font, and give the font a class name:
Example
<link rel="stylesheet" href="https://fonts.
<style>
.w3-tangerine {
font-family: 'Tangerine', serif;
}
</style>
In the body of your web page, use the class name:
Example
<body>
<p class="w3-tangerine">Making the Web Beautiful!</p>
</body>
»
More Examples
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.
»
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.
»
Making the Web!
Example
<link rel="stylesheet"
href="https://fonts.
»
Font effects does not work in Internet Explorer 9 and earlier.
❮ Previous Next ❯
No comments:
Post a Comment