What Is CSS?
Style vs. Markup
Syntax & Rules
Methods of Use
Putting It All Together
a Style Sheet
Planning: The essential ingredient
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
- 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
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
- 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.
Watch the video