Font/Text
Ref: http://www.w3schools.com/css/css_font.asp
CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or "Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like < h1> - < h6> for headings and < p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known
Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Set Font Size With Pixels
Setting the text size with pixels, gives you full control over the text size:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
(The example above allows Firefox, Chrome, and Safari to resize the text, but not Internet Explorer.
The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).
Set Font Size With Em
To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
(In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with IE. When resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.)
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the body element:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
(Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!)
All CSS Font Properties
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
Look at CSS Color Values for a complete list of possible color values.
The default color for a page is defined in the body selector.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
(For W3C compliant CSS: If you define the color property, you must also define the background-color property. )
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
a {text-decoration:none;}
It can also be used to decorate text:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
It is not recommended to underline text that is not a link, as this often confuses users.
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
p {text-indent:50px;}
Additional Specialist Text Formatting Applications
Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
Specify the space between lines
This example demonstrates how to specify the space between the lines in a paragraph.
CSS =
p.small {line-height:70%;}
p.big {line-height:200%;}
HTML =
< p class="small">
a few lines of text here.
< /p>
< p class="big">
a few lines of text here.
< /p>
Set the text direction of an element
This example demonstrates how to change the text direction of an element.
CSS =
div.ex1 {direction:rtl;}
HTML =
< div>Some text. Default writing direction.< /div>
< div class="ex1">Some text. Right-to-left direction. Hi< /div>
Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.
CSS =
p
{
word-spacing:30px;
}
HTML =
< p>
This is some text. This is some text.
< /p>
Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.
CSS =
p
{
white-space:nowrap;
}
HTML =
< p>
This is some text. and so on it just disappears into the far right...
< /p>
Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.
img.top { vertical-align:text-top;}
img.bottom { vertical-align:text-bottom;}
HTML =
< p>An < img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.< /p>
< p>An < img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.< /p>
< p>An < img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.< /p>
 |
All CSS Text Properties
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | &Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
Ref: http://www.somacon.com/p334.php
CSS Font and Text Style Wizard
Font |
|
| font-family | serif sans-serif cursive fantasy monospace |
| font-style | normal italic oblique |
| font-variant | normal small-caps |
| font-weight | normal bold bolder lighter 100 200 500 600 900 |
| font-size | medium small large smaller larger |
Text |
|
| line-height | 100% 200% 80% 2em 1em 0.8em |
| word-spacing | normal 1ex 1.5ex 2ex 5ex |
| letter-spacing | normal 0.1ex 0.3ex 0.75ex 1ex |
| text-decoration | none underline overline line-through blink |
| text-transform | none capitalize uppercase lowercase |
| text-align | left right center justify |
| text-indent | 0ex 1ex 2ex 5ex 10ex 10% 20% |
Font and Text Style Notes
Font Family
For font-family, you can specify an actual font name, like "Courier New" in the custom field. If the name has spaces, you should quote it, and it is case-insensitive. You can specify a comma-separated list of font names, which will be used in the order listed when some are not found on the user's system. Designers should use the most desired font first, the most compatible font second-to-last, and the generic font family last and always. For example, a common font-family value is "Verdana", "Arial", sans-serif.
Units
When you use specify lengths in CSS, you should generally use the relative units appropriate to the property. For width properties, use ex units, which corresponds to the width of the lower-case 'x' character. For height properties, use em units, which corresponds to the height of the capital 'M' character. Relative units are preferred to absolute units, like px, pt, and in. One reason for this is that one day, monitors may have more than 96 dots per inch, in which case your 14px font will look too small. Other relative values like smaller, bolder, and percentages are also better choices than the absolute values. There are always exceptions though.
Browser Support
This page does not work in Opera 8 or IE5 for the Mac. The above properties and values are the most commonly supported, but among them are some that have very limited support (e.g. the numeric font weights). There are other properties, such as those defined in CSS2, that are not shown here because they are not supported by any browsers yet. I chose to link the property names to the IndexDotCSS CSS Property Index page because they have compatibility information. They also have detailed explanations of how the properties work. For example, when you specify percentage values for the text-indent property, the percentage is relative to the parent element, which in this case is a table cell.
Vertical Alignment
The vertical alignment property is a bit difficult to grasp, and is sometimes classified as a positioning property. In general, it defines the relationship between the baseline of the element and the baseline of its parent. For text, the baseline is an imaginary line on which the text sits. Characters like lower-case 'j' and 'q' have decenders which extend below this line. For images, the baseline is just the bottom of the image. In the context of this wizard, this property is included to show superscript and subscript display with CSS.
Misc
To see text like one finds in comic books, set font-family to cursive, font-style to italic, font-variant to small-caps, font-weight to bold, and letter-spacing to 0.1ex. The justify text-align option will not have any visible effect since none of the lines are wrapped. And in case you were wondering, the sample text and image are from Alice's Adventures in Wonderland. This book by Lewis Carroll was made available by the efforts of Project Gutenberg.
For information on dynamically setting styles with Javascript and how the HTML toggle buttons work, please see the border style wizard (first link below).
http://www.davesite.com/webstation/css/chap05.shtml
http://www.htmlite.com/CSS004.php
These elements are very similar to the FONT tag of HTML3.2. Fonts can be specified by type (family), style, size, and weight.
Font Family
font-family specifies the font NAME to use. In HTML3.2, this was known as the FONT FACE. A list of FONTs is specified. The visitor's browser will go down the list and use the first one it recognizes.
Using a Paragraph tag, embedded style example :
This would declare that, in the BODY area, all text within P tags will use this FONT FACE specified. Check your typing on those font names, because spelling counts.
Considering the differences of Windows and Mac users, it's hard to specify one specific FONT that will work, so a good list is best. See that last option of sans-serif ? That isn't an actual FONT, but a generic term for one. If the browser does not recognize the first FONTs, it can use the sans-serif option and choose the closest FONT that it knows with that type of properties. In most cases, that would be Arial.
Here are the other options you can use at the end of your list and the probable outcome :
| serif | Times |
| sans-serif | Arial or Helvetica |
| monospace | Courier |
When using FONT types that consist of two words, quotes must be placed on them so the browser does not read them as separate entries:
p {font-family: "gill sans", "new baskerville", sans-serif;}
HTML =
< p style="font-family: 'gill sans', 'new baskerville', sans-serif;"> Some text here < /p>
Font Size
font-size controls the size of the font in terms of POINTS, PIXELS, KEYWORDS, or PERCENTAGES. Try doing that with the old FONT tag. There are a half dozen other ways to declare font sizes, but these are the most common and usable.
Anybody with printed media experience has heard of points. They are a precise measurement very much the same as pixels. Points places an invisible box around the letter and sizes it accordingly. This is the prefered choice because it works best across all supporting browsers.
Setting all the text within P tags to a certain size :
p {font-size: 14pt;}
A pixel setting is very similar to the point setting. If you've come this far in HTML coding, you know pixels very well already.
p {font-size: 14px;}
Keywords are using regular words instead of a fixed size. There are 7 main keywords that have replaced the original FONT SIZE numbers 1 to 7.
| CSS Keyword | old FONT number |
|---|---|
| xx-small | 1 |
| x-small | 2 |
| small | 3 |
| medium | 4 |
| large | 5 |
| x-large | 6 |
| xx-large | 7 |
Two more keywords called smaller and larger may be used as well. This would affect the text a bit smaller or larger than the current size in use.
Percentages are another form of declaring the font size. Similar to the way SMALLER or LARGER works, the percentage will increase or decrease the specified font according to what is currently being used.
p {font-size: 200%;}
The percentage values should work properly in all browsers, but different browsers have a different view on the exact percentage.
Font Style
font-style is used to create italics STYLE letters. That's the slightly slanted to the right, script looking text.
p {font-style: italic;}
Grouping
There are two ways to combine the different properties into one group.
The first way is to list the full properties and values for each one and have a semi-colon separate the different properties.
p {font-style: italic;
font-weight: bold;
font-size: 14pt;
font-family: arial, sans-serif;}
The other method of grouping, is to combine all the values into one FONT property using spaces instead of semi-colons. p {font: italic bold 14pt "arial", "sans-serif";}
WARNING: Grouping the FONT properties is shaky. IE usually has no problems with grouping.
Netscape is picky on the order values are specified or used.
Using values specified in the order of the above examples should work in both major browsers.
Ref: http://www.echoecho.com/csstext.htm
CSS TEXT
CSS has several options for defining the styles of text.
These options can entirely replace the < font> tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.
Property |
Values |
NS |
IE |
Example |
font-family |
font name |
4+ |
4+ |
font-family:arial |
font-style |
normal |
4+ |
4+ |
font-style:normal |
font-variant |
normal |
4+ |
font-variant:normal |
|
font-weight |
normal |
4+ |
4+ |
font-weight:normal |
font-size |
normal |
4+ |
4+ |
font-size:normal |
4P:problems, 4M:Mac only, 4W:Windows only
ASSIGNING ALL FONT ATTRIBUTES AT ONCE
An example of a typical font definition would be:
B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}
But since all font attributes can actually be expressed with the font property we could actually write it this way:
B {font:arial, helvetica 12px bold}
The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for headers and content areas etc.
TEXT PROPERTIES
Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.
Property |
Values |
NS |
IE |
Example |
line-height |
normal |
4W |
4+ |
line-height:normal |
text-decoration |
none |
4+ |
4M |
text-decoration:none |
text-transform |
none |
4+ |
4W |
text-transform:none |
text-align |
left |
4+ |
4+ |
text-align:left |
text-indent |
length |
4+ |
4+ |
text-indent:20px; |
white-space |
normal |
4+ |
white-space:normal |