Mid Term - Project X

Now that you know more about the Main Tags, you should now have a basic website. Maybe some text, an image, maybe a link or two, but now lets dazzle it up. Attributes are what you will add to the text to change size, color, maybe style. You will change background colors and the margins of your page. By now you should be pretty familiar with main tags, and I will show you how to add these details into the main tags. To begin with we will take your basic paragraph.

<p> Hello World! </p>

From here in order to place in attributes and this goes for most of the main tags I gave you, you must add in another piece of code, allowing the computer to know what style you want into to have.

<p style=""> Hello World! </p>

Inside the style, you can add any of these wondorous attributes to give it spunk! Though you must begin with : and end with ; when it comes to the attributes. Look at the example below.

<p style="back-ground color: #000000; color: #FFFFFF;"> Hello World! </p>

Now you probably are really confused with the color numbers and letters. Don't freak, it is a hex code, which allows any computer to read it and know what color you want it based off the hex. Please don't try to remember any of the except maybe black (#000000) and white (#FFFFFF). Here is a link for you to use full of hex codes to go to the color your heart desires.
Only Zuul -- Hex Color Chart

background-color

It does exactly what it says, it changes the color of the background of that block of text, or that link. Anything and everything. Pretty simple.

color

This color means the font color. The color of your text, just make sure you don't have it clash against the background-color making it hard for your viewers to read. That just doesn't make for a good website.

font-family

This is for what text style you like. You can have Arial, cursive, Verdana, etc. Make sure it is readable.

font-size

This can be used in many ways, either in points, pixels, width, or percentages. Mainly stick with points and pixels, it makes it easier for the beginner. I'm sure your familiar with the point system on any wordpad you have. In your essay you make it 16 to make sure you fill those 5 pages. This is used th same way. Simple put the pt after the point size you wish your text to be, same with pixels.

font-style: italics;

This can be used to make your text italics. Instead of writing <em> you can simply place this in your style and all of it will be italics.

font-weight: bold;

This does almost the same as font-style, but instead of making it italics, it makes your font bold, much easier than using <strong>.

class

This gets a little more complicated, but very helpful, especially dealing with External CSS. This class tag helps us identify what we want our style to be called. Instead of using style for our attribute, we use css which allows us to place all of our attributes in one spot for just one webpage. This is explained more in the next step of why we need it. For now, here is an example to show you how to place it in the text.

<p class="category"> Hello World! </p>

Continue to Step 4 -- External CSS

Created by Krysten Allen, 02/24/2009