CSS - Text Properties

10
CSS TEXT PROPERTIES text from: http://www.cssbasics.com/css- text-properties/

Transcript of CSS - Text Properties

Page 1: CSS - Text Properties

CSS TEXT PROPERTIEStext from: http://www.cssbasics.com/css-text-properties/

Page 2: CSS - Text Properties

color

Possible values are:

• color name – example:(red, black…) color: blue;

• hexadecimal number – example:(#ff0000, #000000) color: #000000;

• RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))

You can set the color of text with the following:

color: value;

Page 3: CSS - Text Properties

font-weight & font-style

font-weight: bold;

font-style: italic;

Page 4: CSS - Text Properties

font-familyThe font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

There are two types of font family names:

family-name - The name of a font-family, like "times", "courier", "arial", etc.generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.

Page 5: CSS - Text Properties

letter-spacingYou can adjust the space between letters in the following manner. Setting the value to 0, prevents the text from justifying. You can use negative values.

letter-spacing: value;Possible values are:

• normal letter-spacing: normal;• length letter-spacing: 5px;

Example:

T h e s e l e t t e r s a r e s p a c e d a t 5 p x .

Page 6: CSS - Text Properties

text-alignYou can align text with the following:

text-align: value;Possible values are:

• left • right • center • justify

Page 7: CSS - Text Properties

text-decorationYou can decorate text with the following:

text-decoration: value;Possible values are:

• none• underline• overline• line-through

Examples:

Page 8: CSS - Text Properties

text-transformYou can control the size of letters in an HTML element with the following:

text-transform: value;Possible values are:

• none• capitalize• lowercase• uppercase

Page 9: CSS - Text Properties

line-heightThe line-height property specifies the line height.

line-height: value;Possible values are:

• normal• number• length• %

Page 10: CSS - Text Properties

word-spacing

You can adjust the space between words in the following manner. You can use negative values.

word-spacing: value;Possible values are:

• normal• length