Archive for November, 2009

box-model

Basics of CSS – Part #5

5
2 years ago
by Dennis Thompson in

So the Basics of CSS saga continues! In this basics tutorial, we’re going to talk about the very interesting box model!

The Box Model

All HTML elements can be considered to have an invisible box around them (assuming you have no borders or padding). Consider the following:

1
2
3

<p style="background-color:green; color:#fff;">Some text here</p>
<p style="color:#fff;">Some more text here</p>

Let’s try it! This is some text and this is some more text.

So where’s this box?! Well… This HTML element is actually surrounded by margins, borders, padding, and the actual content. This box model is illustrated by the background we created. We can see the “box” around the content portion of the box.

box-model

As we can see by this picture, we have our margins, borders, padding, and content. That is what every HTML element is surrounded by. Most browsers, by default, will automatically keep the margins, borders, and padding of content at zero..

1
2
3
4
5
6
7
8
9

body, html {
     margin:0;
     border:0;
     padding:0;
}

So those three properties are values are essentially understood by some browsers. Now, to clarify for every browser, you should include these first and foremost in your CSS document — before everything else.

What is what?

  1. Margins — can be thought as an always invisible area around the border.
  2. Border — can be different styles, colors, and thicknesses and it is the area that surrounds the padding.
  3. Padding — is the area around the content and it is relative to the background color of the box. So if your box is set to blue then the padding will also be blue.
  4. Content — the content is well, content. Text, images, links, lists, all of that good stuff!

Great! Now we know all about this box model but what use is it? Well in order to correctly set the size of an element you actually need to be aware of this box model.

Height and Width

So why is it so crucial to be aware of this box model? Well, when you define the height it width of an element you’re only defining the height and/or width of the content of the box model. So if you decide you want to add margins and some padding to an HTML element you can calculate the real width and real height.
Consider the following:

1
2
3
4
5
6
7
8
9
10
11
12
13

selector {
     width:500px;
     height:250px;
     padding:20px;
     margin:25px;
     border:5px solid #470b0b;
}

So let’s calculate the real width and real height!

Width

500px (width) + 40px (left and right padding) + 50px (left and right margin) +
10px (left and right borders) = 600px total width

Height

250px (height) + 40px (top and bottom padding) + 50px (top and bottom margin) +
10px (top and bottom border) = 350px total height.

So why does this matter in the end? It’s good to know the exact height and width of an element because if your webpage or a particular area within a webpage is dependent on being a certain height then you’ll want/need to know the exact height of other elements to make sure your web page is exactly how you intend. Sometimes elements can overlap, move in extreme places, and other assorted nasty things when you don’t know this real width and real height.

Typography for Web

0
2 years ago
by Dennis Thompson in

As we covered in the Basics of CSS part #4 there are multiple fonts that are good to use on the web. Those fonts are:

  1. Times New Roman
  2. Georgia
  3. Verdana
  4. Tahoma
  5. Trebuchet MS
  6. Arial
  7. Comic Sans MS
  8. Impact
  9. Courier New
  10. Lucida Console

How fonts should be used

There isn’t really a right or wrong way to using fonts on a web page. But there are things that people will generally tolerate and generally NOT tolerate.

All Caps

People will not generally tolerate a blog post, web page, email, etc in all caps… It’s usually considered shouting and is in poor taste especially on a web page! Avoid using all caps unless it is absolutely necessary!

Bold Text

The same general principles apply as the all caps. Don’t create a web page with all bold sentences or entire paragraphs of bolded text. Reserve bold text for important information and keywords that the user should be aware of.

Italic Text

Italic text is the same as all caps and bold text. Don’t make a web page that has half normal and half italic text or any other combination.. Keep your font style consistent. Reserve Italic Text for very important information that you want emphasized to your readers.

Font Color v. Background Color

This can be slightly tricky because not all computer monitors look the same and have the same colors. If you’re comparing an HP Notebook that is a year old to one that was manufactured only a month ago, then they might be more or less the same. But if you’re comparing the latest iMac to the HP that was made a year or two ago you might run into some major differences.

Bad Choices

Here are some poor choices for font color: “Blinding Lime Green” and other colors that really clash with your site in a bad way.

Anyhow, not all colors are bad on web pages! It depends on what is behind the text that makes all the difference in the world to a user. Consider this: Some good stuff!, Some more good stuff, Good stuff… I think we get the idea.. The three colors in the RGB (Red, Green, Blue) clash in any way you can possibly think. At all costs.. Try avoiding using these colors. Here are more examples!

Some text here, Some more text here, and especially… text here.
Clearly, we can see (and might give you a headache too) how certain colors can clash. You don’t want a visitor have to work in order to look at your site.

Using too colors can easily make your web site look like a circus act to visitors and even though it looks nice, different colors can actually tired your visitors out just by reading the content of your site!
Note: I use font in a very general sense. Fonts can mean anything from pure text on the page or links, etc.

Font Size

There are special places for large text size. Using a slightly enlarged text for readability is perfectly acceptable and probably appreciated for some visitors of your web site! But you can over do it by using an excessively large font size very quickly.. In fact, in your word editor you probably use standard 12pt font. Well depending on the styles you have on your web page and font, 12pt font can look very large! So be weary with text size!

ID v. Class

1
2 years ago
by Dennis Thompson in

As covered in the Basics of CS Tutorials, there are two main references ways we can essentially “link” a particular style to an HTML document, and PHP document, ASP, etc… They all operate in the same general fashion.

ID Selector

ID is called the “unique identifier element” and it is used to define a special case for an element. For example:

1
2
3
4
5
6
7
8
9
10
11

#selector {property:value;}
#footer-example {
     margin:auto;
     background: url("images/footerbg.gif") repeat-x bottom center;
     height:67px;
}

We are defining a special case for our footer

We can “call” this id by doing something like the following:

1
2
3
4
5

<div id="footer">
<p>Copyright &copy; 2009 AomicPages</p>
</div>

Why ID?

The reason why they chose ID is because an ID is unique to one person so two ID selectors CANNOT exist within the same html document. Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
<a href="#">Login</a>
</div>

<div id="header"> <!--INCORRECT-->
<ul style="float:left;">
     <li><a href="#">home</a></li>
</ul>
</div>

In the above example, you must choose one or the other to exist within the same document! If you wish to have multiple selectors within a document then you use the class selector. Click here to download a very small (2.98KB) zip archived example that I put together for the ID Selector!

Class Selector

A Class Selector is used when you have many elements that you want to apply styles to! You can technically create a web page with only class or ID selectors (although a combination of both is best).

So let’s say we have a cool looking box that we’re going to use multiple times on our web page. Obviously we don’t want to create a separate ID Selector for every instance that we use this nifty box. ID is the “Unique Identifier” and it can only be used once so… 

1
2
3
4
5
6
7
8
9
10
11
12

<div id="nifty-box">
<p>Some text here</p>
</div>

<div id="nifty-box">
<p>Some more text here is not valid</p>
</div>

So two of the same ID Selector within the same page is NOT valid! Our solution is by using the Class Selector!

1
2
3
4
5
6
7
8
9
10
11
12

<div class="nifty-box">
<p>Some text here</p>
</div>

<div class="nifty-box">
<p>Some more text here IS valid!</p>
</div>

That is perfectly fine to do! In fact, this make things significantly easier when creating a web page because you can easily implement styles across your entire web site with just a few keystrokes. Instead a few dozen ID Selectors you can get the job done with one Class Selector! Click to download a very small file to see this in action!

class.zip
class.zip
Size: 3.3 KB
Go to Top