So, to start, I’m going to say that this all might be confusing, if you need help with something, post it in the comments and I’ll get things worked out for you.
When coding, I don’t use tables or tags like <font> (which most people tend to use). Why? Because the code can get really jumbled with that (you should see some of the stuff I have to deal with working on ILoveHits).
Not only that, but all the <font>, border=”0″, a ton of stuff that can be done with CSS is considered deprecated.
But most importantly in the new version of HTML (HTML5), the following WONT WORK:
With that said, I generally use <div>’s, <span>’s, <ul>’s and <p>’s the most, and tack on a class=”whatever” so it looks like <div class=”classname”>Content</div>
- <div>‘s are essentially just blocks, or squares, in your webpage.
- <span>‘s are kind of like <div>’s but they don’t cause a line break.
- <ul>‘s are unordered list, so essentially, when used with <li>’s you can create bullets
- <p>‘s are a paragraph…basically like a <div> but it adds some margin to the top and bottom.
is the same as <div>
You have a few options for CSS…One you can have an external .css file and link to it with:
<link type='text/css' href='mycssfile.css' rel='Stylesheet' />
Or…You can have it internally in your .html file with:
<style type='text/css'>
CSS goes here
</style>
And finally you can specify it for certain tags with style=’whatever’ so:
<div style='font-size:10px;'></div>
With the first two options, you can use 3 different things to change how your page looks.
The first is using the element type, so if I want all <div>’s to look the same way I would do:
div
{
font-size: 14px;
background-color: #111111;
color: #ffffff;
}
The second option is to style certain classes (where you define <div class=’whatever’> To do this, you put a period before the class name in the css:
.whatever
{
color: #333333;
}
Finally, you can style based on id‘s. While classes can be used on multiple elements, id’s can only be used on 1 element. To style something like <div id=’whatever’> you would use a octothorpe (or for regular people, a pound sign):
#whatever
{
font-size: 30px;
}
You’ll notice I use stuff like #333333 these are hex codes that represent specific colors, you’ve probably seen them before. To find which color is associate with which hex code, you can use a tool like this (also, feel free to take a look at the source of that to get a further look at CSS and HTML).
Let’s start off with some of the more basic CSS uses. Since you wont be able to use <font color=’green’> in HTML5, you’ll have to use CSS like below.
Fonts
Sure, Times New Roman does just fine for writing a letter, or paper, but when it comes to web design, 99% of the time you want to use a sans-serif font. What does sans-serif mean? Well, no serifs, hard for me to explain but this link should do the trick. The font faces I generally use are Helvetica Neue, Helvetica, Verdana, Lucida Grande and sometimes Arial.
So how do you change your font? That’s easy … This series involves the use of CSS, simply because it’s what’s considered valid rather than <font _____>Text</font> (which is what most people tend to use). You can put it in any of the forms I have above.
CSS:
font-family: 'Helvetica Neue', helvetica, verdana, arial;
The reason I have 4 listed, is if the person viewing your page doesn’t have the first font installed, it goes to the 2nd, then the 3rd etc.
As for font sizes and colors, you put those in the same way you do the font face/family. The code for these are:
font-size: 14px;
and
color: #111111;
To pick a color
To summarize, what I would do for fonts is make a class by doing:
<style type='text/css'>
.big_green_font
{
font-size: 40px;
font-color: green;
font-family: helvetica, verdana, arial;
}
</style>
Then, in my code I would use something like <span class=’big_green_font’>My text</span> to have big, green font.
Background Colors
Generally, you’ll want to associate a background color with a >div< (block/box) or <p>. To do this, you’ll use the CSS:
background-color: #111111;
So create a class:
<style type='text/css'>
.black_box
{
background-color: #000000;
color: #ffffff;
width: 500px;
height: 200px;
}
</style>
Then make your div: <div class=’black_box’>My content<>
With each post in this series I’ll get a bit more advanced, so keep checking back! The next post will probably deal with dimensions, padding and margins. Again, if you have any questions, post them below.
