Tuesday, 5 February 2013

Types of CSS

I'll start with some basics.

There are three types of CSS. I'll also try and explain some to uses for each one.

1. Inline (styled within the tag)
2. Embedded (in between
<head></head>
)
3. External (styles on a separate page)

Inline example:

<p style="color:#000;margin-left:20px">This is a paragraph.</p>


Ideal for one style on one page and emails, e-shots etc.


Embedded example:

<head>
<style>

p {
color:#000;
margin-left:20px;
}

</style>
</head>


This would be ideal where there is small amounts of CSS and the same style needs to be applied multiple times to the webpage and also where there is only one page which requires the styles. If you have multiple pages that share the same style you are better of using an external style sheet, otherwise you would have to add the styles to each page not a good idea as the more text you have on a page the longer it takes for it load.
External example:

This is similar to Embedded however the styles are located in a separate document all together with the following file extension
.css
and then linked to the webpage by putting a link in the
<head>
tag like so:

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
</head>


The
href="styles.css"
is the location of the CSS file. In this case its in the same place as the webpage, but is could just as easily be
href="assets/styes.css"
.

The external stylesheet is best used for most situation except for e-shots as email clients wont call in external CSS. Its ideal for websites where multiple pages have the same style, all you have to is make sure that each mage has the the stylesheet link in the
<head>
section.