Integrating Html And Css Part 1

the_aggie10 · October 28, 2006

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 "Xisto 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd;<html>	<body>		  <p> This is the text that would appear!</p>		  </body>		  </html>

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

<b>  Bold text here  </b>

This would look like this <b>Bold text here</b> Also this line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://forums.xisto.com/no_longer_exists/;

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.

p {						   font-family: Arial, Helvetica, sans-serif;						   color: blue;						   }

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

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

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:

		<html>			<link href="style.css" rel="stylesheet" type="text/css" />	<body>		  <p> This is the text that would appear!</p>		</body>		</html>

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

Edited October 28, 2006 by the_aggie10 (see edit history)

hts · October 28, 2006

no need for such a tutorial, methinks..it`s too general and similar stuff can be found on lots of sites (w3schools.com, for example) - I`m not saying you`ve copy/pasted this tutorial, but it teaches only the very basics :lol: ...my 2 cents..

oh yeah: it`s a good idea to use hex values when defining a color in css..also you can use shorthand tags..for example:

myclass {	   font: 16px Trebuchet MS bold;}

Edited October 28, 2006 by hts (see edit history)

Sharn · October 28, 2006

Yeah - it's all right. But... I would suggest adding some more things you can do. Like, for example. I know you can define borders in the CSS,I just don't know how. That would come in quite useful. Thanks anyhow. I've been wanting to learn CSS for quite a while, and this is just enough to get me started. :lol:

went · October 28, 2006

thanks for sharing this.

hts · October 28, 2006

Yeah - it's all right. But... I would suggest adding some more things you can do. Like, for example. I know you can define borders in the CSS,I just don't know how. That would come in quite useful.
Thanks anyhow. I've been wanting to learn CSS for quite a while, and this is just enough to get me started.

to apply a border style:

.borderclass {
border: 1px solid #000;
}

the first attribute represents how thick the border will be...the 2nd one is the style of the border (you can put there: solid, outset/inset, dotted, dashed, double and few others

)...the 3rd thing is the color of the border...good luck "bordering" your site

the_aggie10 · October 28, 2006

there is also a CSS tutorial on one of the first few pages. sorry i didnt want to spend too much time making it a tut on how to write CSS and HTML, but thanks for the compliments

Sign In

Integrating Html And Css Part 1

Recommended Posts

the_aggie10 0

Share this post

Link to post

Share on other sites

hts 0

Share this post

Link to post

Share on other sites

Sharn 0

Share this post

Link to post

Share on other sites

went 0

Share this post

Link to post

Share on other sites

hts 0

Share this post

Link to post

Share on other sites

the_aggie10 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information