MY CARTTraining in HTML5: Working with Text in CSS3: Bolding and Italicizing Text
Need more training in HTML5 and CSS3? Click here for the complete tutorial!
Emphasizing Text (Bold and Italic)
To bold text in a CSS style rule, use the FONT-WEIGHT property. You can use the default value of “bold” or you can assign a degree of boldness with a numerical value in multiples of 100, with 100 being the lightest and 900 being the darkest bold.
To italicize text in a CSS style rule, use the FONT-STYLE property. There are three values that can be attributed to the FONT-STYLE property: italic, oblique and normal. “Italic” defines the italic version of the assigned font. If the font you are using does not have an italic version, you can use “oblique” to tell the browser to make an attempt to slant the font to mimic italics. If the element has inherited italics from a previous element and you want to remove the italics, use the value “normal”.
| Property: | font-weight | |
| Value: | bold or 100, 200…900 | |
| Example: | p {font-weight: 300;} | |
| Result: | Sets the CSS rule to apply boldness of 300 to the text of paragraphs. | |
| Property: | font-style | |
| Value: | Italic, oblique or normal | |
| Example: | p {font-style: italic;} | |
| Result: | Sets the CSS rule to italicize the text of paragraphs. |
Decoration
The TEXT-DECORATION property is used to add strike-through marks, underline and overstrike marks to your text. Generally this property is used to remove underlines from links. For example, a link in the middle of a sentence that is already underlined, will stand out more if is not underlined. It is generally good practice to not underline text that isn’t a link as it can be confusing to some users.
| Property: | text-decoration |
| Value: | overline or line-through or underline or none |
| Example: | p {text-decoration: underline;}a {text-decoration: none;} |
| Result: | Sets the CSS rule to underline all text of your paragraphs and sets the rule to NOT underline any links. |
Indenting
To indent the first line of a paragraph use the TEXT-INDENT property. The value you assign can be in the form of pixels (px), inches (in), millimeters (mm), centimeters (cm), points (pt), picas (pc) or x-height (ex). The most commonly used is pixels (px).
| Property: | text-indent |
| Value: | px, in, mm, cm, pt, pc or ex |
| Example: | p {text-indent: 35px;} |
| Result: | Sets the CSS rule to indent the first line of paragraphs by 35 pixels. |
Transformation
The TEXT-TRANSFORM property is used to define the case your text is displayed in. There are three values available: uppercase, lowercase and capitalize. Uppercase turns all letters into uppercase (similar to using the caps lock key), lowercase turns all letters into lowercase, and capitalize sets the rule to capitalize the first letter of each word.
| Property: | text-transform |
| Value: | uppercase or lowercase or capitalize |
| Example: | p {text-transform: uppercase;} |
| Result: | Sets the CSS rule to capitalize every letter in the paragraphs. |
