Never fear, there are actually a few ways to take that obnoxiously long CSS code and shrink it down to only 4 lines! In this post, you’ll learn how to miniaturize your CSS code and — as promised — talk about some spacing anomalies.

Recap: the full CSS code

Here’s the full CSS code for our “style.css” file we ended up with in the last post:

We won’t be making the “width” declaration any shorter because we can’t (so I won’t be including it in the following examples) but everything else can! Here we go…

The quick border code

We can quickly replace all four lines of the CSS code that makes the square border with this simple shorthand line of code:

If we don’t specify top, right, bottom, or left in the border property, then a complete square border will be created.

Easy padding

The padding code can be shorted to one line:

Just like the border property above, this will add 50 pixels of padding all around.

Minimized margin

Differing from the padding and border code, the margin code is a little longer:

What does it all mean? Read on…

Tick-tock, think like a clock

The four values in the margin declaration list the margin distances in this order: top, right, bottom, left. The easy way to remember this is to imagine a clock:

Each value can be different. For example: margin: 10px 50px 25px 30px; is perfectly fine. Also, padding can be written this way if each value is different.

A little shorter

The margin declaration can be shortened even further:

In this case, the first value of “30px” is for the top and bottom. The second value of “auto” is for left and right. You can use this shorthand for padding as well.

The final cleanup

We can now replace all of that lengthy CSS code for the #pagewrap with the following:

If you haven’t done so already, update your “style.css” file to the above code. You can then look at your “index.html” file in your browser. If all went well, you shouldn’t see any difference!

Some spacing anomalies

We declared that the padding should be 50 pixels all around. But if you look carefully you’ll notice that the padding at the top and the bottom look larger than on the sides (i.e. there is a greater distance between the top border and the “A Level 1 Heading” than there is between the left border and the text.) Here’s the web page to check out:

View the web page

The reason is the <h1> heading and the <p> paragraphs have their own margins and padding. Both of these come from your browser’s default style sheet. You can change them by making your own style declarations in your “style.css” file. Let’s do that now by adding the following code:

This CSS code will remove the margins on the <h1> heading and add 10px of padding at the bottom to give us some space between the heading and the first paragraph.

View the result

While this is closer to what we want, it’s still not perfect. There is still the issue of line-height that is adding some extra space above our heading and the issue of extra padding after the last paragraph. But since we’ve covered a lot of ground today, let’s cover those topics in a later post, shall we?

Your homeowork

As always, take some time to play around with the values for the padding and the margins. If you’re feeling adventurous, add some CSS to the h3 heading.

In the next post we’ll take a look at dividing up our web page even further by creating a separate header section for our website’s title and adding a little background color as well.

See you then!

According to the most recent research, it is estimated that there are now over ONE TRILLION web pages on the Internet today. Both Google and Microsoft confirm this with Google stating that it already has those trillion+ web pages indexed (that’s gotta eat up a lot of storage space.)

Putting this into perspective: it means that there are more web pages than there are humans living on this planet (world population is estimated to be approximately 6.7 billion). Taking it even further with a little bit of elementary arithmetic, it’s the same as saying that each one of us bipedal, opposable-thumbed, conscious individuals has about 150 web pages of content online.

If you spent only one minute to read each web page in existence today, it would take you about 31,000 years of non-stop reading to get to each one; no sleeping and no bathroom breaks (unless you’re using wireless laptop, netbook, or iPhone )

Is it worth it?

After stumbling across these statistics today only one thought bounces around the gray matter of my mind: just how much of those trillion+ web pages are worth reading? Honestly, if I could live to be 31,040 years old (my 40th birthday is next month) would it be worth my time to try to read it all?

The answer is, not surprisingly, no (which is all well and good, since I have no desire to live to be 31,040 years old.)

The Internet junkyard

The World Wide Web is filled with junk. There are countless websites overflowing with outdated and irrelevant information, abandoned websites and blogs litter the once neat and tidy Internet landscape, and websites build by people who truly believe that they can make ‘easy money’ online are troublesome obstacles to getting at the really helpful information.

Don’t get me wrong. There are a lot of great products on the Internet. But there are many, many more so-called “review websites” whose only goal is to encourage you to buy the product it is promoting (so the website owner can earn a commission.) This is why I prefer review websites where the product’s quality rating is determined by visitors who vote on the product.

What do you think?

Do you ever ponder, as I sometimes do, just how many websites on the Internet are nothing but junk? A few? Some of them? All of them?

To help get a feel for what NWD readers think, I’ve created a little poll. You can find it here to cast your vote:

In this post we’ll take a look at line breaks, what is the HTML tag for one, and when to and not to use them.

(By the way, if this is your first time visiting Newbie Website Design, then I encourage you to check out the My First Website series to learn how to build websites the right way.)

Let’s get learn more about HTML line breaks, shall we?

What is a line break?

A line break is a special HTML tag that will force the very next the next character (or sentence or paragraph) to appear on a new line right below the one above. It is similar to pressing the “return” key when using a word processor.

It isn’t gonna work

If you’re using a text editing program like Notepad (Windows) or TextEdit (Mac) to write the HTML for your website, then pressing the return key in order to create line breaks isn’t going to work. You could press the return key a hundred times and you still won’t see those line breaks when you view your website with a browser. To get the desired line-breaking space that you want you either have to use the special HTML line break code or use CSS to do it for you.

The HTML for a line break

Here’s the HTML tag you need in order to make a line break:

Pretty simple, huh? Just plop this where you want a line break and you’re done!

Or are you…

The wrong way to do line breaks

Now, before you go adding the HTML line break code all over your layout, just remember this: if you ever decide to change the design of your website, then you may have to go through all of your pages and do some nasty hunt and replace.

For example:

Let’s say that you added two line breaks after all of the <h1> heading tags on your website. Later, if you decide that you only want one line break after the heading tags, then you have to erase all of the extra HTML line break code from every page. And if you have added line breaks after subheadings, paragraphs, and other layout elements, then let the editing nightmare begin!

The better way to do line breaks

Instead of relying on HTML for your line breaks, let an external CSS file handle the task. You won’t be using the <br /> tag. In its place you’ll be using a padding-bottom to get the job done right. By using CSS in an external file, you can control the height of this “padding” all throughout your website from one location.

(NOTE: to learn more about what an external CSS file is and how to make one, I strongly suggest going through the My First Website series here on Newbie Website Design. Post #5 talks specifically about how to add an external CSS file. )

The “non line break” line break

Okay. Okay. So we’re not technically going to be adjusting the line breaks. But what we are going to do is control how much white space occurs after an element such as a heading or a paragraph. We do this by using padding-bottom in our CSS. It’s easy. Take a look:

This CSS simply tells the browser that all <h1> headings will have an extra 20 pixels of padding below it — right after the closing </h1> tag. Any text that follows the heading will be pushed down by 20 pixels. You can do this after paragraphs, too:

The p represents the paragraph tags in your HTML. After a closing paragraph tag (</p>) the very next element — be it a subheading or another paragraph — is pushed down 15 pixels.

When to use an HTML line break

Personally, there are only two times when I use an actual HTML line break in my designs…

#1: One-shot deals

If I need a little extra space in a design and I know 100% for certain that it won’t be repeated on other web pages I’ll use the <br /> tag. Before you add an HTML line break, be certain that it will never become a repeated part of every page of your layout.

#2: Proper text layout

There are times when you just have to make sure that the text of your layout flows correctly. Since all browsers won’t display your text exactly the same way, you can use HTML line breaks to ensure a clean look. A good example of this is when you have a centered heading that contains a lot of text. For example, this looks just horrible:

The word “system” hangs like deadweight at the bottom — stranded and all alone. But with a few line breaks we can make it look much, much better:

Here’s the code (keep your eyes peeled for the HTML line break code):

Conclusion

Line breaks aren’t that hard to create with HTML. Because of that, they are extremely easy to add to a design. The downside is that by using them too much you might make updating or altering your website’s design and layout a major pain down the road. Start off right by adjusting the padding-bottom in an external CSS file and all future headaches will never cross your furrowed brow.

If you haven’t done so already, fire up Notepad (Windows) or TextEdit (Mac), open the document called “style.css”, and get your “index.html” loaded up in your browser to view your results as you go through this tutorial…

Adding a border using CSS

The first thing we’re going to do to our “style.css” file is to add a border to #pagewrap. Here is what you should have written already for the #pagewrap id:

Next, we’re going to add four more lines of code to create a border around our page. Take a look at what your #pagewrap should look like with the new code:

The “border-???” determines where the border will appear: top, right, bottom, or left. The “1px” means that the border will be 1 pixel in width. The “solid” means that the border will be a solid line (there are a few more styles of borders that I’ll get to in a minute.) And the #000000 is the hex color code for pure black.

Save your “style.css” file, fire up your browser, and view the file called “index.html” in your browser to see the result. It should look like this:

View the result

Different kinds of CSS borders

There are actually nine different kinds of borders you can create using CSS, but four of the five require a different kind of code than what is listed above (and, in my opinion, look horrible) and one we we’ll get into in a later post. So, for now, here is a list of the most-often used borders that can be created with the above code:

• solid
• dotted
• dashed
• double

Here’s what they look like:

A solid border.


A dotted border.


A dashed border.


A double border.

(NOTE: The double border requires a minimum of 3px to display — 1px for one line, 1px for the other line, and 1px of white space between the two.)

Adding margins and centering our website with CSS

Let’s get our web page centered in the browser window. It’s quite easy, actually. Just add these two lines of CSS code after the border code:

As before, save your “style.css” and reload the “index.html” file in your browser to see the results. It should look like this:

View the result

The “auto” means “automatic”, so the browser will automatically adjust the left-right margins of our web page. If you resize your browser window, the position of the web page will adjust accordingly.

Next, let’s put a little distance between the top and bottom of our web page and the browser window. Depending on your browser, there might already be a little space. This is because all browsers have quite a few default CSS settings. But when you create your own CSS, it will override the default settings. Add these two lines of code:

And here’s the result:

View the result

Adding padding

Finally we’re going to add some padding. The concept of padding is a little strange when you first begin using it. All it does is add some space between your content and the border. The strange part comes from how it changes the size of our #pagewrap.

We declared that our #pagewrap is to be 800px (pixels) wide. Adding the margins didn’t change its width — it’s still 800px wide. But when we add padding, the actual size of the page WILL change. The content will still be 800px wide, but the padding will add more pixels around the content.

Add this code to your CSS:

Here’s the result:

View the result

Adding it all up

Time to do the math. As I said above, margins don’t change the size of the page itself. But then we added 50px of padding all around. That means we now have an extra 50px of width on the left and an extra 50px of width on the right making our web page 900px wide.

But wait! Did you for get that we added a 1px border around the whole thing? Now we have to add 1px of width from the left side and one 1px of width from the right side.

The grand total is 902px wide!

Keep this in mind when you set the width of something using CSS. Margins don’t change the width, but adding a border or padding WILL!

A GREAT way to view the CSS box model!

Here’s a website that has a wonderful interactive representation of the CSS box model to help you understand all about margins, borders, padding, and more. Make sure to move the “perspective” slider at the bottom to see the full effect!

>> The CSS box model <<

The full CSS code

This is what your “style.css” file should look like now:

That’s a lot for just one pagewrap!

But, there actually is an easier way to write this so that it only takes up 4 lines instead of 13! (I’ll show you how in the next post in this series.) Besides, if I show you the short hand method first, then you might not know about the CSS code above (it is used quite often.)

Your homework

We covered a lot of material in this post (and thank goodness our web page is actually starting to look like a real page!) Go ahead an play with some of the numbers. Make your borders thicker, remove one or more of them, or change their style. Add more padding or take away some. Play with the width of #pagewrap to see what happens.

In the next post, I’ll talk about the shorthand way to write all of the above CSS code as well as discuss some of the spacing issues you may have already caught (i.e. did you notice that there appears to be more padding on the top than on the sides? In the next post, you’ll discover the reason!)

Until next time!

Internet forum behavior
A short and funny video about how to behave on an Internet forum.

Create a strong, secure password
Learn the right way to create an extremely hard-to-crack password.

Technology for country folk
A humorous look at some common techno-lingo.

4 Classic navigation positions
Learn about the 4 classic navigation positions as well as how to choose which is best for your website.

WYSIWYG or not to WYSIWYG?
A quick look at why beginners to website design should avoid using visual WYSIWYG editors.

Learning from “Your Logo Makes Me Barf”
Learn what not to do when designing your logo with some “slap-your-forehead” examples.

Make My Logo BIGGER Cream!
A humorous video that pokes fun at bad graphic design plus a few lessons you can pull from it.

Boxes – the building blocks of websites
A visual guide to help you uncover just where the invisible boxes of a website’s design are located.

Cleaning up an all-centered website
Find out how to fix the most common mistake made by beginners to website design.

In this post, however, I’d like to talk about which font style is best for legibility (i.e. which font is easiest to read on a computer monitor.) But before reading deeper into this post, I encourage you to check out the post mentioned above (The best fonts for websites) as well as the post titled Different types of fonts. They both contain information that will help you understand this post.

All done? Ok! Let’s uncover which fonts are best for website legibility:

Serif fonts: The crowned ruler of the paper kingdom

If you’ve ever read a typical magazine or book (that was actually printed on paper ), then you will have seen a serif font in action. Serif fonts — the kind of fonts with the little “slashes” at the ends of the letter strokes — are the best fonts for the printed word. Why is that? Because the little serifs actually help to make the letters flow together and make reading much easier on the eyes. Some common serif fonts that you probably know include Times New Roman and Georgia.

The computer monitor conundrum

There is one thing that many computer monitors lack that makes using the above mentioned serif fonts the perfect choice for your website: adequate resolution. Resolution is basically how many pixels your monitor can display. The more pixels there are, the more details you can have. For example: my monitor has a resolution of 1600 x 1050 (which is pretty darn good.) But not everyone has such a high resolution monitor. And in order for those little serifs to make reading easier, a large amount of detail is required.

Back in the day (which, in computer years, means about 10 years ago), the best monitor resolution was around 800 x 600. Not that great for serif fonts. And nowadays, devices like Apple’s iPhone (320 x 480) and the new genre of computers called netbooks (most being 800×480) — both of which can be used to surf the Internet — also have a somewhat “limited” resolution to accurately display those detailed serif fonts.

Sans Serif fonts: The masters of all computer monitors

Since not everyone has a high-resolution monitor to surf the Internet, we’ll have to avoid using serif fonts on our websites if we truly want the pure text (i.e. the sentences and full paragraphs of text) to be easy to read and easy on the eyes. That’s where the Sans Serif fonts come to the rescue.

For many years, sans serif fonts have been the main style of font used for the pure text of websites. Since they all lack the little “slashes” of the serif fonts, they don’t become garbled on lower-resolution monitors. This makes them the perfect choice for the pure text of your website.

Looking at the first list from the post titled The best fonts for websites you can see only four serif fonts that all operating systems of all recent versions can display. Those are:

• Arial
• Helvetica
• Trebuchet MS
• Verdana

If you stick to using one of these for the pure text of your website’s content, then you will have almost guaranteed the legibility of your text. Your visitors may not directly thank you for it, but they will be much happier when reading the inspiring words you so arduously brought forth from the creative depths of your mind.

In this screencast, you’re going to learn how to create one for yourself. In addition, I threw in a few more ultra-convenient keyboard shortcuts to help you get around Photoshop in style!

Click the “Read on…” link below to view the screencast:

Many beginners to website design ask “What are the best colors for a website design?” Well, before you can even decide a total color pallet for your website, you need to know what are the best colors for your website’s content.

After reading this post, you’ll know.

It’s all about the eyes

What’s the number one reason a person visits your website? Is it for the ultra-cool graphics and design? Nope. People come to your site for one thing only: to read your content. Granted, your eye-popping graphics many intrigue a visitor enough not to click the back button on their browser right away. But if your content (the main text of your website) is hard to read, then they’ll abandon your website and you will have just lost a visitor for good.

Choosing the best colors your website begins with choosing the best colors for your website’s content — colors that make reading easy on the eyes. But just what are the best colors? Before getting into that, let’s look at some bad color choices.

What not to do

If you really want to strain people’s eyes and annoy them to extremes, then by all means do any one of the following:

• Put white or light text on black or dark background
• Use two colors that have little contrast between them
• Have lots of black text on a yellow background

Take a look at this example:

I don’t know about you, but reading that white text on a black background really bugged me. And you know what? It bugs most website visitors.

Here’s another:

One more:

The best colors for a website’s content

I realize that it might not be the most flashy and eye-catching, but the best colors for a website’s content are black or dark-gray text on a white or very light, pastel-colored background. These combinations create the right amount of contrast for reading while avoiding or lessening the strain on the eyes. (By the way, Newbie Website Design uses dark-gray text on a white background. The headings and bolded text are in black.)

Final thoughts

As stated above, the main reason people visit your website is to read your content. Even if your graphics are stunning and the design is top-notch, no one will stick around or visit again if the text is hard to read. Make it easy for them by choosing dark text colors on a very light or white background.

Now, the only thing you need to worry about is writing good content!