Integrating Html And Css

Ok. Well i am writing this as a series of tutorials i will be doing on this subject, so enjoy. I hope this helps.


Introduction to HTML and CSS

HTML and CSS are to work together. HTML is what puts the characters on the page, while CSS is what makes everything look outreageous! For instance, I would use HTML if i wanted to put "Trap17 is the poop!" onto my page, although if i wanted to make it look nice like this by adding a font, and maybe some color, then I would use CSS.

Learn the HTML.
Ok this is my little into. to HTML.
In order to get words to appear on a page I would put

Now it does not matter how much you indent, or if you indent at all, but I do it cause it is easier to read through. So you have typed this into your text editor, such as notepad. Now it is time to see how it looks! Ok, save it as tutorial.html. Then go to your internet browser and click on File>Open> click on your file and BOOM! There it is. Congratulations, your first page (only applies to those who it applies to heh) Well you might have noticed it doesn't look very spiffy. Which is where the CSS comes in. But before we move onto that let me explain something. CSS adds stuff such as color or font. But you can still do a good bit of stuff in HTML for instance if you wanted to make the text bold it would be
This would look like this <b>Bold text here</b> Also this line: is a <b>doctype</b>, which holds the rules for different versions of HTML.


Learn the CSS
Well now that you have gotten just a glimpse of HTML it is time to move on to styling it, which is what CSS does. You can do CSS directly from the HTML document or do it from a totally different document, I personally do it from a totally different one.
So, say that I wanted to style that text that we did previously.

Lets dissect this shall we? Ok the very first character "p" is a selector. It selects all of the "p" elements in the HTML. The "font-family" is of course fonts, but it is saying that the first choice is Arial, and if that is not available then Helvetica, or if all else fails sans-serif. As you could have guessed, the last part is saying that the color is to be blue. You cant really look at this without the HTML, so take a look at the next section!

Linking the two together
In case you were wondering, these two don't just magically find each other. To link the two together you add a link element to it. Here is an example: say you saved the above code as style.css, then in the HTML before you put the closing head tag (</head>) you would add So, you have got the HTML document from earlier saved as tutorial.html correct? Well go in there and add the link element, so ultimately it will look like this:

Now save that file. and go to your internet browser, and again File>Open>tutorial.html and there you go, the text looks good, but you may have noticed the background looks like total poop, that is for next time. I hope you enjoyed this!

-Aggie

First of all, you should teach HTML, you should teach XHTML.

Second of all, y did you put yoru tutorial in quotes?

First of all, you should teach HTML, you should teach XHTML.

Second of all, y did you put yoru tutorial in quotes?