- Basic text editor
- Ability to save '.html' files/or '.css'
Ok to start us off lets start styping the HTML tags first (seen below)
Code:
<html>
<head>
<title>SiteName</title><!-- Put website name in there -->
</head>
<body>
</body>
</html>
You must have these codes in your webpage/text editor to make the CSS work, there is more then just those tags above, but we'll stay simple.
Now heres the content adding part, for a nicely styled webpage you need to know these tags/commands;
Code:
<h1></h1>
<h2></h2>
<h3></h3>
the codes above are called Header tags (different from <head></head> these make the page have header so for example;MMOCCFORUM
This forum is devoted to MMOCC's!
the HTML would be;
Code:
<h1>MMOCCFORUM</h1><br />This forum is devoted to MMOCC's!
With CSS you can have multiple header tags but without it, it's limited.
Code:
<p>
<br />
these codes are the most easiest, <p> for paragraph and <br /> for break paragraph.Code:
<strong></strong>
<u></u>
<s></s>
<i></i>
<a href="http://domainname/">text here</a>
These are probably the most used tags, the underline, strikeout, italic, and bold(strong) and link tags.Now that's really what you need to know about tags to style content.
Now before we begin, You will come across something called, Internal and External CSS, this means that you can either have the CSS within the index.html file(or yourwebsitename.html), or you can have the CSS in another file say, style.css, global.css ect. In this tutorial we're going to learn Internal CSS (Not that it's different in any way, just that it's within your HTML code).
Ok lets go back to our HTML code in our text editor. Now where you have <body></body> in between the tags (<body>here</body>.) press enter and then the up arrow key, now begin to type;
Code:
<h1>This is my basic website</h1>
<p>and this is my paragraph, below is some other tags that I can edit later in my CSS code</p>
<p><strong>This is a bold sentence</stong></p>
<p><s>this is a strike-out sentence</s></p>
<p><u>this is surely underlined</u></p>
<p><a href="http://google.com">somehow I think this is linked to google.com!</a></p>
Now lets get to the fun part, CSS code. Firstly you can just add CSS code anywhere, it needs to be within a tag on the html page, the tag is.... the <head></head> in the tags add this code;
Code:
<style type="text/css">
</style>
this is where you tell the page something, instead of it telling you.
Within the <style type="text/css"></style> tag type this;
Code:
h1 {color:blue;}
you're now telling the page to change the <h1></h1> text to blue, as simple as that, but wait, it still has that ugly web page text, lets change that.
Code:
h1 {color:blue, font-family:Verdana, Helvetica, sans-serif;}
notice that I removed the ";" and added a ",". This is when you want to add more to the code just like a sentence;
"Jimmy bought some chips, he later said the chips where nice."
Now we still have the <p> tags to sort out, say I wanted to make these tags a different size, color(colour - depends if you British or American or not) and give it a background color , you'd(I'd) write;
Code:
p {font-family:Arial, Helvetica, sans-serif, color:lime, font-size:30, background-colour:black;}
my font is now Arial and has been changed to the colour lime(green), and the background of the text is black .
That's it for this tutorial on the basics of CSS, next tutorial we're are going to learn about Body Background, and how to change the colour of the <a href> links and much more!, remember save your HTML file!, Have fun with CSS!, if you need any help, or you have spotted any errors in the code, pop me a PM and where I have mistaked!.
PART 2 - Coming Soon!