Anime Oasis Reborn // Sweetness of Spring // New Beginnings // Version 3.05

Anime Oasis Reborn

Current Section: CSS -> CSS Embedments // « Back

Ever wondered why you have to set your CSS for each page or even tag separetly? Guess what: You don't. There are three kinds of CSS Embedments.
External: The CSS used for the site is saved in a separate file.
Internal: The CSS used for the site is saved in the head of the source file.
Local: The CSS is written directly into the tag.

There are two major difference between these three.

1. The area of effect
External: In all files that are linked to it
Internal: The entire Web Page the CSS Code is written in.
Local: Only the tag it is written in.

2. The Priority
The Priority of the styles are indirect proportional to the Area of Effect.
Or in plain: If you link an external CSS to a page and have an internal that defines something different for a segment, the internal has priority and overrides the external.
Local overrides Internal
Internal overrides External

Now since you understand the nature of the different CSS-Types, it is time to tell you how to use them.

External

As mentioned before, External Stylesheets have to be linked and are saved in a different file.
Before we can link something, we have to create it. And that's what we do now.
Create a file with the ending .css somewhere in your webhost directories.
Preferably use a directory solely for such files, so you can have somewhat unified link codes.
Content:
A .css File is a plain text file with only the css commands in them.
They follow this logic:

body {
color: yellow;
background-color: green;
font-family: "Arial,Sans Serif";
}

This code segment would turn all writings within your body tag into a yellow Arial font and the
background color to green (I do not recommend copying this code...).
Simply make your CSS file in this pattern with your own modifications.
If you still have no idea on how to do this, please consult the other CSS Tutorials on this page.

Linking
Now this is where it starts to become handy. You can, as stated before, link any number of web pages
to a single CSS File, unifying the look and making edits to the overall style of all sites a walk in the park.
You need to write the link to the CSS File into the Head Section of the Website you want to link.
The code to link a CSS File to a Website looks like this:

Now you may ask: "What? All that bla bla, for this little line?" And you're right. That's all it takes.
Nonetheless I'll explain the elements of the command.
REL: It tells the Command what the found item should be treated as. In this case: A CSS-File.
HREF: The Source of the file. '../' means: Go back one directory. Use this to navigate through your folder structure or simply use a static adress like 'www.mypage.com/34289/sites/CSS/style.css'
TYPE: Why do the people need to make things complicated? Anyway, this is...yet again...another little thing that tells your browser how to treat the found file. As css file in plain text format.

That's all there is to say to external StyleSheets, really. Remember to use you knowledge about CSS in General and you'll be just fine.

Internal

This stuff is written between the <style> and </style> Tags and does affect everything on the site it is written on. The <style> tags go right up inbetween the <HEAD> tags of the file. It also works outside of them...but what do you know. Standards.
The Internal StyleSheets follow the exact same logic as the externals do, but they don't need to be linked or anything. So please refer to the upper section 'External/Content' or the other tutorials regarding CSS and you'll do fine.
Please remember that Internal overrides External, so if you define H1 in both External and Internal, it'll use the statutes of the Internal Definition.
That's about everything that needs to be said about Internals.

Local

Local CSS is only to be used for very specific modifications, for example you want this specific headline looks blue instead of the standard black.
Any CSS from Internal or External will be overridden and it will use the local definitions instead.
Remember though: If you defined font-size in internal and don't redefine it in local, there is nothing to override and it will use the internal definition. Please be aware of that.
Other than that, there is not much to be said. Simply include your 'style = "..."' in any local tag you like (for example <div> or <p>) and off you go.
An Example may look like this:

Well...that's about it. That's everything you need to know to make unified web pages possible with little effort.
If you should find any mistakes in this little tutorial I sincerely beg your forgiveness.
In this case or in the case of further questions please contact the web mistress who will take care of your request.
And now I wish you a lot of fun and a good time with CSS.

Written by Refugnic Eternium
2nd of June 2007