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!

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!

So roll up your sleeves, get Notepad, TextEdit, or your favorite text-digesting software ready to go, because we’re gonna add some CSS!

Adding an External Style Sheet

The first thing we need to do is start a blank document in either Notepad or TextEdit. You’re going to name this file “style.css” (without the quotes) and save it in the same folder with the “index.html” file you created in the previous post. (Design Projects – My First Website – website.)

The naming of this file isn’t really that important. You can call it “mainsheet.css” or “stylesheet.css” or even “frankie.css” if that’s your preference. The only thing you MUST have is the “.css” at the end. Also, don’t use spaces or upper-case letters. Instead of spaces, you can use a dash ( – ) or an underscore ( _ ). For example: “style_version1.css” Make sure to save it as a UTF-8 as you learned in the previous post.

Linking your web page to the external CSS file

Next, we’re going to link our web page to the CSS file we just created. We do so using this line of mark up:

Now, open your “index.html” and add that line of mark up anywhere between the <head> </head> tags. Like this: (I made it red to make it easier to spot.)

Wrapping our web page

It’s time to add our first “box” to our web page. This box will encompass or “wrap” the whole page itself. We will do so by adding <div> </div> tags. But before we do that, we need to name our <div> so we can use our CSS file to change how it will appear.

To name this <div>, we’re going to give it a unique id. “Id”s can have any name at all, just make sure it is descriptive enough to you so you know what is does. For example, this <div> is going to wrap our web page, so let’s give it an id with the name of “pagewrap”. And we write it like this:

Now add both the opening tag and the closing tag to your “index.html” file. See below (to make it shorter, I left out all of the content you created in the previous post.)

Save your “index.html” file.

Finally! Some CSS!

Go back to your “style.css” file and enter (or copy and paste) the following:

What this does is declare that the id called “pagewrap” (the # sign means “id” in CSS lingo) will have a width of 800px (the “px” means pixels.) The opening and closing curly brackets — { } — must surround the CSS code and don’t forget the semicolon at the end of the line!

Save your “style.css” file.

Take a look

If all went well, then when you view your “index.html” file in your browser (remember how to do that?) It should look like this:

View the web page

If your web page looks like the one above then congratulations! If not, go back an check all of the code and mark up for mistakes. Here is the full mark up of the “index.html” file for you to compare against:

Conclusion

We’ve now taken our liquid layout (a layout that changes width with the browser window) and made it into a fixed-width layout (a layout whose width is unaffected by the width of the browser window). Still it’s not much to look at, but we’re getting there!

In the next post titled Margins, padding, and borders oh my! Plus centering a website with CSS I’ll introduce you to the gory details of the CSS box model by adding some padding, some margins, and even a border to surround our web page.

Until next time!

But before we can tuck in our napkin and dine on some HTML goodness, let’s get your web page ready to be viewed on your own browser. And it’s very easy to do.

Let’s begin…

Getting ready

The first thing you need to do is to take the mark up you learned in “My first Website #3″, copy and paste it into a new document in either NotePad (Windows) of TextEdit (Mac), and then save it. Here’s that mark up if you missed it:

Now you need to save it. But you have to make sure to save it in a special way. The webpage itself is encoded using UTF-8 so you need to save the file using UTF-8. Take a gander below…

NotePad:

After copying and pasting the above mark up, choose “Save As…” from the file menu in NotePad. Then, in the “Encoding” drop down menu choose UTF-8. Enter the filename as index.html. Finally, save it the folder called “website” that you created in “My First Website #1“. (Design Projects – My First Website – website.) Done!

TextEdit:

First, make sure that your new document is a plain text document. Look in the “Format” menu at the top. If you see “Make Rich Text” then your document is already in plain text. If you see “Make Plain Text” in the menu, choose that.

After copying and pasting the above mark up, choose “Save As…” from the file menu in TextEdit. Then, in the “Encoding” drop down menu choose UTF-8. Enter the filename as index.html. Finally, save it the folder called “website” that you created in “My First Website #1“. (Design Projects – My First Website – website.) Done!

Viewing ‘index.html’ in your browser

It’s very easy to see what this webpage will look like without the need to have it hosted somewhere. All you have to do is start up your favorite flavor of browser (FireFox, Safari, Internet Explorer, etc.), go to the “File” menu, choose “Open File…” and then find the index.html document that you just created. Tada! You should be able to see our rather scanty webpage.

Now let’s spice it up a little!

Add a heading

Right after the opening <body> tag, we’re going to add a level 1 heading. It’s made using these opening and closing tags: <h1> </h1>. Let’s put one in! (To save space in this and subsequent posts, I’m not going to repeat the full markup. Ok?)

Don’t worry about the empty lines in-between the tags. I could put 100 empty lines and the result would be the same. Why? Because if you want empty lines, you have to tell the browser using HTML!

View the result: Level 1 Heading

Add some more paragraphs

Next, using some Lorem Ipsum, we’ll add a few paragraphs with the <p> </p> paragraph tags. (By all means, please copy and paste the text below, I would never expect you to type out Lorem Ipsum!)

View the result: Two Paragraphs

Add a subheading and more paragraphs

Headings have 6 levels: 1 being the largest and 6 being the smallest. You write them this way:

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

View an example here: Headings list

Each browser will size them differently unless you use some CSS to change how they appear. You can mix and match any number of levels and even use the same level many times on a single webpage — there aren’t any rules. So, let’s add a subheading using an <h3> </h3> tag along with some more paragraphs:

View the result: Subheading

Your homework

Have some fun playing around with the 6 different levels of headings as well as adding more paragraphs. I know that our website still doesn’t look like much, but we’re getting there!

In the next post we’ll finally take a look at adding CSS to our web page. See you then!

So let’s dive right in, cut to the chase, get to the point, (and any other expressions that you know of that make good transitions in writing… )

All HTML web pages MUST have these

All web pages must contain certain “elements” or “items” that allow browsers to recognize them as being web pages. As you may have experienced, your browser can render (display on your screen) many kinds of files such as single images, .PDF files, audio-only pages, and a multitude of others. So, in order for your browser to know that your web page really IS a web page, it must contain the following:

• a doctype
• an <html> tag
• a <head> tag
• a <title> tag
• a <body> tag

Let’s take a closer look at each of these so we can finally feel intelligent about HTML website design!

The doctype (Document Type Declaration)

The Document Type Declaration or doctype for short, basically says “Yo browser! This is a web page. It’s written in XHTML. Render it this way. Got it?” Since there are many different types of files that a browser can render and just as many types of HTML and XHTML, the doctype is a must-have.

The position of the doctype is very important. It absolutely, positively must be located at the very top of your web page since your browser can’t do anything with your web page file until it knows exactly what it is.

Here is what the complex doctype looks like:

Don’t worry about trying to memorize this jumble of HTML code. Most professional website designers do what I do: just copy and paste it to the top of every web page.

The <html> element

Now that the browser has a clue about what kind of file our web page is, we need to give it some HTML! If you read the post on what is HTML (you can read it here) then you know that all tags must have an opening and a closing. The opening tag says “begin here” and the closing tag says “end here”. Following is the <html> that you need for your web page:

Again, don’t worry about memorizing this, just copy and paste.

The <head> element

The head element is where you store information about your web page. Some information may include the web page’s title, a description of your web page (used by search engines), a keyword list (also used by search engines), a link to your CSS file, and others. For the time being, we will only concentrate on two of these: the title tag and the charaset meta element.

The <title> element

The title element tells the browser the name of your web page. This name appears in many places:

• At the top of the browser window
• In the Windows Taskbar or the Mac Dock
• In the Favorites or Bookmarks menu of your browser
• In the search engine results page (the page you see when searching on Google, Yahoo, etc.)

Because the title tag can give vital information about your web page, it’s important to make it more detailed than just “Home”. (More on proper title tag construction in future posts.)

The charaset meta element

There are actually many ways to display text on a computer, and each way has its own encoding. The meta element of charaset (which is short for character set) tells the browser to read your text as “UTF-8″. UTF-8 is a globally recognized encoding for text that all browsers can read — perfect!

As a newbie to website design, it really isn’t important to fully understand text encoding. Just make sure to use the code listed below and all will be fine. Speaking of which, here is the complete head section of your web page:

Where it all happens: the <body> element

This is it! In-between the <body></body> tags is where you put all of the actual content (text, images, and other goodies) that will be visible to your website’s visitors. Since this is our first example of a web page, let’s keep it simple by only using the paragraph tags: <p> </p>

One last thing

I’d like to show you the whole HTML markup for this web page, but I can’t just yet. There is one last thing. We still have to put the closing </html> tag at the bottom of the page!

Putting it all together

Now we’re done! Here is the complete markup for our very first (and very simple) web page:

View the actual web page

Note: after clicking on the above link, right-click on that web page and choose “View Source” to see the HTML markup. It’s the same as what we created above!

Conclusion

Yes, I do realize that this is by far the most basic web page in the world — no color, no images, no links, and pathetic text to read — but it is necessary to understand what makes up an HTML web page before moving into the really cool stuff.

In the next installment in the “My First Website” series, we’ll start playing around with the <body> element to add some headings and text.

Until next time!

Pre-CSS: the dark age of website design

Before Cascading Style Sheets came into being in the world of website design, designers had to put detailed HTML tags into every web page. These tags controlled things like font size, font color, background color, line height, lists, etc. etc. etc. This was all fine and dandy if your website only had a few pages.

As the web grew so did the size of websites. Gone were the days of sites that had a dozen or two pages only. The next generation of websites grew to hundreds and hundreds of pages. News sites are a prime example.

Now imagine this:

For months and months you’ve slaved over a new website. On this particular day you just completed the 81st article page… then your boss walks in. “David, I need you to do me a favor. The headings of the article titles are just a little too small. Could you make them a touch bigger? Oh, and while you’re at it, make the font color a little more… uh… cornflower blueish.”

Well, after uttering a few choice four letter words under your breath, you hit the keyboard. You see, poor David now has to edit ALL 81 PAGES of the website for the new changes to occur.

There’s gotta be an easier way… and there is. It’s called CSS.

Life in the golden age of website design

The beauty of CSS lies in the fact that you can actually separate the style that handles how a web page is to be layed out and displayed from the actual content (text, images, graphics, etc.). Let’s take a gander at an image to clear it up a bit:

As stated above, the old way combined the style and the content together. But with CSS, you create an external file that holds all of the styles for the ENTIRE website. They are global styles. So now, even if you have dozens and dozens of pages and want to change some part of the style, then all you have to do is edit the one style sheet and all of the individual web pages will immediately show the new style:

This method of CSS uses an external style sheet. It is by far the most commonly used method. Each web page has a tiny little bit of HTML in it that tells the browser where to find the external CSS file and to use it to control the layout and style of the web page.

Simple, yet powerful!

There are two other ways to utilize CSS: inline styles and embedded styles. Both have the right place and time for their use… which in my experience isn’t too often (with that said, Newbie Website Design will mainly focus on the use of the external style sheet.)

So, what is that whole ‘cascading’ thingy?

The ‘cascading’ part of Cascading Style Sheets is sort of like trickle-down economics (if you’re old enough to know what that is.) If not, here’s a better explanation:

With CSS, once you declare a style — for example, the H1 heading will be the color blue — all H1 headings will be that color no matter where they are located on your website. The only way to make other H1 headings a different color is to declare those in a special way. In other words, the style will cascade all throughout your website unless you say otherwise. (You’ll learn how to do that in later posts.)

HTML stands for “HyperText Markup Language”. XHTML stands for “Extensible HyperText Markup Language”.

Yada. Yada. Yada.

Let’s find out what those actually mean.

HTML – Text on caffeine

First there was text… Then there was hypertext! Normal text can’t do anything but be read. But hypertext can actually DO more. What’s that? Be clicked (basically).

The “markup language” part of HTML is a kind of code — that really isn’t code — which is used to tell a browser how to display text. Here’s how to tell the difference between “markup language” and “code”:

Markup language, using a very simple tag structure, says to the browser “Hey! Make this text italic!” Code, on the other hand, consists of many lines of confusing words and symbols that actually tell the computer exactly HOW to make those words become italic.

See the difference?

There are two reasons why I’m telling you this. First: because many professional website designers get all up in arms when someone accidentally calls HTML “code” (I’m not one of them, though). And my personal favorite: “markup language” sounds much less complex and threatening than “code” does.

Here are some examples of the HTML markup language:

<h1> </h1> – These make a heading for you.

<p> </p> – These make a paragraph for you.

<em> </em> – This pair changes text to italics.

<strong> </strong> – This pair changes text to bold.

Simple, right? And not as hard as code!

Most tags come in pairs; an opening tag and a closing tag. You can tell which one is the closing tag because it has a “/” and it comes at the end.

To make some text bold using HTML all you have to do is surround that text with <strong></strong>. Like this:

<strong>This is bold text</strong>

Which produces this: This is bold text

Got it? Good! Moving on…

XHTML – Text on even more caffeine

XHTML is actually a combination of XML and HTML and has become the new standard for building websites. I won’t bore you to tears with the long history nor will I try to explain the advanced features of XHTML. It’s simply enough to say that when you are ready for the advanced features of XHTML, they will be waiting for you.

I’ll be teaching you XHTML

All of the lessons and tutorials on Newbie Website Design will actually be built using XHTML since the foundation of XHTML is HTML itself! This means that all of your websites can enjoy all the beauty that HTML has to offer and still be up-to-date with the latest standards.