XHTML and CSS - font-weight & font-style
font-weight & font-style
In this tutorial I'm going to show you the correct way to bold and italicize text. A few tutorials ago I showed you how to bold and italicize text by surrounding them with XHTML tags, while this works and is a valid way of doing it it's not the best way to do it. A better way to bold and italicize text is through CSS, anytime you change any element or change any of the property's of XHTML it's better to use CSS other then surrounding text with bold tags or something like that. Here is a better way of making text bold and italicizing text through CSS first we need a webpage to work with, this is just a simple page with a unordered list and a ordered list.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> <ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> <li>Unordered list item 3</li> <li>Unordered list item 4</li> <li>Unordered list item 5</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> <li>Ordered list item 3</li> <li>Ordered list item 4</li> <li>Ordered list item 5</li> </ol> </body> </html>
In order to change the style, first you need to write what element you want to change the element we're using is ul and then the property you want to use, the property we're using is font-weight, font-weight is the technical term for how thick the font is.
<html> <head> <title> This is the title. </title> <style type="text/css"> ul { font-weight:bold; } </style> </head> <body> <ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> <li>Unordered list item 3</li> <li>Unordered list item 4</li> <li>Unordered list item 5</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> <li>Ordered list item 3</li> <li>Ordered list item 4</li> <li>Ordered list item 5</li> </ol> </body> </html>
Now your text in the ul tags will be bold, next we will be italicizing text, so let's italicize the ordered list we just made, the property we need to use for that is font-style and as the style just use italic, this will italicize all of the text in your ordered list.
<html> <head> <title> This is the title. </title> <style type="text/css"> ul { font-weight: bold; } ol { font-style: italic; } </style> </head> <body> <ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> <li>Unordered list item 3</li> <li>Unordered list item 4</li> <li>Unordered list item 5</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> <li>Ordered list item 3</li> <li>Ordered list item 4</li> <li>Ordered list item 5</li> </ol> </body> </html>
Now you can see your unordered list is bold and your ordered list is italicized. So like I said while you can use the em and strong tags to make text bold and italicized, this is a much easier way to do it.

Page generated in 0.0027 seconds.