Writing a Style Sheet
Planning: The essential ingredient
Before
you begin writing a style sheet (or designing any website in the first
place), you must do some planning. Here, you must decide on a few basic
elements of your website or web page. For our purposes, we'll agree on
the following basic styles we want to incorporate into our website. I'll
show you how to implement these styles in the order they are outlined
below.
- Text size: We want our text size to be readable, right? Right! We'll set our text size to 12 pixels high. Note: There is more than one way to set text size and there are pros and cons to each method. Please take a look at this explanation of the different methods for text sizing with CSS.
- Text color: We'll stick to plain old black. I'll explain how to change it to another color though.
- Text font and family: For ease of reading, we'll stick with a steadfast Helvetica, Arial, non-serif font. Non-serif simply means that there aren't any stylistic squiggles on the tips of the letters. Non-serif has proven to be easier to read in an online environment.
- Background color: We'll set our background to a very light grey color. This is easy on the eyes when combined with black text.
- Link colors and style: We're going to do something really cool here. We'll create roll-over effects for your hyperlinks using something called a pseudo-class. In the past, roll-overs were done with Javascript and images, but it's much easier to do it with CSS. These links will be orange, but when the mouse rolls over the text, the text itself will stay orange, its background will change to blue, and the underline will disappear. Don't worry, it's not that complicated!
- Text spacing: Much like we write APA styled papers with double-spacing and indents for easy reading, we'll set up our text on the web page to do the same thing.
That's about it. After we're done doing that, I'll discuss some other cool things you can explore with CSS after you've mastered the basics.
