To center a table use CSS as below

table{

margin:1em auto;

}

1em means one blank line at the top and bottom of the table.

auto means to calculate the left and right margins so they are equal horizontally.

The table can also be floated just like an image.  ie. float:left; or float:right; if you want the table to have text along the side.

Comments (0)

The href=attribute in the <a> tag can be used to create a mailto link.

<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">

Contact us

</a>

The above does not work with webmail services.

Also, spam bots can read the email address on the web pages.

The above two problems can be solved with either a Guest Book page or using something like FoxyForm.

Comments (0)

To use an image as link put the img tag between the <a> and the </a> tags for the link

i.e.

<href="#top">

  <img src="/jm1/pix/gototop.png" alt="Link to top of page">

</a>

If the title=text is used as an attribute with the  href the text will appear with a mouse over the image or text. The alt=attribute of an image tag is not the same as the title of an href.

Comments (0)

pseudo classes

They apply to links on a page. <a ....>These are classes that you do not make up the name for. You do not put a dot in front of the class name. You do not use a class=" " to apply the pseudo class. They apply to all links on the page automatically. 

They are

a:linked{    ...}

a:visited{ ... }

a:hover{ ... }

a:active{ ... }

This allows to style the link state not the link text.

They need to be listed in the order above if you want them to work right on all web pages.

Classes of links

Regular class name can be combined with pseudo class names. You can combine regular class names with pseudo class names which can be applied selectively. 

a.yourClassName:pseudo class name{ ... }

Your class name need to start with a letter and contain no spaces. It is case sensitive.  Any CSS property:value pairs can be used to define the styling.

First define the a.className and then do the a.ClassName:pseudoClass{   }

Comments (0)

All CSS style rules are constructed using this general syntax

selector{

             property:value;

            ...

}

selector defines which elements the style will apply to.

property:value pairs define the styling.

More then one selector can refer to an element type. The same styling can be applied to multiple element types by using multiple selectors, separated by commas.

ID selectors apply to specific elements (usually major page divisions) on the page.

i.e.   #wrapper{ ....}

in the html code this would be referenced

<div id="#wrapper">

.....

</div>

An ID name can be used only once on an html page.  There can be multiple different ID's but #wrapper can be used only once in the page.

class names are when you want multiple items on a page to share the same style. A style class is used to style the class. A class refers to many items.

In the CSS code you proceed the class with a period. This lets the browser know that you are creating a class. i.e.

.classname{

            property:value;

          }

The classname must start with a letter and have no spaces.  It is case sensitive.

In the HTML portion of the code

Do not use the period when creating a class in html code. It would be class="classname" This goes in the opening tag of the element you want the class to apply the styling.

  An example might be <span class="hilite">x....<span>

Where the letters between to span would be treated with the properties of the hilite class created in the CSS code.

Some selectors may only contain the class name.  These are called generic class selectors. They can be applied to any tag.  They are not attached to any element. 

i.e.

For the CSS

.raised{

           border:solid 1px gray;

          border-radius: 5px;

          box-shadow: 5px 5px 5px gray;

         }

For the HTML

<img src="/jm1/location of the image" alt="Image name" width="200"  class="raised">

If one where to start the class with img.then class name it would apply only to images no other type of element. 

More then one class can be applied to an element as long as they are separated by a space within the " " marks.

 

Comments (0)