HTML & CSS Direct Study

Web Form Validation

Validation is crucial important in having any sort of data base or reporting system. If the information that is entered by users is not correct or invalid in any way then you recieve data that in unhelpful and can cloud real data within your system. There are several ways that you can validate data:

• Server-side validation: This method of validation is done on the server side (hosting side). Advantages to using server side validation is that it can be very secure and works even in browsers were JavaScript is disabled (some people that are trying to insert false information or trying to do malicious things will turn this off to bypass validation). On the other hand disadvantages can be that response times can be slow and feedback can only be given after the user has submitted the information.
  
• Client-side validation: Client side validation helps to brighten the disadvantages of server side. All validation is done in real time while the user is entered information. The user will never be able to submit the information if the validation fails, however on the down side users can turn on the JavaScript that the client side validation runs of off and completely bypass that validation.

Both methods have advantages and disadvantages. The best way to achieve validation is to use them both. This provides a better user experience with less complications with validations while also keeping out those who are bypassing the system.


Why and What information should be validated?

• required: This is any information that is crucial to the transaction between you and the user. Without this information the operation cannot be completed. When making forms it is important to think of a few things. 1) Mark any mandatory field (commonly marked with (*), however this should be noted on the form). 2) Minimize any fields that are not mandatory, with limited distractions users are more likely to fill out the form. 3) If all fields are mandatory do not mark them all 4) It is common practice to have no more than 5 mandatory fields for a good form.
  
• correct format: As discussed in an earlier blog format is as important as correct data. Fields such as emails, URLS, phone numbers, birthdays, and other fields all have specific formats. It is best to just let the user enter the data in the way they chose and have the application correctly asses the data, or like suggested earlier have the computer do the formatting while they are typing it in.
  
• Confirmation Fields: This is so that the user knows they are entering in the correct information. This field is commonly used for passwords, email address, or other important information. Confirmation fields should be located below or next to the original field and clearly have a label that states "Confirm you .... ". Provide the user with feedback if the two fields do not match.
  
• Validation Feedback: If the information that was entered is incorrect you need to inform the user in a bold way. Tips for Validation Feedback: 1) The error message should be at the top of the web page so that it is noticeable. 2) The error message should be in red and display an icon that is commonly known as having errors 3) Fields in the form need to be highlighted in red (backgrounds, in-lines, or field labels) 4) Provide feedback with why the information is incorrect ( giving initial hints can eliminate validation feedback in the long run)
  
• Validation upon Submit: This is done after the user hit the submit button at the end of the form. The advantages to this is the user is not interrupted while filling out the form, however it can become frustrating to have to return to the form to correct it. (Server-side validation)
  
• Real-Time Validation (instant): This is when validation is done in real time while the user is entering information. This can be achieved through use of JavaScript and can help users fill out the data as they go along. When using this validation, use it sparingly because it can become distracting if overused.
  
• Help hint: Give the users hints with what each field is asking for. This will eliminate feedback errors and help users to enter the data on the first try. You can do this by having text next to the fields or you can use Help Indicators. These indicators can be used to scroll over and display a description of what the field is looking for.
  
• Dynamic Tips: These tips only appear when the user is entering data in to a particular field. This helps to reduce clutter and focus on the information that is being provided. By placing these tip to the right side of the field they can be helpful and non-distracting.
  
• Masking Input: This can help users enter in information in a particular format. Users are forced to use this format because of the mask that is set. This should be used with caution, in the end it is best to let the user enter various input format and have the application format the data.
  

Useful Validation Site:

These sites are useful for different types of validations on web pages. Remember to use them correctly and in a helpful way.

Live Validation
Valdanguage
JavaScript Form Validation
Form field Hint with CSS and JavaScript
Dynamic JavaScript Form Validation

MYSQL Connection

This will be a resource guide on how to connect an HTML page to both MS Access and MYSQL Databases.

Designing Web Forms

Form Creation Tips:

• Choose the right field -- Depending on the data that you are trying to receive from the users it is very important to choose the correct type of field. Radio buttons can be used when only one choice can be selected. A user cannot select multiple buttons. Check boxes when a user has the option to select multiple choices (including zero or one). Drop down boxes are great for having a lot of different options, but the user only selects one (list of states or country).
  
• Field Length -- When you provide a user with an area to type text (e.g. Name fields, comment fields, home address, or emails) make sure to provide them with plenty of space. If the space is too short users will not be able to correctly enter the information. Also, make sure the the box is large enough to see all of the text they are typing so that the user can read the entered information.
  
• Mandatory Fields -- When creating forms make sure that you do not ask users for unnecessary information. What are you going to gain from each piece of information that they give you? If you gain nothing then do not include it. Furthermore, when you are deciding which fields are mandatory ensure that if the information is not crucial to completing the current transaction to not force the users to provide it and give them a choice.
  
• Descriptive Labels -- Each information field should have some type of label that explains to the users the information wanted. If fields are placed without labels the users would not enter valuable data and get easily confused on which information they are being asked to provide.
  
• Formatting -- Let the computer do the automatic formatting. This way the user can only enter in information the correctly fits that format. This can help solve data errors as well as incomplete data.
  
• Error Messages -- If there is an error in the data that the user has supplied it is important to tell them which part of the information is incorrect. Do not just keep returning them to the form without giving the correct feedback on information. By correctly giving good error messages problems can be troubleshooted much more easily.
• Wording -- It is important to use active and positive words in your check boxes and radio buttons. This will not only give a positive overall image to your site, but keep customers upbeat and understanding of the process. Layout of fields is as important as wording. Make sure to break up different fields by subheadings or groupings. Using both of these techniques will ensure that fields are identifiable and users know which information they are agreeing to provide.
  
• List Presentation -- When presenting a list of choices try to list them in a vertical fashion. This will clearly show which choice goes with which bubble. In a horizontal instance the bubbles and options can become very confusing on which go together.
  

Overall Form Suggestions

• Clean, Simple Solutions -- Keep forms short and simple. Users will often become overwhelmed and skim through information or even not fill it out at all. Simple forms can be user friendly and quick. Allowing you to get the correct information and the user to not waste time.
  
• Be Creative -- As IT Professionals we have all seen a billion dull, boring forms. Add something to your form that makes it interesting, furthermore this will create and overall "difference" about your site. Some creative options could involve: Flash, short puzzles, side bars, images, and colorful forms.
  
• Use Illustrations -- Use appropriate images this will brighten up your form, while also making the user feel that the form is useful and making the form more comfortable.
  
• More Functions -- By adding functions such as font styles, links, or picture add ins you can let you users be creative and provide more feedback. They are likely to provide relevant feedback if you give them the resources to use correctly.
  
• Icons -- Use Icons as click-able buttons. By placing icons on buttons such as submit, reset, comment, or other functions. This will have these options stand out, therefore having a higher likely hood of being used by users correctly.
  

The Basics of Typography + Typography Tools!

The importance of Typography has grown in recent years due to an increase in technology. In past times web sites could only display a select number of fonts, therefore those fonts have become standard and commonly used. Fonts such as Georgia, Arial, or Verdana are seldom known for anything else besides web fonts.

With development of CSS properties and web technology a new range of fonts can be displayed. Choosing fonts is as crucial as layouts and colors and can affect the overall feel of your web page. Below is a list of tip to help set the right mood for a web site:

• Readability -- no matter what font is chosen this is the first evaluation criteria. Readers must be able to legibility read the content, if the can't then the point of the web site has become overlooked.
• Contrast -- Fonts can range in different forms. Some fonts can be soft and give a sense of elegance, integrity, delicate, or sophistication, on the other hand some fonts can be stable, sturdy, strong, and hard and give a sense of seriousness or responsibility. If your contents contradicts your fonts the entire page can feel confusing or disorganized.
• Content -- When selecting fonts keep in mind that the body of the text will be read the most, therefore this font should have the highest priority of readability and give off a correct mood. For really flashy fonts that are on the questionable side of readability are best fit for headers or display sizes.
• Font Characteristics -- By writing down a description of the qualities of the content you can better select a fitting font. Selecting a font that fits those qualities will convey to the reader the overall feel of the content.
  
• Pairing -- A web site should have around 2 different typefaces. When pairing fonts it is important to find a medium between the fonts. Having a fonts that are very similar can easily blend and not set apart the content correctly. However on the other hand find two very different fonts can create tension. Good pairing examples: One sans, One Serif; One Old typeface, One New typeface; Using the same typeface but using different weights or elements (Helvetica, Helvetica Condensed, Helvetica Black)

Typography Tools

1. Font Stacks
2. Typography Sites
3. Choosing a font
4. Techniques
5. Hyphenation
   
6. sIFR
7. Grids
8. Typography Practices.
   

Way to Create Good Typography.

Typography gives finishing touches to web pages. By correctly using typography a page can look finished, professional, and visually appealing. However, if typography is poor and ignore the page can look incomplete and viewers may not return to the site. Below are tips that can be used to asses typography and how to properly use it.

1. Measure -- Having text lines that are too short or too long can be confusing and distracting, because the reader is always looking to the next word and next line it is important to use a consistent length. An ideal length is 65 characters. (Note: A trick to set the length of your text is to use Robert Bringhurst's method. This method is to multiply the font size by 30. The result gives you the amount of pixels for around 65 characters per line.)
   
2. Leading-- The amount of space that is between each line of text is crucial important for readability. Finding a good medium can be hard to do, however the extremes can be visually appalling. Take a collage paper for example, often times these are double spaced, however if this much space was used on a web page the content would be very spread out and hard to read. On the other hand if the text is too close the content can look like it was crammed into a space and can be difficult to distinguish between different lines. (Code for this is line-height: XXpx; A tip for line height is to set it a few pixels greater than the text size (e.g. if the text is 12px then use a 15-16 px line-height)
   
3. Hanging Quotes -- By placing the quotation mark in the left margin the reader's focus is not disrupted. These hanging quotes will allow for the text to remain left aligned and not force the paragraph to start further right. To achieve the hanging quotes simply use a block element and set a negative indent. (Code: blockquote { text-indent: -0.8em; font-size: 12 px; }
   
4. Vertical Rhythm -- Having a consistent vertical balance is important to the readability of your pages. By being inconsistent with the margins and the way you pad the elements can create an unbalanced vertical rhythm. By retaining a base grid line you can keep the vertical rhythm in your page. Make sure that the spacing between elements, line spacing, and margins are all equal amounts of pixels.
   
5. Widows and Orphans -- A widow is a word or small line that is left at the end of a paragraph. An orphan is a word or small line that is at the beginning of a page or column. These create abrupt endings or beginnings that reduce the readability. In order to avoid these it is important to carefully use page breaks and no-space breaks so that these do not happen. By eliminating orphans and widows you can create a professional and complete looking page.
   
6. Emphasis -- Important parts of text that you want the reader to remember can be emphasized by using elements such as bold, italic, caps, and other formats. By placing these elements on selected words the reader realizes that this is an important part of the content. However, it is just as important to not disrupt the flow of the content. By making the emphasis dramatic or using more than one element the text can be busy and abrupt. When using emphasis only use one element at a time and use them sparingly.
   
7. Scale -- Setting the scale is very important. Using either a traditional or custom scale is acceptable. Scales are normally used to set apart different size headers and content. This helps the reader distinguish the differences between them and helps with overall readability.
   
8. Clean Rags -- This is how the rough edge of the paragraph appears. As a result of a paragraph being left or right justified the opposite edge can turn out to be choppy and distracting. In order to avoid these rough edges you have to make manual adjustments to the block of text. Another way to correct this is to use hyphens so that some words can be split on different lines.
   

Color Palettes & Schemes

Different Types of Color Schemes:

• Monochromatic -- this involves just one hue and other colors come from this. Using differing tints, shades, or tones you can create a page that looks professional and organized. This is an easy scheme to create because you are only using one color, however you must choose the correct way to display the colors or else the page can look abrupt and unpleasing to look at.
  
• Analogous uses colors that are next to each other on the color wheel. By selecting 3 colors that lay next to each other on the wheel you can create an easy scheme while also adding differing colors to the design. It is common to have the seem Chroma within all the colors, however you can make your design look more developed by carefully using tones, shades, and tints. Some colors will not do well on a site making it too dark or too light, by adjusting the shades, tints, and tones you can make a more web friendly scheme.
  
• Complementary -- By taking colors that are opposite each other on the color wheel you can add variety to a design. This scheme usually only takes on two colors, however by changing shades, tints, and tones you can create several differing appearances that create an appealing page. On a downside make sure to be careful with hues of the same chroma because they can sometimes create very abrupt designs. It is best to use a different color to separate them or add white space.
  
• Split Complementary -- this is very similar to Complementary, however you do not use the opposite hue of your base color. Instead you take the hues that are on either side of the opposite hue. This creates the Complementary colors that make a vivid design, but prevents mixing two colors that can create an abrupt scheme.
  
• Triadic -- This technique uses hues that are equally spaced around the color wheel. Furthermore, you can then use all dark shades of one color and a few tints, tones or shades of another color to put emphasis on particular colors.
• Custom -- It becomes very rare when a web designer is able to choose one particular traditional scheme from above and use it. More commonly today custom schemes are developed in order to meet all the needs of the web site. There are several websites that can help use pictures or colors to develop custom schemes. Web Sites such as Kuler help web designers with custom colors.

Color Contrast

Contrast: is an important element to a page that helps viewers to better understand content information that is being displayed. By creating contrast within a page the overall appearance, readability, flow of information, importance levels of information, and a visually appealing web page are all achieved. Most people begin to think of color when contrast is mention, however as described below there are several different ways to explore and use contrast on a web page.

Different Ways to Create Contrast within a Page:

• Color -- There are many different elements located on the page. If each element has the identical style then a reader can not see where some information begins and other ends. For elements that have nothing to do with each other use colors that are very different from each other. For example content area could be dark brown with light text, while the headers, footers, or navigation has a more neutral color with dark text. On the other hand if the elements are similar to each other (i.e. similar articles, content, promotions) then you could use similar colors or the same color just lighter or darker shades.

Within the content itself using colors can distinguish between different types of information. By using different, but similar colors you could distinguish headers, sub headers, and content.

• Size -- By creating different sizes within the elements on the page you can direct the viewer to see which elements are more important. Larger elements will often attract the attention of the viewers, while more smaller elements will be looked at secondary. Using bigger text can also attract readers to particular points that you want to be seen first or often.

• Alignment -- Alignment is an important part of every document ever presented in business. Page breaks, justification, total alignments are all important, however within a web page there are different aspects of alignment that are important to ensure are correct in order to visually appeal to readers. One good way to use alignment in your advantage is to left align your header then below create a wide margin before you begin your content. This helps set apart the header and content and can help if the font sizes are similar by distinguishing a difference. However, you have to be careful with alignments, because some can just look like design errors. If you create a margin, make it a wide margin, furthermore never center align paragraphs this can make is difficult to read and overall leave an undesirable appearance.
  

Concepts of Color

Colors are often associated with thoughts, feelings, emotions, and reactions.


Color Explanations:

Warm Colors:
Colors that are warm give feelings of positive, energy, or passion. Colors such as reds, oranges, and yellows that are often seen in sunrises, sunsets, fires, or fall colors often are inviting to people and are commonly used in web pages.

• Red -- It a very broad color with many meanings. Associations can be made with red ranging from violence to love, importance to danger, and mean something completely different in other worlds. It is because of the last fact that we must carefully watch what colors we use. Red is a very vibrant color that is great for small pieces or accents, however can be quite overwhelming in larger quantities.
  
• Orange is a step down from red. It is not quite as vibrant, however it has many very important meanings. Orange can be associated with autumn with the leaves changing colors, or with fruit and health. This is a very inviting color that may be a great alternative to the overwhelming Red.
  
• Yellow Yellow is the brightest color of all the warm colors and can have the most energy involved. Similar to red, yellow has a range of meanings: from cowardly to hope to mild danger. Using yellow in a web page can bring many different feels to a page such as being cheerful and happy or even a more neutral color for children.

Cool Colors:
Colors that are very opposite of warm colors, however in order to develop the cool colors you have to mix them with warm colors. Cool colors bring a sense of calm involving nature or water and can range to include being professional and colors of night time.

• Green The range of meaning for green begins with new beginnings and growth, however green can also turn into jealously or envy. Green can mixed effects like calming and energizing, however using green within a design may help to balance out the overall look of the page.
  
• Blue The meaning of blue do not come primarily from the color, but the different shades or hues of blue. Darker shades of blue are considered to be stronger and more stable. Blue can be calming, refreshing, and friendly, however it can also mean sad, depressing, or "blue"
  
• Purple is commonly associated with wealth, royalty, and luxury. Lighter shades of purple can be soft and romantic and can often be used for children or toddlers. However darker shades lean toward a wealth and luxury feel.
  

Neutrals:
Neutrals can be used as both background designs or primarily layout designs. By adding accent colors to the page the neutrals tend to be affected and can be developed and sophisticated.

• Black is one of the most complex neutral colors. Many meanings are derived from black in a good end black can show elegance, organized, power, or formal, however it can also be associated with darkness and mystery. When using black it is always important to consider the content of the page and how this page may be viewed. Black can symbolize mourning(death), Halloween, or can make a well designed and organized page.
  
• Gray can be on either side of the spectrum. Darker grays often can be a replacement for black and can show mourning, professionalism, and formality. On the other hand lighter grays can be a replacement for white and are associated to be modern and sophisticated. By adding colors to the grays a web page can really bring out elegant designs.
  
• White is normally portrayed in a positive light. White can be used as a backdrop accented by great colors. Meanings can range from angels to brides & weddings to purity and cleanliness. White is a neutral that can be used frequently and spiced up with surrounding colors.
  
• Brown is a very earthy color that can provide the feeling of stable environments, dependability, and reliability. When using brown it can be set as a background with other surrounding colors or can be used to illustrate differing textures. While using brown in a web page it is important that it does not make the page seem dull or boring.
  
• Tan/ Beige takes on the characteristics of the page around it. This color can be considered cool or warm so it can be used in many different areas and elements. By adding colors an overall feel of the page can change depending on if the colors are cool or warm. On a web page it is common to use these colors as background and paper like textures, however beware that too much and not the right layouts can cause this color to be dull.
  
• Cream/Ivory if the goal of the web site is to be cool and elegant these colors will add both feelings to the page. As a result of the coolness of the color both these colors can evoke a feeling of history. Since white can cause an abrupt layout and can be hard to blend these colors can replace white and help smooth out the overall layout.
  

Color Concepts:

• Hue is a basic term that describes the objects color. By saying that an object is blue, red, or green is to describe its hue. Hue can be very important to your web site because colors convey messages and meanings to the viewers. As described above it is important to carefully choose colors so that your message is properly received. Some hues may be more commonly used such as red, however other hues are not as commonly used like green (but they stand out more). When designing a web site you can mix hues in order to create different moods.
  
• Chroma describes the overall intensity of the color in comparison to white. The purest form of Chroma is a color with no black, white, or gray. Adding these colors reduces the Chroma. When using Chroma in a web site be sure to vary the chroma of the hues so that the page is not overwhelming. It is best to use Chroma in moderation or by using the same hue throughout the page with different levels of Chroma.
  
• Saturation is often compared to Chroma, but has a different context to it. The appearance of how hues are seen in light describes the saturation. One can often describe saturation in terms of weak, strong, pale, or pure.
  
• Value use a high and low scale in order to describe the "lightness" of a color. The scale ranges from black (lowest value) to white (highest value). By using a variety of different values in a web site a visually appealing page can be creates. Different values can also show differing sections within the page without creating abrupt lines.
  
• Tones are created when gray is added to the hue. By adding gray to the hue it creates a duller version of the pure hue, these are commonly used to change the feel of the web page. By using tones the designer can create a vintage, sophisticated, or elegant look. When tones are used throughout a page you can add gray sections that will intensify the tones used.
  
• Shades is created when black is added to the hue. When adding black to a hue you create a darker version of the pure hue. Different affects can come from using shades with tints, textures and varying other elements. The term shade is commonly misused to describe other elements.
  
• Tints are exactly the opposite of shades in which you would add white in order to create lighter version of the hue. Pastels are and example of tints. Tints are commonly used to create a more feminine, vintage or even used on toddler or baby sites.
  

Layout Divisons - Why they are important

Divisions are the most commonly used layout technique used in today's modern websites. The division element gives the web designer the flexibility to move content and adjust the way it fits on the screen.

Each <.div> tag can be affected though class names and CSS style sheets.

Absolute Positioning
As you can tell in the example below each <.div> element can be changed within the style sheet to look unique and creative. In the below example four <.div> elements are shown using different colors. They are easily arranged using absolute formatting which allows us to move the div tags around to wherever we decide to put the content.

Div Example

As seen in the example div tags provide a lot of flexibility and many different formats.

Z-Index

By using the z-index a web designer is able to change the way that elements are stacked on the web site. Z-index is named for the use of the z dimension, because we are changing the order of how things are displayed in relation to the z axis. How the index works is to use a numerical value, the element with the highest z-value will appear on top.

As you can see in the following example we have taken the example above, but changed the way the divisions are ordered.

Z-Index Example

In conclusion:

As shown divisions can be a very easy, flexible, and creative way to design layouts for a web page. The <.div> tag has given more freedom to the web designers while also freeing up time that was used in order to create layouts. Currently the use of divisions on a web page is encouraged by the W3C as a way of being in correct HTML and CSS language.

Printer Friendly Layouts

Often times web pages can be printed in order to make the content mobile and accessible by readers. Information such as emails, directions, research, articles, and much other important information is desired in a print format. It is because of this that we should make sure that our web pages and their layouts are printer friendly. This can be accomplished by having an additional style sheet that modifies the page to make it printer friendly. Attributes such as:

----Font

----Color

----Images

----Links

----Visual Layouts

Best Practices for Creating Printer Friendly Pages:

• Remove any backgrounds on the page. This allows for the page to be printed on a white page, saving ink and time.
• Text should be black or a color that will print well. All text should be the same color. Black is preferred because it will print on both color and black only printers.
• Ensure that the text on your page can be read. Adjust the font size according to what is most visible.
• When your page is printed users cannot visit links, therefore the formatting should change. You may want to leave the underline so that readers can tell there was link there.
• Remove non essential elements such as navigation, excessive pictures, advertisements, and buttons. Content is the most important thing to display when printing a page.
• Make sure that your layout fits well on a page, because printer paper is normally 8 ½ by 11 some horizontal layouts may need to be changes to fit better vertically within the page sizes.

Layouts - Past, Present, Future

Layouts using Table:
As previously discussed may web designers would create complex layouts using primarily tables. Simply by stretch and reforming the spans in a table you could create a webpage that looked neat and organized. However using tables to create layouts can be very time consuming and frustrating, because each cell associates with all of the others often times making changes to one things means correcting errors on other cells. W3C (World Wide Web Consortium) as guided many web developers to use other ways to create creative and efficient layouts, however tables can be useful in some situations and make data easily presentable.

Layouts using Frames:
Frames are regions within the webpage that display multiple HTML pages. Displaying multiple pages within one page allows for flexibility, creative designs, and ability to changes individual pages without affecting the surrounding information. Frames were commonly misunderstood and misused when they were first developed, therefore currently they are not widely used and can sometimes be confusing to users. However, if frames are used correctly they can be beneficial by showing multiple pages of information at one time. Despite the development in frames there are still many issues that turns both developers and users away from them. Many problems are associated with frames that cause people to think negatively about them. Trouble with navigation, printing, bookmarking, designing, and even browser compatibility all affect the usage of frames. It is because of these drawbacks that they are not frequently used.

Layouts using Division:
Currently the most accepted form of layouts are created using divisions. Divisions can be manipulated and placed wherever the developer wishes for them to be located. By having individual divisions the developer can create different backgrounds, text styles, and appearances. This gives the developer room to be creative while also organizing a site well. Divisions can be very flexible and allow many changes to be made to them while not affecting other divisions in major ways.


Best Practices for Layouts (some CSS too):
1. Set Defaults – This helps to bridge the gaps between different browsers. When you set defaults this lets you start of with a blank page.
----- Margin = 0
----- Padding = 0
----- Border = 0
2. Work from the top down – in sections – If you begin at the top of the page then you are starting with the largest element. By working down the page you can enter into more detailed sections. This creates better flow and can prevent errors.
3. Document and Debug:
---- Documentation is important – you may not be the only one to ever edit the web page. If you clearly make comments then others can read, understand, and edit your code.
---- Debug: by debugging your page you accomplish a few things. First, this means that your site will display correctly as you wish for it to be displayed. Second, bringing your code up to W3C standards makes your code correct by industry standards
-------§ Firebug – Debugger add-on used in Firefox browsers
------- § W3C Validation – Checks your site for critical errors, can correct layout problems you may be having.
4. Come to a decision on Browsers – There are multiple browsers that users can view a web page through. It can be very difficult to create a page that will look correct in all browsers. When you develop a page research and decide which browsers you want your page to work well in. This decision can be made through analytics or recommendations by W3C.
5. Borders – Borders are not always used to outline each element within a page, however when developing a web page if an element is not correctly positioned or displaying correctly you can set a border to display. This will reveal why all elements are not correctly displaying.
6. CSS Practices:
---- Generic Classes – these can be used multiple times in multiple elements. This helps to set the overall look of the page without having to type repeated code.
----- Example: .bold {font-weight:bold;} -- this can now be used any place bold settings can be used.
---- Multiple Selectors -- If you want to have the same effect on different elements you can easily combine them so that they are all affected similarly.
----- H1, h2 { font-style:italic; font-family:Arial}