| Cascading
Style Sheets: A Primer Computing Resources >> Instruction >> Tutorials >> Web Development >> CSS |
|
|
Text Formatting with CSSWe want our text to be 12 pixels high, black, and in an Helvetica, Arial, non-serif font. To write a CSS file, you can simply use Notepad on a PC (or any other simple text editor). If you're on a Mac, try using BBEdit or TextEdit. We are going to write an external (attached style sheet) and link it to our HTML file. So to begin formatting our text, we would write the following in our CSS file: body
{color: black; font-size: 12px; font-family: Helvetica, Arial, non-serif;}
Explanation: What we have done here is declare that all text that is written within the <body> tag will be rendered in black, 12 pixels high, and will be in either Helvetica or Arial font with non-serif lettering. If the computer has the Helvetica font installed on it, it will render the type in that font first. If it doesn't have Helvetica, it will look for the Arial font. If it doesn't have that font either, the computer will simply render the text in the font set up as the default on that particular computer. This is why they are called cascading style sheets (i.e. it cascades down to the next available setting/declaration). If you wanted to render some text differently, you could set up style declarations for other HTML tags (for instance, for the <p> tag) and they would override the style declarations that we have laid out for the <body> tag. Also, we should note the different ways we could have done this. First, instead of using "black" for the color, we could simply write another color's name. Take a look at this chart for a list of color names and hex codes. If you don't want to use color names, you can also use the hexidecimal code (a six character alphanumeric code). The hex code for black is #000000. You must always preceede a hex code with the pound (#) sign. And last, you could also use the RGB equivalents for colors by writing color: RGB (0, 0, 0) where the three numbers (from 0 to 255) indicate the level of red, green, and blue hue, respectively. |
|