MaraHTML

¤ Tisha Look's HTML Tutorial ¤

Getting Started With CSS

CSS stands for Cascading Stylesheet although most people just refer to them as styles. They come in handy when you find yourself writing the same formatting code over and over. For example, let's say you have a table on your page. And you want the text in each table cell to be red, Verdana font and 12pt in size. Normally, you would have to write that out for each and every table cell on your page. But if you use a style instead, you only have to write it once.

For just about every HTML tag in existence, there is a way to manipulate it using a stylesheet. However, I'm going to try to keep things as simple as possible here and just stick to the basics. If you want to learn more about styles, simply do an online search for "CSS Tutorial".

Also, please be aware that many of these codes are interchangeable. For example, you can specify the FONT-FAMILY in both the BODY and the TD sections of your stylesheet. You can also specify things like COLOR, BORDER and BACKGROUND in various sections.

The Style Tag:
Every style starts and ends with an open and closing STYLE tag. And, while it can technically go anywhere on the page, your best bet is to put at the very beginning of your document, ahead of the BODY tag. In fact, if your web page document is using a HEAD tag (not needed on Marasites), that's where you'd put your STYLE tags. On Marasites, you can put your STYLE tags in your Marasite Header. STYLE tags typically look like this:

<style type="text/css">
Style information goes here
</style>

BODY:
Since the BODY of your HTML document is where all the content goes, it makes sense that this is one of the bigger components of your stylesheet. Again, if you're satisfied with black, 12pt Times New Roman font on a white background, you can probably skip this section entirely. If not, read on to see how you can format your page without getting a headache.

The BODY component is just like the BODY tag: it holds the information regarding the background color and/or image, font information, etc. Here's an example:

background-color: specifies what the background color of the page should be (by default it is white)
background-image: specifies where the background image is located (if you'd rather use an image instead of a color)
background-repeat: specifies whether or not you want the background image to repeat itself. (If you don't want it to repeat, you would put no-repeat instead)
background-attachment: specifies whether or not you want the background to move when you scroll down the page. My site has a fixed background image which means the background stays put while you scroll down. If you don't want a fixed background, simply leave this out of your stylesheet.
font-family: specifies what font you want for your web page text
font-size: specifies what size you want for your web page text
font-weight: specifies if the text should be bold or not. If not, choose normal instead of bold.
font-style: specifies if the text should be italic, oblique or normal. Thus, the choices are italic, oblique or normal.
color: specifies what color you want for your web page text

TABLE/TD:
Stylesheets can really come in handy when dealing with tables, especially if you're using the same formatting for each table definition (TD or cell). You can also specify things like cell padding, borders and backgrounds. Here's an example:

width/height: specifies the width and/or height in pixels
border: specifies the color, width and style of the border. Width is measured in pixels and styles can be solid, dashed or dotted.
padding: specifies, in pixels, how much space there should be between the border and the text.
vertical-align: specifies how the text should be vertically aligned. Choices are top, middle or bottom.
text-align: specifies how the text should be aligned. Choices are left, center or right.

A:
The A tag stands for anchor and it's the tag used when creating links to other pages. There are 4 types of A tags: link, visited, active and hover. You'll need to specify styles for each of these in your stylesheet. Here's an example:

a - this is the regular state of the link
a:visited - this is the state of the link once it's been visited
a:active - this is the state of the link when it's being clicked on
a:hover - this is the state of the link when the mouse hovers over it
font-family, font-size, font-weight, color: all the same as before (see above)
text-decoration: specifies how the text will be "decorated" - options are none, underline, overline, underline overline and line-through

Putting It All Together:
As I mentioned earlier, you can manipulate just about every HTML tag in existence through the use of a stylesheet. And, to keep things from getting too confusing, I HIGHLY suggest putting your stylesheet at the BEGINNING of your HTML document. On Marapets, you can put your stylesheet in your Header which makes any future changes really easy since you'll only have to make them once. Either way, your stylesheet should look something like this:

Notice how you only need to call the stylesheet once. You can also add tags to it as you continue to develop your web page or website. For example, if you're using the above stylesheet and decide you want all your horizontal rules (HR tags) to be 500 pixels wide and red, you can add that to your stylesheet. Also be aware that a lot of the specifications inside the curly braces can be used with other tags. Just because I didn't use them here in the examples doesn't mean they can't be used.

If you want to learn more about CSS, simply do an internet search for "CSS Tutorial". And, as always, if you have any questions, you can contact me.

¤ NAVIGATION ¤

¤ Home

¤ HTML Tutorial:

Intro

Adding Graphics

Working With Text

Working With Colors

Adding Links

Creating Tables

Adding Music

Marquees

Scrollbars