HTML/CSS/CSS Attributes and Javascript Style Properties
- important
- ScrollBarColorProperties
- a.class
- accelerator
- active
- background
- background attachment
- background color
- background image
- background position
- background position x
- background position y
- background repeat
- behavior
- border
- border bottom
- border bottom color
- border bottom style
- border bottom width
- border collapse
- border color
- border left
- border left color
- border left style
- border left width
- border right
- border right color
- border right style
- border right width
- border spacing
- border style
- border top
- border top color
- border top style
- border top width
- border width
- bottom
- caption
- caption side
- charset
- clear
- clip
- color
- content
- content attribute
- content section
- counter increment
- cursor
- direction
- display
- empty cells
- filter
- first letter
- first line
- float
- hasLayout
- header.class
- height
- hover
- ime mode
- import
- input.class
- layout flow
- layout grid
- layout grid char
- layout grid line
- layout grid mode
- layout grid type
- left
- letter spacing
- line break
- line height
- link
- list style
- list style image
- list style position
- list style type
- margin
- margin bottom
- margin left
- margin right
- margin top
- max height
- max width
- media
- min height
- min width
- moz box sizing
- overflow
- overflow x
- overflow y
- p.class
- padding
- padding bottom
- padding left
- padding right
- padding top
- page
- page break after
- page break before
- page break inside
- pixelBottom
- pixelHeight
- pixelLeft
- pixelRight
- pixelTop
- pixelWidth
- posBottom
- posHeight
- posLeft
- posRight
- posTop
- posWidth
- position
- right
- ruby align
- ruby overhang
- ruby position
- styleFloat
- table layout
- text align
- text align last
- text autospace
- text decoration
- text indent
- text justify
- text overflow
- text shadow
- text transform
- text underline position
- textDecorationLineThrough
- textDecorationNone
- textDecorationOverline
- textDecorationUnderline
- top
- unicode bidi
- vertical align
- visibility
- visited
- white space
- width
- word break
- word spacing
- word wrap
- writing mode
- z index
- zoom
Содержание
- 1 font: 1em/1.5 Georgia, serif
- 2 font: 1em/1.5 Georgia, serif
- 3 font: bold 1em/1.5 Verdana, sans-serif
- 4 font: italic 1em/1.5 Georgia, serif
- 5 font: 1em/1.5 Georgia, serif
- 6 font: bold 1em/1.5 Verdana, sans-serif
- 7 font: italic 1em/1.5 Georgia, serif
- 8 color
- 9 font: 1em/1.5 Georgia, serif
- 10 font: bold 1em/1.5 Verdana, sans-serif
- 11 font: italic 1em/1.5 Georgia, serif
- 12 color my world
- 13 this is a test.
- 14 <h1>
- 14.1 <h2>
- 14.2 font-size: larger
- 14.3 font-size larger is incremental
- 14.4 font-size percent
- 14.5 Font size relative selector
- 14.6 font size: small
- 14.7 font-size: smaller
- 14.8 font-size smaller is incremental
- 14.9 font: small-caption
- 14.10 font: status-bar
- 14.11 "font-style" Example
- 14.12 font-style: italic
- 15 this is a test.
- 16 font-variant
- 17 this is a test.
- 17.1 this is a test.
- 17.2 font-weight: bolder
- 17.3 font-weight by number from 100 to 900
- 17.4 "font-weight" Example
- 17.5 font-weight: lighter
- 17.6 font-weight: normal, bold, bolder, lighter
- 17.7 Make font sizes smaller by percentage.
- 17.8 Percentage font sizes apply a font size relative to the parent element"s font size.
- 17.9 Percentange larger
- 17.10 Percentange smaller
- 17.11 Set font size to 6em
- 17.12 The larger and smaller keywords of the font-size property function using the scaling factor of 1.2.
- 17.13 This font is 1.2 times the default font, or 20 pixels
font: 1em/1.5 Georgia, serif
<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>Using the font shorthand property</title> <style type="text/css"> body { font-size: 12px; } h1 { font: bold 1.2em/1.25em Georgia, serif; margin: 1.5em 0 0.25em 0; } p { margin: 0; width: 35em; } p.one { font: 1em/1.5 Georgia, serif; } </style>
</head> <body>
font: 1em/1.5 Georgia, serif
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 test. this is a test. this is a test. this is a test.
font: bold 1em/1.5 Verdana, sans-serif
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 test. this is a test. this is a test. this is a test.
font: italic 1em/1.5 Georgia, serif
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 test. this is a test. this is a test. this is a test.
</body> </html>
</source>
font: bold 1em/1.5 Verdana, sans-serif
<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>Using the font shorthand property</title> <style type="text/css"> body { font-size: 12px; } h1 { font: bold 1.2em/1.25em Georgia, serif; margin: 1.5em 0 0.25em 0; } p { margin: 0; width: 35em; } p.one { font: bold 1em/1.5 Verdana, sans-serif; } </style>
</head> <body>
font: 1em/1.5 Georgia, serif
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 test. this is a test. this is a test. this is a test.
font: bold 1em/1.5 Verdana, sans-serif
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 test. this is a test. this is a test. this is a test.
font: italic 1em/1.5 Georgia, serif
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 test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Font color
<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-family: arial, verdana, sans-serif; font-size: 12px;
} span.color {
color: #FF0000;
} </style> </head> <body>
color
fontthere is some writing in red here in the middle.
</body> </html>
</source>
"font" Example
<source lang="html4strict">
<html> <body>
</body> </html>
</source>
"font-face" Example
<source lang="html4strict">
<head> <style type="text/css"> @font-face { font-family: Lucida;
font-style: normal; font-weight: normal; src: url("fontFile.eot") }
</style> </head> <body>
Paragraph text
</body> </html>
</source>
font-family: cursive;
<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#cursive { font-family: cursive; } </style> </head> <body>
This is cursive.
</body>
</html>
</source>
"font-family" Example
<source lang="html4strict">
<html> <body>
Move the mouse pointer to change the font-family value.
</body> </html>
</source>
font-family: fantasy;
<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#fantasy { font-family: fantasy; } </style> </head> <body>
This is fantasy.
</body>
</html>
</source>
font-family: monospace;
<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#monospace { font-family: monospace; } </style> </head> <body>
This is serif.
This is monospace.
</body>
</html>
</source>
font-family: "Rockwell"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>font-size</title> <style type="text/css"> body { font-family: "Rockwell"; font-size: 34px; } </style> </head> <body style="background: rgb(160, 160, 160);"> font-size: 34px; </body>
</html>
</source>
font-family: 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"> body { font-size: 40px; } p { margin: 0; } p#sans-serif { font-family: sans-serif; } </style> </head> <body>
This is sans-serif.
</body>
</html>
</source>
font-family: 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"> body { font-size: 40px; } p { margin: 0; } p#serif { font-family: serif; } </style> </head> <body>
This is serif.
</body>
</html>
</source>
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>
font: italic 1em/1.5 Georgia, serif;
<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>Using the font shorthand property</title> <style type="text/css"> body { font-size: 12px; } h1 { font: bold 1.2em/1.25em Georgia, serif; margin: 1.5em 0 0.25em 0; } p { margin: 0; width: 35em; } p.one { font: italic 1em/1.5 Georgia, serif; } </style>
</head> <body>
font: 1em/1.5 Georgia, serif
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 test. this is a test. this is a test. this is a test.
font: bold 1em/1.5 Verdana, sans-serif
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 test. this is a test. this is a test. this is a test.
font: italic 1em/1.5 Georgia, serif
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 test. this is a test. this is a test. this is a test.
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>system fonts</title> <style rel="stylesheet" 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>system fonts</title> <style rel="stylesheet" type="text/css">
p#message-box {
font: message-box;
}
</style> </head> <body>
This is the message-box font.
</body>
</html>
</source>
Font Property and Purpose
<source lang="html4strict">
font Allows you to combine several properties into one font-family family of font (the user must have this installed on his or her computer) font-size size of a font font-weight normal, bold, or bolder than the containing element font-style normal, italic, or oblique font-stretch width of the actual letters in a font (not spaces between them) font-variant normal or smallcaps font-size-adjust aspect ratio of the size of characters of the font
</source>
font shortcut
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Chapter Five</title> <style type="text/css"> body {
font: 16px Verdana, Arial, Helvetica, sans-serif; margin: 20px;
} h1 {
font: bold 28px Verdana, Arial, Helvetica, sans-serif;
} h2 {
font: bold 24px Verdana, Arial, Helvetica, sans-serif;
} </style> </head> <body>
color my world
gender and color
following:
- B
- M
- M
- W
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 test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Font shortcut: font: bold italic 2em Georgia, Times, "Times New Roman", 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 xmlns="http://www.w3.org/1999/xhtml"> <head> <title>font: bold italic 2em Georgia, Times, "Times New Roman", serif;</title> <style type="text/css"> h2 {
font: bold italic 2em Georgia, Times, "Times New Roman", serif;
} </style> </head> <body>
This is a header
This is a test
</body> </html>
</source>
font-size: 18px
<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> <head> <title>css typography</title> <style type="text/css"> h2 {
font-family: Georgia, Times, serif; font-size: 18px;
} </style> </head> <body>
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>
"font-size" Example
<source lang="html4strict">
<html> <body>
This text will be rendered in 14pt size.
</body> </html>
</source>
font-size: from 24pt to 7pt
<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-family: "Rockwell"; } h1, h2, h3, h4, h5, h6 { display: inline; margin: 0; font-weight: normal; } </style> </head> <body>
<h1>
font-size: 24pt; font-size: xx-large;
<h2>
font-size: 18pt; font-size: x-large;
<h3>
font-size: 14pt; font-size: large;
<h4>
font-size: 12pt; font-size: medium;
<h5>
font-size: 10pt; font-size: small;
<h6>
font-size: 8pt; font-size: x-small;
font-size: 7pt; font-size: xx-small;
</body>
</html>
</source>
font-size: larger
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>font-size</title> </head> <body style="background: rgb(240, 240, 240);"> font-size: 16px;
font-size: larger; font-size: 20px;
font-size: larger; font-size: 24px;
font-size: larger; font-size: 28px;
font-size: larger; font-size: 34px;
</body>
</html>
</source>
font-size larger is incremental
<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: "Rockwell"; font-size: 16px; } div { border: 1px solid gray; padding: 5px; margin-left: 20px; } </style> </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;
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 percent
<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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Leading paragraph</title> <style type="text/css"> h3 {
font-size: 175%;
} .intro {
font-size: 150%; font-style: italic;
} </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.
</body> </html>
</source>
Font size relative selector
<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.
this is a test. this is a test.
</body>
</html>
</source>
font size: 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"> p {
width: 120px; margin: 260px 100px 0 170px; font-family: Verdana, sans-serif; font-size: small; font-weight: bold;
}
</style> </head>
before <a href="more.html">after</a></p </body> </html> </source>
font-size: smaller
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>font-size</title> <style type="text/css"> div { border: 1px solid gray; padding: 5px; margin-left: 20px; } </style> </head> <body>
font-size: smaller; font-size: 28px;
</body>
</html>
</source>
font-size smaller is incremental
<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: "Rockwell"; font-size: 48px; } div { border: 1px solid gray; padding: 5px; margin-left: 20px; } </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;
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>
<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>system fonts</title> <style rel="stylesheet" type="text/css">
p#small-caption {
font: small-caption;
}
</style> </head> <body> <p id="small-caption"> This is the small-caption font.
</body>
</html>
</source>
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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>system fonts</title> <style rel="stylesheet" type="text/css">
p#status-bar {
font: status-bar;
}
</style> </head> <body>
This is the status-bar font.
</body>
</html>
</source>
"font-style" Example
<source lang="html4strict">
<html> <body>
Move the mouse pointer to change the font style value.
</body> </html>
</source>
font-style: italic
<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> <head> <title>css typography</title> <style type="text/css"> h2 {
font-family: Georgia, Times, serif; font-size: 20px; font-style: italic;
} </style> </head> <body>
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>
Font style: 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>
<head> <title></title> <style type="text/css"> p { font-family: "Lucida Sans Typewriter"; font-size: 25px; } p#normal { font-style: normal; } </style> </head> <body>
This font is normal.
</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 { font-size: 25px; } p#oblique { font-style: oblique; } </style> </head> <body>
This font is oblique.
</body>
</html>
</source>
"font-variant" Example
<source lang="html4strict">
<html> <body>
Move the mouse to change the font-variant value.
</body> <html>
</source>
font-variant: 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">
body {
color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px;
} p {
font-variant: normal;
} span.smallcaps {
font-variant: small-caps;
} </style> </head> <body>
font-variant
a normal font, but then there are some small caps in the middle.
</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> <head> <title>css typography</title> <style type="text/css"> h1 {
font-family: Georgia, Times, serif; font-size: 24px; font-variant: small-caps;
} </style> </head> <body>
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>
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.
This font is bolder than the font for the <body> element.
</body>
</html>
</source>
font-weight by number from 100 to 900
<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: "Rockwell"; } </style> </head> <body>
This font is normal.
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.
This font is 200 weight.
This font is 300 weight.
This font is 400 weight.
This font is 500 weight.
This font is 600 weight.
This font is 700 weight.
This font is 800 weight.
This font is 900 weight.
</body>
</html>
</source>
"font-weight" Example
<source lang="html4strict">
<html> <body>
</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-family: monospace; 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, 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>
<head> <title></title> <style type="text/css"> body { font-family: "Rockwell"; } </style> </head> <body>
This font is normal.
This font is bold.
This font is bolder.
This font is lighter.
This font is 100 weight.
This font is 200 weight.
This font is 300 weight.
This font is 400 weight.
This font is 500 weight.
This font is 600 weight.
This font is 700 weight.
This font is 800 weight.
This font is 900 weight.
</body>
</html>
</source>
Make font sizes smaller by percentage.
<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-size</title> <style rel="stylesheet" type="text/css">
span {
background: pink; font-size: 75%;
} span span {
background: gold; font-size: 75%;
}
</style> </head> <body>
This font size is 25% smaller than that of the
<p> element.
This font is 25% smaller than the font used
for the parent <span> element.
</body>
</html>
</source>
Percentage font sizes apply a font size relative to the parent element"s 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">
<head> <title>font-size</title> <style rel="stylesheet" type="text/css">
span {
background: mistyrose; font-size: 150%;
} span span {
background: pink; font-size: 125%;
}
</style> </head> <body>
This font size is 50% bigger than that of the
<p> element.
This font is 25% bigger than the font used
for the parent <span> element.
</body>
</html>
</source>
Percentange 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>
Percentange 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 specified for the <body> element.
</body>
</html>
</source>
Set font size to 6em
<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 text indent to 37%</title> <style type="text/css"> p {
text-indent: 37%; line-height: 1em;
} p span.initcap {
font-size: 6em; line-height: 0.6em; font-weight: bold;
} </style> </head> <body>
Online. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test. This is test.
</body> </html>
</source>
The larger and smaller keywords of the font-size property function using the scaling factor of 1.2.
<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-size</title> <style rel="stylesheet" type="text/css">
body {
font-size: medium;
} p#larger {
font-size: larger;
} p#larger span {
font-size: 20px;
} p#smaller {
font-size: smaller;
} p#smaller span {
font-size: 12px;
} span {
background: mistyrose;
}
</style> </head> <body>
This font is 1.2 times the default font, or 20 pixels.
this is a test.
This font is 1.2 smaller than the default size, or pixels.
this is a test.
</body>
</html>
</source>
This font is 1.2 times the default font, or 20 pixels
<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-size</title> <style rel="stylesheet" type="text/css">
body {
font-size: medium;
} p#larger {
font-size: larger;
} p#larger span {
font-size: 20px;
} span {
background: mistyrose;
}
</style> </head> <body>
This font is 1.2 times the default font, or 20 pixels.
this is a test.
</body>
</html>
</source>