Tutorial: Margins and Padding

In this Tutorial you will learn how to create Margins and Padding. First off I better explain just what Padding and Margins are and how they differ. Padding is the white space inside the border and the margins is the whitespace outside the border allowing you to separate your box from surrounding things on your page.

Step 1: The first thing you are going to want to do is set up a style sheet for your page. You will want to input this in the head of your page:

Step 2: The second thing that you will need to do is apply the style sheet that you set up in your body for your outer div and inner div, so that it knows which text you want in each. So that should look like this:

After you input the correct CSS code your page should look something like this:

Step 3: So you can see in the image that the inner div goes right up to the edge of the outer div. To change that just adjust the numbers in the style sheet. An example would be something like this:

Doing so would then change your to look something like this:

So you can see by changing the padding and margins it created space between the border of the inner div and the text inside the inner div using padding. It also created space between the border of the inner div and the border of the outer div using margin.

Step 4: With this next step I am going to add some margin and padding to the outer div too. You will basically do the same thing that you did with the inner div but this time adding space to the outer div margin and padding. An example would be:

So your div should now look like this:

Step 5: The fifth and final step you can add color to the div if you would like. Again just by adjusting style sheet. Simply adding a background color. For example you could try something like this:

So your final div should now look like this:

Congratulations! You are now a padding and margin genius! Now go try it yourself.

Site Critique

HTML Google: www.google.com

This site is successful because of the convenience of the site. Besides the fact that it’s a very well-known site that is makes online researching quick and easy, it is very straight forward and easy to use. It uses a simple design that is quite plain so that the content of the page is easily located. The layout is very standard and simple making the site convenient to navigate to where the viewer would like to go.

The layout that Google uses makes the page very simple to navigate. Although this site is a major window for the World Wide Web; the simple home page allows the viewer to successfully direct where they’d like to go next according to their needs. The main portion of the page is shown by the large colorful font located directly above the search bar. Which is the main tool used on this page, allowing the viewer to spot instantly.

The first thing the viewer notices when pulling up this page is the large, colorful Google font. It uses Visual Hierarchy to attract the viewer first to the Word Mark then to the search bar located directly below it. It has very few words on the simple home page, allowing the viewer to choose where they would first like to go, then giving more information after selecting where they would like to be on the Google website, where it is a search of some sort or Gmail. The web page itself is mainly white, with black or blue words; most of the color shown on the page is seen on the Google word mark attracting the viewer right to it.

Google is a large online search engine. It uses is a combination of both text and images, mainly text though. Because the content of the website is so large, it uses strictly text on the homepage before the viewer goes deeper into the site depending on what they are searching for. Even Gmail is still mainly text except very few picture icons to display the messages quicker.

This site is communicating to a very large audience. Young and Old all use this website, assuming of course one knows how to properly use an online search engine. It is a website for all ages. The simple design is what makes this website work so well for all ages. Not being too specific for one generation over another.

Flash Café Rio: caferio.com

Café Rio’s website is successful because of the design of the page. It has a very neat style to it, which coordinates very well with the style of their Café Rio restaurants. It is a very interactive page making it more enjoyable for the viewer. The interactive site is a good way to advertise to the customers what is available and the different deals that are going on. It really does a great job showing what is available for the customer.

The navigation on this site is pretty straight forward. Depending on what the viewer is trying to do the website shows different categories for options to click on the home page. It makes the site very simple and easy to use. As you click from page to page, the layout and everything stays constant except the main screen part which shows the information you are looking at.

Café Rio’s website coordinates very well with their restaurant. It uses the same colors mainly red, orange, yellow, and black. The site has visual Hierarchy to show the main information in the large screen in the middle of the page. To show the viewer where they should look for the information they are inquiring about the site uses a lot of animation and interactivity to draw the viewer’s eye before showing the information. The font used throughout the page is very similar in size besides the Café Rio logo and a few words shown on the center of the screen.

This site is mainly visual, using animation and illustration to attract the viewer. It does use words to show where different searches are located but the words are secondary to the entire image of the page.

The site’s audience is probably young adults to middle age adults. An audience that has the need, knowledge, and capabilities to get onto their site to find out what they would like to know. This site does effectively communicate to the viewer the information it is trying to get across. Any questions the viewer might be inquiring about is mainly shown on the site with easy navigation.