[Guide] How to add CSS to your webpage.

[Rawr]

If you're building a website, or have already built one but haven't used CSS in it, you should do so! It saves a lot of space and time when making a multiple based website.

Requirements -
- Website building knowledge.
- Able to know how to copy and paste.

Advantages of using CSS for your website -
- Time saving - You don't have to continually add your Style to every Template, with this it's just one line of code linking to your CSS sheet.
- Space savor - In your Templates; you won't have to have as much code.
- Easier - I just find this easier to do.
- Organized - Having CSS doesn't make your work so 'Crowded', it gives you space to put your other code in your templates.

Step 1 - Creating your CSS

CSS is short for Cascading Style Sheet, meaning you can use one CSS file for multiple templates for your website. This not only saves time and effort, but makes your template much cleaner.

In your Main folder create a new notepad document called "Index.CSS" and Save it for now; still leave this open for later.

Step 2 - Adding the code to your CSS

Okay, now open up your Main Template and copy all of your code inbetween the <Style> tags and paste it the Index.CSS sheet.

Save your Index.CSS now, and delete the code from your Main Template you just Copy and Pasted; this includes your <Style> takes as well.

Step 3 - Linking your CSS to your Template(s)

Copy and Paste the following code into your Templates in between the <Head></Head> Tags. It doesn't really matter where you place this line of code in between it.

Code -

<link href="index.css" rel="stylesheet" type="text/css">

What this line of code means...
- The (link href="index.css") is telling the template when it runs to link to this css file as a resource for its styles.
- The (rel="stylesheet") is telling the template what this is; in other words a stylesheet.
- The (type="text/css") is telling the template that it's a a text CSS file.

Note: You can create and add more then one CSS sheets to a template.

Step 4 -

Save, and test your website. It most likely will work, because this is what I use for my website.

Hope you like!

"This Guide on How to add CSS to your website. is © of Rawr Im Phat. Any ripping of this guide will result into a Report, and most likely a BAN."

 

[The Dark]

Very basic guide, but a key to a good web developer. Consider writing the advantages on using CSS and expand the guide. Adding some pictures and proof reading it all will help. Not bad.

 

[Rawr]

Okay, thanks.

 

[Rawr]

Added Advantages and more wording in the guide. I don't know where pictures would be helpful, anyone know?

 

[The Dark]

Added Advantages and more wording in the guide. I don't know where pictures would be helpful, anyone know?

Just a pretty web page at the the end that uses CSS. Or a picture of how jumbled the HTML code can look when CSS is not used.

 

[Dark boy42]

I kind of misunderstood the title lol (web based CS:S?) lol... great guide nonetheless.

 

[Rawr]

I kind of misunderstood the title lol (web based CS:S?) lol... great guide nonetheless.

Lol, sorry for the misunderstanding. Thanks for the comment though! :laugh:

 

[Xaranx]

Great guide 8/10.

 

[orlando_jordan]

8 out of8 needs more work

 

[SuF]

Very basic, and it only expains how to have an external style sheet, which is basic....

 

[Rawr]

SuF, the whole point is to have an external style sheet. This is a major space savor in the website world. Yet, some people still put there style in their templates because they don't know how to have or add an External Style Sheet. Which is why I made this guide.

 

[SuF]

Ok.. But its still basic... And Style stuff within your HTML code is still CSS... D: