HTML And CSS Mentor

HTML stands for hyper text markup language and CSS stands for cascade style sheets. I know this may sound confusing to you, but as you start learning, a lightbulb will start lighting up in your head. Please do not expect to learn everything overnight, because I can tell you it does not happen right away, but as you start using it more, the more you will understand. I know this may sound greek to you right now, but have patience. You will learn HTML and CSS.

• Don't expect to understand HTML and CSS Right away. Rome was not built in one day after all.
• Take baby steps. Learn one thing, then come back. This will keep you from getting overwhelmed.
• Don't give up. All else fails, contact me and I will try to help you. With HTML and CSS, if you miss one thing, there are problems.
• When using HTML or CSS, choose colors that are going to complement each other so that you are not overdoing it.

These are codes that you will be using on a regular basis so they are very important to know.

Paragraph - <p>
Bold - <b>
Underline - <u>
Italics - <i>
Line Break- <br>

To add width, you would have to do this: <p style="border: dotted 2px #000000;width:500px;"> You Should notice that there will be an ending of </p>If you want to add text to the inside the borders like I have done with this lense,you need to put the text in between <p style="border: dotted 2px #000000;width:500px;"> and this.</p>

If the text seems too close to the edge of the borders, you can move it farther away from the border by adding ;padding to it. This is what you would get with the previous examples. <p style="border: dotted 2px #000000;width:500px;padding; 5px"> As you can tell I used 5px as the padding.

The 500px is not set in stone. Experiment with the numbers and you should see what you get. The 2px you see is how thick the border is. You can play with that too.

To add background color you need to do this: <p style="border: dotted 2px #000000;width:500px; background: #FFCCCC">

To add text color to this you need to do this: <p style="border: dotted 2px #000000;width:500px; background: #FFCCCC;color: #FFFFFF;">

As you do all of this, look at the pattern on how this is done. You may not get everything right away, but as you do it more, you will start understanding how it is done. Basically all I had done was add width: 500px. The 500px does not have to be 500px. The number can be anything you want as long as you add the px right after it. Instead of using the 500px, you can always use percentages also. I usually use that on the top module here. Why? Different computers see things differently. A smaller screen will see one thing and a bigger screen will see another. If you set the width of 400px, it may drop down to the next line if you have a smaller screen and yet if you have a bigger screen, less chance of a new line. With percentage, it works with your screen and does not typically drop down to a new line like the fixed width. Fixed width is like 500px and fluid would be like 50%.

<p style="border: dotted 2px #000000;width:500px; float: right; font-size: 20px">

You notice that I added ;float:right

So if you want left you'd do this:;float:left

You probably have seen some things on some lenses and have no idea how they did it. Padding is where you having padding on all sides around a area. Take some of the codes that you have learned before and add padding: 10px; That is all you have to do. Remember you can whatever number you feel is right. If you only one side, then you would put the side to padding like say you just wanted padding on the right, you would do padding-right: 10px;.

If you want to add margins, you would do something similar to the padding. Instead of adding padding, you would add margins instead.