HTML/CSS/Text
- Address
- abbr
- acronym
- bdo
- blockquote
- cite
- code
- dd
- del
- dfn
- direction
- dl
- dt
- indent
- ins
- kbd
- letter spacing
- line height
- p
- p class
- q
- quote
- quotes
- samp
- strong
- sub
- sup
- text align
- text decoration
- text indent
- text shadow
- text transform
- textarea
- textfield
- white space
- word spacing
Содержание
- 1 Example of Simple Font Styling
- 2 header 1
- 3 Font Sampler</h2>
Serif
- 3.1 Sans Serif
- 3.2 Monospace
- 3.3 Cursive
- 3.4 Fantasy
- 3.5 font-family Demo
- 3.6 font-family: fantasy;
- 3.7 Serif
- 3.8 Sans Serif
- 3.9 Monospace
- 3.10 Cursive
- 3.11 Fantasy
- 3.12 font-family: monospace;
- 3.13 Serif
- 3.14 Sans Serif
- 3.15 Monospace
- 3.16 Cursive
- 3.17 Fantasy
- 3.18 font-family: sans-serif;
- 3.19 Serif
- 3.20 Sans Serif
- 3.21 Monospace
- 3.22 Cursive
- 3.23 Fantasy
- 3.24 font family sequence
- 3.25 font-family: serif;
- 4 Font Sampler</h2>
Serif
- 4.1 Sans Serif
- 4.2 Monospace
- 4.3 Cursive
- 4.4 Fantasy
- 4.5 font-family: "Times New Roman"
- 4.6 font family with generic fonts
- 4.7 font: menu
- 4.8 font: message-box
- 4.9 font-size:20px; assigns a length of 20 pixels to font-size.
- 4.10 font size and relative keyword: larger and large
- 4.11 Font size by Absolute Sizes
- 4.12 Absolute Sizes
- 4.13 Pixels
- 4.14 Points
- 4.15 Picas
- 4.16 Relative Sizes
- 4.17 Ems
- 4.18 Exs
- 4.19 Percents
- 4.20 Font size by Ems
- 5 Font Sizes
- 6 Font Sizes
- 7 Font Sizes
- 8 Font Sizes
- 9 Font Sizes
- 9.1 Absolute Sizes
- 9.2 Pixels
- 9.3 Points
- 9.4 Picas
- 9.5 Relative Sizes
- 9.6 Ems
- 9.7 Exs
- 9.8 Percents
- 9.9 font size percentage larger
- 9.10 font size percentage smaller
- 9.11 font size relative larger
- 9.12 font size relative smaller
- 9.13 Font size with calculation
- 9.14 font size with minimal values
- 9.15 font size with relative keyword
- 9.16 font-size: xx-small
- 9.17 font-stretch all values
- 9.18 Font style: italic
- 9.19 font-style:italic; assigns the constant value of italic to font-style. The font-style property also allows two other constant values: normal and oblique.
- 9.20 font-style: normal
- 10 font-style
- 11 header 1
- 11.1 hader 2
- 11.2 font-weight:900; assigns the constant 900 to font-weight.
- 11.3 This is a header this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
- 11.4 font weight bolder
- 11.5 Font Weight by number
- 12 Font Weight
- 13 Font Weight
- 14 Heading 1
- 15 This is the heading
- 16 This is the heading
- 17 Heading 1
- 18 Article heading
- 19 Font Sizes
- 20 </title> <style type="text/css"> h1 { font-size: 120%; } </style> </head> <body> <h1>Title of Page
- 21 Title of Page
- 21.1 Set font size to small
- 21.2 Set font weight to bold for the first text in paragraph
- 21.3 System font: caption
- 21.4 System font: icon
- 21.5 System font: menu
- 21.6 System font: message-box
- 21.7 system fonts
- 21.8 System font: small-caption
- 21.9 System font: status-bar
- 21.10 This font is 1 em in size and sans-serif.
- 21.11 This font is 24 pixels tall and this div is 3 ems tall
- 21.12 This font is italic, small-caps, bold, 1em in size, with a 1.5 em line height and a sans-serif font.
- 21.13 This is the caption font
- 21.14 Two font families, just in case
- 21.15 Two typefaces with different x-heights shown at the same font-size
- 21.16 Use font
- 21.17 Designing Instant Gratification
- 21.18 use the following constants for font-weight: normal, bold, bolder, lighter.
- 21.19 This is a header this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
Example of Simple Font Styling
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example of Simple Font Styling</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Times, serif;
} p {
font-family: Verdana, Arial, Helvetica, sans-serif;
} </style> </head> <body>
header 1
header 2
this is a test.
</body> </html>
</source>
font color
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen">
- .color1 {
color: black;
}
- .color2 {
color: gold;
} </style> </head> <body>
color:
black
gold
</body> </html>
</source>
font-family: Arial
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#arial {
font-family: Arial;
}
</style>
</head>
<body>
This font is Arial.
</body>
</html>
</source>
Font family cascade
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title> Property Inheritance </title>
<style type="text/css">
* {
font-family: sans-serif;
}
div {
font-family: "Times New Roman";
}
</style>
</head>
<body>
This font is sans-serif.
This font is Times New Roman.
</body>
</html>
</source>
font-family: cursive;
<source lang="html4strict">
<html> <head> <title></title> <style type="text/css"> h2 {
text-decoration: underline;
} .serif {
font-family: serif; text-align: right;
} .sans-serif {
font-family: sans-serif; text-align: center;
} .monospace {
font-family: monospace; text-align: justify;
} .cursive {
font-family: cursive; text-align: left;
} .fantasy {
font-family: fantasy;
} </style> </head> <body>
Font Sampler</h2>
Serif
Serif
Sans Serif
Sans Serif
Monospace
Monospace
Cursive
Cursive
Fantasy
Fantasy
</body> </html>
</source>
font-family Demo
<source lang="html4strict">
<html> <head> <title>Generic Font Demo</title> </head> <body>
This is a serif font.
This is a sans-serif font.
This is a monospace font.
This is a cursive font.
This is a fantasy font.
</body> </html>
</source>
font-family: fantasy;
<source lang="html4strict">
<html> <head> <title></title> <style type="text/css"> h2 {
text-decoration: underline;
} .serif {
font-family: serif; text-align: right;
} .sans-serif {
font-family: sans-serif; text-align: center;
} .monospace {
font-family: monospace; text-align: justify;
} .cursive {
font-family: cursive; text-align: left;
} .fantasy {
font-family: fantasy;
} </style> </head> <body> <h1>Font Sampler</h2>
Serif
Serif
Sans Serif
Sans Serif
Monospace
Monospace
Cursive
Cursive
Fantasy
Fantasy
</body> </html>
</source>
font-family: monospace;
<source lang="html4strict">
<html> <head> <title></title> <style type="text/css"> h2 {
text-decoration: underline;
} .serif {
font-family: serif; text-align: right;
} .sans-serif {
font-family: sans-serif; text-align: center;
} .monospace {
font-family: monospace; text-align: justify;
} .cursive {
font-family: cursive; text-align: left;
} .fantasy {
font-family: fantasy;
} </style> </head> <body> <h1>Font Sampler</h2>
Serif
Serif
Sans Serif
Sans Serif
Monospace
Monospace
Cursive
Cursive
Fantasy
Fantasy
</body> </html>
</source>
font-family: sans-serif;
<source lang="html4strict">
<html> <head> <title></title> <style type="text/css"> h2 {
text-decoration: underline;
} .serif {
font-family: serif; text-align: right;
} .sans-serif {
font-family: sans-serif; text-align: center;
} .monospace {
font-family: monospace; text-align: justify;
} .cursive {
font-family: cursive; text-align: left;
} .fantasy {
font-family: fantasy;
} </style> </head> <body> <h1>Font Sampler</h2>
Serif
Serif
Sans Serif
Sans Serif
Monospace
Monospace
Cursive
Cursive
Fantasy
Fantasy
</body> </html>
</source>
font family sequence
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-family: arial, verdana, sans-serif;
} p.one {
font-family: arial, verdana, sans-serif;
} p.two {
font-family: times, times new roman, serif;
} p.three {
font-family: courier, courier new, serif;
} </style> </head> <body>
<h1>Font PropertiesHere is some text.
Here is some text.
Here is some text.
</body> </html>
</source>
font-family: serif;
<source lang="html4strict">
<html> <head> <title></title> <style type="text/css"> h2 {
text-decoration: underline;
} .serif {
font-family: serif; text-align: right;
} .sans-serif {
font-family: sans-serif; text-align: center;
} .monospace {
font-family: monospace; text-align: justify;
} .cursive {
font-family: cursive; text-align: left;
} .fantasy {
font-family: fantasy;
} </style> </head> <body>
Font Sampler</h2>
Serif
Serif
Sans Serif
Sans Serif
Monospace
Monospace
Cursive
Cursive
Fantasy
Fantasy
</body> </html>
</source>
font-family: "Times New Roman"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#times-new-roman {
font-family: "Times New Roman";
}
</style>
</head>
<body>
This font is Times New Roman.
</body>
</html>
</source>
font family with generic fonts
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 40px;
}
p {
margin: 0;
}
p#serif {
font-family: serif;
}
p#sans-serif {
font-family: sans-serif;
}
p#cursive {
font-family: cursive;
}
p#fantasy {
font-family: fantasy;
}
p#monospace {
font-family: monospace;
}
</style>
</head>
<body>
This is serif.
This is sans-serif.
This is cursive.
This is fantasy.
This is monospace.
</body>
</html>
</source>
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#menu {
font: menu;
}
</style>
</head>
<body>
</body>
</html>
</source>
font: message-box
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#message-box {
font: message-box;
}
</style>
</head>
<body>
This is the message-box font.
</body>
</html>
</source>
font-size:20px; assigns a length of 20 pixels to font-size.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>CSS Syntax</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style><!- body {
font-size:20px;
} </style> </head> <body>
CSS syntax is EASY!
</body> </html>
</source>
font size and relative keyword: larger and large
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 17px;
}
p {
font-size: larger;
}
</style>
</head>
<body>
This font is 14 pixels in size.
This is a test. This is a test.
</body>
</html>
</source>
Font size by Absolute Sizes
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
<h1>Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
Font size by Ems
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
Font size by Ex
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
Font size by percentage
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
Font size by Pixels
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
Font size by Points
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
font size percentage larger
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 150%;
}
</style>
</head>
<body>
This font is 150% of the size of the user"s font size preferences.
This font is 100% of the size of the font used for the <body> element.
</body>
</html>
</source>
font size percentage smaller
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-size: 18px;
}
p {
font-size: 90%;
}
</style>
</head>
<body>
This font is 18 pixels in size.
This font is 90% of the 18 pixel size
</body>
</html>
</source>
font size relative larger
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
</head>
<body style="background: rgb(240, 240, 240);">
font-size: 16px;
font-size: larger; font-size: 18px;
font-size: larger; font-size: 24px;
font-size: larger; font-size: 32px;
font-size: larger; font-size: 48px;
</body>
</html>
</source>
font size relative smaller
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body style="background: rgb(160, 160, 160);">
font-size: 48px;
font-size: smaller; font-size: 32px;
font-size: smaller; font-size: 24px;
font-size: smaller; font-size: 18px;
font-size: smaller; font-size: 16px;
</body>
</html>
</source>
Font size with calculation
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p {
font: 1em/1.5em sans-serif;
} </style> </head> <body>
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
</body> </html>
</source>
font size with minimal values
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p {
font: 1em sans-serif;
}
</style>
</head>
<body>
This font is 1 em in size and sans-serif.
</body>
</html>
</source>
font size with relative keyword
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-size: medium;
}
p {
font-size: larger;
}
</style>
</head>
<body>
This font is medium in size.
font-size: large; font-size: large;
</body>
</html>
</source>
font-size: xx-small
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> label {
font-size: xx-small;
}
</style> </head> <body>
<form method="post"> <label for="uname">Username</label> <input type="text" name="uname" id="uname" value="" />
<label for="pword">Password</label> <input type="text" name="pword" id="pword" value="" />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /> </form>
</body> </html>
</source>
font-stretch all values
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> body {
font-family: arial; font-size: 12pt;
} p.normal {
font-stretch: normal;
} p.wider {
font-stretch: wider;
} p.narrower {
font-stretch: narrower;
} p.ultra-condensed {
font-stretch: ultra-condensed;
} p.extra-condensed {
font-stretch: extra-condensed;
} p.condensed {
font-stretch: condensed;
} p.semi-condensed {
font-stretch: semi-condensed;
} p.semi-expanded {
font-stretch: semi-expanded;
} p.expanded {
font-stretch: expanded;
} p.extra-expanded {
font-stretch: extra-expanded;
} p.ultra-expanded {
font-stretch: ultra-expanded;
} </style> </head> <body>
normal.
wider.
narrower.
ultra-condensed.
extra-condensed.
condensed.
semi-condensed.
</body> </html>
</source>
Font style: italic
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#italic {
font-style: italic;
}
</style>
</head>
<body>
This font is italic.
</body>
</html>
</source>
font-style:italic; assigns the constant value of italic to font-style. The font-style property also allows two other constant values: normal and oblique.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title>CSS Syntax</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style><!- body {
color:black; font-style:italic;
} </style> </head> <body>
CSS syntax is EASY!
</body> </html>
</source>
font-style: normal
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
p.one {
font-style: normal;
} </style> </head> <body>
font-style
This is a normal font
</body> </html>
</source>
font-style: oblique
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#oblique {
font-style: oblique;
}
</style>
</head>
<body>
This font is oblique.
</body>
</html>
</source>
Font style shortcut
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 {
font: bold italic 2em Georgia, Times, "Times New Roman", serif;
} </style> </head> <body>
This is the title
This is a text.
</body> </html>
</source>
font-variant: normal
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css">
p.normal {
font-variant: normal;
} p.smallcaps {
font-variant: small-caps;
} </style> </head> <body>
normal.
small caps.
</body> </html>
</source>
font-variant: small-caps
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <title>css </title> <style type="text/css"> h1 {
font-family: Georgia, Times, serif; font-size: 24px; font-variant: small-caps;
}
</style> </head> <body>
header 1
hader 2
beforestrongafter.
</body> </html>
</source>
font-weight:900; assigns the constant 900 to font-weight.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 {
font-weight:900;
} </style> </head> <body>
This is a header this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
This is a text.
</body> </html>
</source>
font weight bolder
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-family: monospace;
}
div {
font-weight: bolder;
}
</style>
</head>
<body>
This font is normal.
font is bolder than the font for the <body> element.
</body>
</html>
</source>
Font Weight by number
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
td {
width: 200px;
} p.one {
font-weight: normal;
} p.two {
font-weight: bold;
} p.three {
font-weight: bolder;
} p.four {
font-weight: lighter;
} p.five {
font-weight: 100;
} p.six {
font-weight: 200;
} p.seven {
font-weight: 300;
} p.eight {
font-weight: 400;
} p.nine {
font-weight: 500;
} p.ten {
font-weight: 600;
} p.eleven {
font-weight: 700;
} p.twelve {
font-weight: 800;
} p.thirteen {
font-weight: 900;
} </style> </head> <body>
Font Weight
|
normal bold bolder lighter |
100 200 300 400 500 600 700 800 900 |
</body> </html>
</source>
Font weight by value
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
color: #000000; background-color: #ffffff; font-size: 12px;
} td {
width: 200px;
} p.one {
font-weight: normal;
} p.two {
font-weight: bold;
} p.three {
font-weight: bolder;
} p.four {
font-weight: lighter;
} p.five {
font-weight: 100;
} p.six {
font-weight: 200;
} p.seven {
font-weight: 300;
} p.eight {
font-weight: 400;
} p.nine {
font-weight: 500;
} p.ten {
font-weight: 600;
} p.eleven {
font-weight: 700;
} p.twelve {
font-weight: 800;
} p.thirteen {
font-weight: 900;
} </style> </head> <body>
Font Weight
|
normal bold bolder lighter |
100 200 300 400 500 600 700 800 900 |
</body> </html>
</source>
font weight lighter
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-weight: bold;
}
div {
font-weight: lighter;
}
</style>
</head>
<body>
This font is bold.
This font is lighter than the font for the <body> element.
</body>
</html>
</source>
font weight normal
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 span {
font-size: 1.1em; font-weight: normal;
} </style> </head>
Crossing Over
Gordon (I-Utah) GOP;
changes parties to be Independent
</body> </html>
</source>
h1, h2 and p are in Times New Roman font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css" media="all">
h1, h2, p {
font-family: "Times New Roman";
}
</style>
</head>
<body>
Heading 1
Heading 2
Some paragraph text.
</body>
</html>
</source>
Header text-transform: uppercase;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
h4 {
margin: 0; padding: 0; font-size: 1.25em; font-weight: bold; text-align: center;
} </style> </head>
Crossing Over
Gordon (I-Utah) GOP;
changes parties to be Independent
</body> </html>
</source>
Inline Example of font-family Order
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Inline Example of font-family Order</title> </head> <body>
without style
with style.
</body> </html>
</source>
make text that"s italic, bold, small-caps,24 pixel sans-serif, which looks like a comic book font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>font</title>
<style rel="stylesheet" type="text/css">
body {
font: 16px sans-serif;
} p.font2 {
font: italic bold small-caps 24px sans-serif;
}
</style> </head> <body>
make text that"s italic, bold, small-caps, 24 pixel sans-serif, which looks like a comic book font.
</body>
</html>
</source>
Nested font size
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 16px;
}
div {
padding-left: 5px;
margin-left: 5px;
font-size: larger;
border: 1px solid gray;
}
</style>
</head>
<body style="font-size: xx-small; background: rgb(240, 240, 240);">
font-size: xx-small;
font-size: 7pt;
font-size: 9px;
font-size: larger;
font-size: x-small;
font-size: 7.5pt;
font-size: 10px;
font-size: larger;
font-size: small;
font-size: 10pt;
font-size: 13px;
font-size: larger;
font-size: medium;
font-size: 12pt;
font-size: 16px;
font-size: larger;
font-size: large;
font-size: 13.8pt;
font-size: 18px;
font-size: larger;
font-size: x-large;
font-size: 18pt;
font-size: 24px;
</body>
</html>
</source>
Overlay font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">
- header h1 {
color:#aaa; background:transparent; left:0;right:0; font-size:200%; font-weight:bold;
}
- header h1.overlay{
color:red; background:transparent; position:absolute; left:1px; top:1px;
} </style> </head> <body>
This is the heading
This is the heading
</body> </html>
</source>
Paragraph text is black and in 12pt font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css" media="all">
p {
font-size: 12pt;
}
</style>
</head>
<body>
Heading 1
Heading 2
Some paragraph text.
</body>
</html>
</source>
Relative font size
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>An example with sans-serif fonts</title>
<style type="text/css" media="screen">
- {
margin: 0; padding: 0; }
html {
font-size: 100%; }
body {
padding: 20px; font-size: 62.5%; }
- wrapper {
margin: 0 auto; width: 400px; }
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif; line-height: 1.5; }
h1 {
font-size: 1.8em; line-height: 1em; padding-bottom: 7px; border-bottom: 1px solid #cccccc; margin-bottom: 7px; color: #666666; font-weight: normal; }
h2, h3 {
color: #333333; }
h2 {
font-size: 1.3em; }
h3 {
font-size: 1.2em; margin-top: 1.65em; }
p {
font-size: 1.2em; margin-bottom: 1.2em; }
h1+p {
font-weight: bold; color: #222222; }
</style> </head> <body>
Article heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.
Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.
Curabitur sit amet risus
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.
Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.
Praesent rutrum
Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.
Habitant morbid
Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.
</body> </html>
</source>
Relative Font Sizes
<source lang="html4strict">
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>CSS Example</title> <style rel="stylesheet" type="text/css">
body {
font-size: 18px;
}
td {
padding: 10px; width: 210px;
} p.absoluteone {
font-size: xx-small;
} p.absolutetwo {
font-size: x-small;
} p.absolutethree {
font-size: small;
} p.absolutefour {
font-size: medium;
} p.absolutefive {
font-size: large;
} p.absolutesix {
font-size: x-large;
} p.absoluteseven {
font-size: xx-large;
} p.pixelsone {
font-size: 9px;
} p.pixelstwo {
font-size: 12px;
} p.pixelsthree {
font-size: 14px;
} p.pixelsfour {
font-size: 18px;
} p.pixelsfive {
font-size: 24px;
} p.pixelssix {
font-size: 36px;
} p.pixelsseven {
font-size: 48px;
} p.picaone {
font-size: 1pc;
} p.picatwo {
font-size: 2pc;
} p.picathree {
font-size: 3pc;
} p.picafour {
font-size: 4pc;
} p.pointone {
font-size: 9pt;
} p.pointtwo {
font-size: 12pt;
} p.pointthree {
font-size: 14pt;
} p.pointfour {
font-size: 18pt;
} p.pointfive {
font-size: 24pt;
} p.pointsix {
font-size: 36pt;
} p.pointseven {
font-size: 48pt;
} p.relativeone {
font-size: smaller;
} p.relativetwo {
} p.relative {
font-size: larger;
} p.emone {
font-size: 1em;
} p.emtwo {
font-size: 2em;
} p.emthree {
font-size: 3em;
} p.emfour {
font-size: 4em;
} p.exone {
font-size: 1ex;
} p.extwo {
font-size: 2ex;
} p.exthree {
font-size: 3ex;
} p.exfour {
font-size: 4ex;
} p.exfive {
font-size: 5ex;
} p.exsix {
font-size: 6ex;
} p.exseven {
font-size: 7ex;
} p.percentone {
font-size: 50%;
} p.percenttwo {
font-size: 75%;
} p.percentthree {
font-size: 100%;
} p.percentfour {
font-size: 150%;
} p.percentfive {
font-size: 200%;
} p.percentsix {
font-size: 400%;
} </style> </head> <body>
Font Sizes
Absolute Sizesxx-small x-small small medium large large large |
Pixels9 px 12 px 14 px 18 px 24 px 36 px 48 px |
Points9 pt 12 pt 14 pt 18 pt 24 pt 36 pt 48 pt |
Picas1 pc 2 pc 3 pc 4 pc |
Relative Sizessmaller no style larger |
Ems1em 2em 3em 4em |
Exs1ex 2ex 3ex 4ex 5ex 6ex 7ex |
Percents50% 75% 100% 150% 200% 400% |
</body> </html>
</source>
Set body font size
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Relative sizing of superior and inferior text</title>
<style type="text/css">
body {
font-size: 16px;
}
</style>
</head> <body>
before .
</body> </html>
</source>
Set font family for paragraph
<source lang="html4strict">
<html>
<head><title>Set font family for
</title> <head> <body> <p style="font-family: sans-serif;">Hello, world!
</body>
</html>
</source>
Set font size to 120% for H1
<source lang="html4strict">
<html> <head>
<title>Set font size to 120% for</title> <style type="text/css"> h1 { font-size: 120%; } </style> </head> <body> <h1>Title of Page
This is a sample paragraph with a <a href="http://www.wbex.ru" class="warning">link</a>. After link. in em warning. After em.
</body> </html>
</source>
Set font size to 1.2em
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p .initcap {
font-size: 1.2em; background-color: black; color: white;
} </style> </head> <body>
Online. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
</body> </html>
</source>
Set font size to 90% for paragraph
<source lang="html4strict">
<html>
<head><title>Set font size to 90% for
</title> <style type="text/css"> p { font-size: 90%; } </style> </head> <body>
Title of Page
<p>This is a sample paragraph with a<a href="http://www.wbex.ru">link</a>.
</body>
</html>
</source>
Set font size to small
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Set font size to small</title> <style type="text/css"> p {
font-size: small;
} </style> </head> <body>
Hello world!
</body> </html>
</source>
Set font weight to bold for the first text in paragraph
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p:first-line {
font-weight: bold;
} </style> </head> <body>
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
</body> </html>
</source>
System font: caption
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#caption {
font: caption;
}
</style>
</head>
<body>
This is the caption font.
</body>
</html>
</source>
System font: icon
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#icon {
font: icon;
}
</style>
</head>
<body>
This is the icon font.
</body>
</html>
</source>
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#menu {
font: menu;
}
</style>
</head>
<body>
</body>
</html>
</source>
System font: message-box
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#message-box {
font: message-box;
}
</style>
</head>
<body>
This is the message-box font.
</body>
</html>
</source>
system fonts
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#caption {
font: caption;
}
</style>
</head>
<body>
This is the caption font.
</body>
</html>
</source>
System font: small-caption
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#small-caption {
font: small-caption;
}
</style>
</head>
<body>
This is the small-caption font.
</body>
</html>
</source>
System font: status-bar
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#status-bar {
font: status-bar;
}
</style>
</head>
<body>
This is the status-bar font.
</body>
</html>
</source>
This font is 1 em in size and sans-serif.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p {
font: 1em sans-serif;
}
</style>
</head>
<body>
This font is 1 em in size and sans-serif.
</body>
</html>
</source>
This font is 24 pixels tall and this div is 3 ems tall
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title> em measurement </title>
<style type="text/css" media="all">
body {
border: 1em solid black;
margin: 0;
padding: 10px;
}
div {
font-size: 24px;
height: 3em;
border: 1em solid black;
}
</style>
</head>
<body>
The body"s border is 1em thick.
This font is 24 pixels tall and this div is 3 ems tall,
which results in a div 72 pixels tall (3 * 24 = 72).
</body>
</html>
</source>
This font is italic, small-caps, bold, 1em in size, with a 1.5 em line height and a sans-serif font.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p {
font: italic small-caps bold 1em/1.5em sans-serif;
}
</style>
</head>
<body>
This is a test.
</body>
</html>
</source>
This is the caption font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p#caption {
font: caption;
}
</style>
</head>
<body>
This is the caption font.
</body>
</html>
</source>
Two font families, just in case
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
p {
font-family: "Times New Roman", Times;
}
</style>
</head>
<body>
This text appears in Times New Roman font, if Times New Roman is installed, it appears in Times if Times New Roman is not installed, but Times is, if neither are installed, the default font for the browser is used.
</body>
</html>
</source>
Two typefaces with different x-heights shown at the same font-size
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Two typefaces with different x-heights shown at the same font-size</title>
<style type="text/css">
body {
font-size: 12px;
}
p {
margin: 0;
width: 35em;
font: 1em/1.5 serif;
}
.two {
font-family: Georgia, serif;
}
.one {
font-family: Times, serif;
}
</style>
</head> <body>
Times Georgia
Times: after
Georgia: after
</body> </html>
</source>
Use font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 {
font: bold italic 2em Georgia, Times, "Times New Roman", serif;
} </style> </head> <body>
Designing Instant Gratification
This is a test.
</body> </html>
</source>
use the following constants for font-weight: normal, bold, bolder, lighter.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 {
font-weight:lighter;
} </style> </head> <body>
This is a header this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
This is a text.
</body> </html>
</source>
