MaraHTML

Coding resources, tutorials and more.

CSS Intro

Share this page:

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 just about every HTML tag in existence, there is a way to manipulate it using a stylesheet.

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 information goes here

</style>

CSS Syntax:

Inside the style tags is where the css begins. Using Css, you declare which HTML tag you want to manipulate, followed by curly brackets. These symbols act like the HTML ">" symbols. Whatever is inside them is executed to the HTML. Below is an example of changing the link font color to blue:

a{ color: blue; }

</style>

There are 3 different ways of inserting css, inline style, internal style sheets and external style sheets.

Inline styles

To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. A big disadvantage of this method is that it is only applied to a single element.

<p style='color: red; text-decoration: underline;'> Styled inline text </p>

Styled inline text

Internal style sheets

This is simply putting the styles inside the style tags as shown above.

External style sheets

These don't work for clubs/marasites, but if you've a multipage offsite-marasite, this is a useful method.

An external style sheet can be written in any text editor. The file should not contain any html tags, it should simply contain the css content you want. The style sheet file must be saved with a .css extension.

Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section:

<head>

</head>

Using CSS with IDs and Classes

To target any element whose class attribute has a value 'note':

.note { }

To target <p> elements whose class has a value of 'note':

p.note { }

To target the element whose id attribute has a value of 'intro':

#intro { }