color property allow the color of text inside an element to be specified, background color.

Colors can be specified by

  • rgb values rgb(0,0,0,)
  • Hex codes 6 digit hex codes preceded by the # sign.  #ee3e80
  • color names there are 147 predefined color names
  • HSLA

color of text

an example would be h1{ color:darkgary;}

background color

h1{ background-color : blue; }

css assumes a box around the html element .

Also for headers or the body of a page one can use padding to seperate the text from the edges of the box.

Page default values are transparent.



Comments (0)
  • Universal selector Applies to all elements in a document.  i.e. * {}
  • Type selector  Matches element name  i.e. h1, h2, h3 {}
  • Class selector Matches an element who class attributes has a value the same as after the . (or full stop) symbol. i.e. .note{} targets any element who class attribute has the value of note. Or p.note{} targets only <p> elements who class attribute has the value of note.
  • id selector matches an element whose id attribute  has the value that matches the one specificed after the pd sign or hash symbol.  i.e.  #introduction targets the element whose id has the value of introduction.
  • child selector Matches an element who is a direct child of another. i.e. li>a {} Targets the elements a who are a direct child of li but no other a's on the page of other li.
  • Descendent selector Matches an element that is descendent of another specificed element but not a direct child. i.e. p a{} Targets any a element that sits inside a p element even if there are other elements nested indbetween them.
  • Adjacent sibling selector  Matches an element that is the next sibling of another.  i.e. h1+p {} Targets the first p element after any h1 but no other following p elements.
  • General sibling selector Matches an element that is a sibling of another but does not have to be the directly perceding element.  i.e. h1~p [] Targets any <p> element after and the <h1> element.
Comments (0)

To link the css style sheet - external css one needs to link the css style sheet to html via a link statement.

<link>  This is used in an HTML document to tell it where to find the css file. Link does not need a closing tag.  It is found in the head element.  It has three attributes. the rel, href, and type.   The href specifics the path to the css doc.  The type attribute specifics the type of element being linked to for style sheets it is always text/css.  The rel attribute specifics the relationship between the html and css.  In this case it is always stylesheet.  The the statement would look like


<link href="/jm1/css/template.css" rel="stylesheet" type="text/css" />





Comments (0)

 <form> element  should always have an action attribute and will usually have a and id attributes also.

actions value is the URL for the page on that server that will receive the information in the form when it is submitted.

method to get the information can either be get or post.  In the get method the value from the form are added to the end of the URL specified in the action attribute. i.e.


<form action="" method="get">

   <p>This is where the form controls would appear controlled by the php program</p>



This method should be used if you are uploading a file, a lot of information, sensitive data such as a password, or interacts with a database.  In the above example the method="get" would be replaced with method="replace".

id attribute should be distinct for the form on the site.

The default method if none is listed is get.


The input element of forms has a type attribute such as text and a name.  The name identifies the form control. Each form control has a different name. 

type attribute 

  • type="text"  is one line of text
  • type="password" creates a text box that acts just like a single-line text input, except the characters are blocked out
  • type="radio" in addition to name there will be a value which shows next to the circle and one of the choices will have a checked="checked" attribute.  Only one radio button should have the checked attribute. <input type="radio" name="books" value="title1" checked="checked" />     <input type="radio" name="books" value="title2" />
  • type="checkbox" user can select or deselect one or more options The name should be the same for all the buttons that answer that question. The values are the words that will show on the web site <input type="checkbox" name="books" value="title1" />     <input type="checkbox" name="books" value="title2" /> Checked is not required but can be used if wanted.

example of an input statement

<form action="http://..../...php>


<input type="text" name="username" />




<textarea> element is used to create a mutli-line text input.  Does not use the word input. Need a opening and closing tag. Any text that appears between the opening and closing tags will appear in the text box when the page load. 

<form action="http://..../...php>

<p>Was this site useful</p>

<textarea name="eval">Place comments here</textarea>






Comments (0)

Table represents information in a grid. They have rows and columns. Tables are written out row by row. <table> starts the table, <tr> is the beginning of a row, </tr> is the end of the row, <td> is the beginning of the cell in that row and </td> if the end of that cell.



    <td>row 1 cell 1</td>

    <td > row 1 cell 2 </td>

    <td > row 1 cell 3 </td>



    <td>row2 cell 1</td>

    <td>tow2 cell 2</td>

     <td>tow2 cell 3</td>



This would produce a two column two row table.  Ie., 2 by 2.

Table Headings

Table headings are part of a row.  So they go between <tr> and </tr>  In the above example there are three columns, If I wanted the head to appear above each column I would add right after <table>



    <th>first heading</th>

    <th>second heading</th>

    <th>thrid heading</th>


  then the other rows of data.


If a cell has no data then it should still be represented as an empty cell <th>text</th> or if data <td>data</td> where data here is a blank space.

The scope attribute can be used for either a heading for a row or colum

row heading may be <th scope="row">row heading</th>

column heading may be <th scope="column">column heading</th>


If you want a <th> or <td> to cover more then one column the attribute colspan should be used

<td colspan=2>data</td> will combine 2 columns for that row. More then 2 columns may be combined in any row and can be different for each row.

this can also be used with <th>


rowspan works the same as colspan except it combines rows together.

Thus, one row of cells will be shorter then the preceding row of cells since in one of the columns the two or more rows may be colapsed into one cell.

i.e. <table>


         <td>data 1-1</td>

         <td>data 1-2</td>

         <td>data 1-3</td>



         <td>data 2-1</td>

         <td rowspan="2">data 2</td>

         <td>data 3</td>



         <td>data 1</td>

         <td>data 3</td>




   See how row 3 has only two elements listed and row 1 and 2 have 3.  because cell 2-2 and cell 3-2 were combined.

Below is used for long tables only:

the <thead> headings of the table should sit inside this element

<tbody> the body of the data should sit inside this element

<tfoot> the footer information should be inside this element.

This allows for tables that cover more then one page to carry the headers over to the next page.  Does not work in all browsers. Not needed for short tables.






Comments (0)