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!

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!

Hopefully by now you have followed the instructions in part 1 and got your folders all set up and ready to go. Now it’s time to collect the software that you will need to build your very first website from scratch.

There are only two programs that you must have at the beginning. One of them you already have on your computer. In fact, you are probably using it right now to view this website (provided that you aren’t reading this using an RSS reader.) Unfortunately, that particular piece of software may be old and in disparate need of an update.

The second little software gem is what you will need to actually enter all of the HTML and CSS goodness that you are going to learn. But don’t worry, you already have this software on your computer, too (but you can get something even better on the Internet for free!)

Let’s get going…

Bad browser – good browser

I’m sure it’s obvious that a browser is needed to view the website you will be making. But what browser you use is of great importance. Now, I’m not going to get into a “Firefox is better than Internet Explorer” or “Safari is better than Firefox” sort of debate. The fact is all three are very good browsers. But you must update to the latest version of your favorite!

If you are using Internet Explorer 6, then you will be in for some major headaches. Internet Explorer 6 (IE6) is old, outdated, and is only about 50% compatible with the latest web standards. If you doubt that last statement, then go to Google or Yahoo and enter “IE 6 CSS bugs” (be prepared to stare in awe at how many results come up.)

Internet Explorer 7 is only about 75% compliant with current standards.

Your best bet if you are an IE fan is to get the latest version, Internet Explorer 8. It IS standards compliant — about 6 years late, but who am I to judge the world’s largest software maker? (Grab it here.)

Firefox is a great browser. It has Mac, Windows, or Linux operating system versions, a clear, clean interface, easy to use, and power features. But what most designers like the most is that the Mozilla foundation (who make Firefox) work quite hard to keep it up-to-date with the latest standards. (Grab it here.)

Apple’s Safari is also gem of a browser. It also comes in Mac and Windows flavors, has a bunch of goodies that the others don’t have as well as being up-to-date. (Grab it here.)

Text editing software you already have

Obviously if we are going to hand-code a website then we need a text editor. Here’s what you already have on your computer:

Windows: Notepad
(Find it in here: Start Menu—All Programs—Accessories)

Mac: Text Edit
(You’ll find it in your Applications folder)

Both will work just fine, but they lack the cool features of the free downloads that you can find on the Internet. Let’s look at those next.

Free text editing software

Now we’re getting somewhere! Here are two free programs that have a bunch of useful features that make hand-coding a website an even more pleasurable experience. Both have the ability to show more than one document at a time in the same window (perfect for switching between the future pages of your first website) as well as syntax coloring (the software automatically adds color to the HTML and CSS so it’s easier to see.) One is for Windows and one is for the Mac.

Windows: NotePad2
Mac: Text Wrangler

What about graphic software?

I know that most newbie website designers are anxious to start making really cool graphics for their websites. But for this series, I’m going to hold off introducing those techniques for as long as possible. Here are my reasons:

Reason #1:
Too many newbies focus all of their attention on trying to make such graphics before they learn exactly when, where, and how to place them on a website.

Reason #2:
With such a focus on making graphics, newbies fail to learn all of the really cool things you can do with HTML and CSS. What’s great about using HTML and CSS to accomplish these cool feats of websites magic is that because they are code-based, your web pages will load extremely fast.

Reason #3:
The best graphic software is just too damn expensive. Photoshop costs about $700 and it’s cheaper (yet powerful) little brother, Photoshop Elements, is about $70. Sure, you could use cheaper software. But since Photoshop and Photoshop Elements are pretty much the standards, why settle for less?

Your assignment

Now that you know what you need to get your first website off the ground, go ahead and update your browser (and maybe even try a different one), download some free software, and have a little fun with them all.

In the next article in the series, you’ll get your pizza-greased fingers around some actual HTML!

Well, that’s all fine and dandy if you already know how to hand-code a website. But for those of you who have no idea what HTML is and think that CSS is just another version of the popular TV show Crime Scene Investigation, hand-coding a website can seem as simple as learning Chinese.

Newbie Website Design wouldn’t be much of a blog if I never actually helped newbies. Since I aim to please, I’d like to introduce to you a new series of articles dedicated to teaching you how to build a website from scratch. You’ll learn everything you need to master the very important fundamentals and transform good techniques into solid habits.

Without further ado, let’s get your folder system prepared for the good stuff to follow:

Getting organized

I know that this might not be as glamorous as getting your hands dirty entering HTML into your text editor, but it is very important to get your folders created and organized first. The first folder you should make is a master folder where you can keep all of your Newbie Website Design projects (and others as well). You can use upper-case letters or lower-case letters or any combination thereof for these initial folders. Later on, the case of newer folders will be important (and I’ll let you know when and where.)

Create a folder called “Design Projects”. You can place it anywhere you want on your hard drive, but for simplicity’s sake you can put it on your desktop.

Inside that folder create another folder called “My First Website”. This will be the main folder that holds everything you need for this project.

Next, open up the “My First Website” folder and add two more folders: “production” and “website”. Inside the “production” folder we will put all mock-ups we create in Photoshop or some other graphic program. Inside the “website” folder we will put all of those wonderful hand-coded website files. (Note: during most of this series we won’t be making any graphics. But near the end of the series we will!)

Finally, inside the “website” folder add one final folder, an “images” folder. When we get to making and adding images and graphics to our website those files will go in here.

Here’s how the hierarchy should flow:
Design Projects – My First Website – production and website – images (inside the website folder only)

Like I said before, this initial stage is as exciting as watching snails race on dry pavement. But unlike cheering on competing invertebrates, this first step really is important.

In the next post in the series we’ll talk about what kind of software you need to get your first website off the ground. The good news is that you already have everything you need on your computer!