| Why CSS? | | | | 12px;font-weight: bold;color: #FF0000; |
| The old way of changing the way your text looks in | | | | } |
| HTML has been outdated. The new way to do it is | | | | You can make it a san-serif font and increase the |
| by using style sheets. Learning CSS (Cascading Style | | | | spacing between the lines: |
| Sheets) is really worth the effort. One main reason is | | | | .spacedtext {font-size: 12px;font-weight: |
| for consistency - you don't have to remember every | | | | bold;line-height: 150%;color: #000000; |
| single detail of how each font is set up. There is also | | | | } |
| a factor of readability when you are looking at the | | | | You can make it look like it was typewritten: |
| raw code. It also saves a lot of work. Instead of | | | | .couriertext {"Courier New", Courier, |
| having to type all the font attributes each time you | | | | monospace;font-size: 14px;font-style: |
| need to change the formatting, all you have is a | | | | normal;line-height: 100%;font-weight: normal; |
| simple "span" or "p" tag. And all that is needed to | | | | } |
| change the look of your fonts site-wide is simply | | | | To make it italic and underlined: |
| change the attributes in the Cascading Style Sheet | | | | .underlineditalic {font-size: 12px;text-decoration : |
| Basic CSS text style definitions: | | | | underline;text-decoration : italic;color: #000000; |
| The style definition starts with a dot (.) then a name | | | | } |
| for the style. Make it descriptive and easy to | | | | To make a line through the text use:text-decoration: |
| remember. (Built-in tags such as H1 tags, etc. do not | | | | linethrough; |
| start out with a dot.) | | | | You can center the text, left or |
| The definition is surrounded by curly braces { and } | | | | ext-align:justify |
| and the individual attributes are separated by a | | | | To apply the styles to your text, you can start the |
| semicolon (;) | | | | paragraph off with the "p" tag (p class="normaltext") |
| To set the font family, size and weight: | | | | for example, interrupt the format in mid-sentence if |
| .smalltext {"Times New Roman", Times, | | | | you wish with the "span" tag (span class="redtext") |
| serif;font-size: 10px;font-weight: normal; | | | | then resume the regular font by simply closing the |
| } | | | | span tag. Note: The tags above are surrounded by |
| You can change the color and make it bold: | | | | the greater than sign () but there is no way to |
| .redtext {"Times New Roman", Times, serif;font-size: | | | | display them properly in this article. |