Dark Scarab - HTML - CSS Preparation

PDF

Compared to nearly all of the other web development languages HTML is probably the easiest to learn. With this being the end of the HTML tutorials it probably seems like you are missing a lot, right? At the moment it would probably be quite difficult to create a modern web design without another language. One such language is called CSS. Basically CSS is what gives web designers power over the appearance of their web site. While you can do quite a bit with HTML, CSS makes the job easier and helps make your site look better.

So, now you probably want to get your self ready to learn CSS right? Well here are a few things that still pertain to HTML but are used almost strictly for CSS. The first and most popular is the <div></div> tags. These are called dividers and they do exactly as they say. For instance, let’s say you want a header, body, and footer in your site and want to use CSS to change their appearance. Your HTML would look something like this in the very beginning:


		<html>

		<head>

			<title>My Web Page</title>

		</head>

		<body>

		<div id="header"></div>

		<div id="body"></div>

		<div id="footer"></div>

		</body>

		</html>

Here we have our three dividers, one for the header, the body, and the footer. Now we have a new attribute. This is the id attribute. This is the name that you give to your divider so that you can use CSS to give it the style. If you want to style something in CSS you have to give it an id="" or class="". You will learn more about that when you learn CSS but both of those are necessary.

Usually web designers will use a whole separate CSS page that is linked to in the header of the HTML file. As stated before, you need to give a class or id name to anything you want to style, but sometimes it is too much to create a new name and then add the information to your CSS page. So it is possible to use CSS within your HTML page without making a CSS page.


		<html>

		<head>

			<title>My Web Page</title>

		</head>

		<body style="background-color:aqua;">

		<div id="header"></div>

		<div id="body"></div>

		<div id="footer"></div>

		</body>

		</html>

Using the style attribute you can use CSS styling without creating a new name and typing up even more into your CSS page. So, now that you know a little but about the HTML behind CSS you can go ahead and learn how CSS works and how to use it.