There are various types of borders then can be used around a div they are

  • solid
  • groove
  • dotted
  • ridge
  • dashed
  • inset
  • double
  • outset
  • dot-dash (not supported by all browsers)
  • dot-dot-dash(not supported by all browsers)
  • wave(not supported by all browsers)

The border width is in pixels, and the color can be either hex or color name.

Code for the border can be

border: border-style width color;

 each side of the border can be defined seperately by side, style, color or width

  • border: border-style width color; (does all 4 sides the same)
  • border-bottom: border-style width color;  (does only the bottom of the box with a give style width and color)
  • border-bottom: border-style; (defines only the bottom border style)
  • border-bottom: color; (defines only the bottom border color)
  • border-bottom: width; (defines only the bottom border width in pix)
  • border-left: border-style width color; (defines the left sides style, with, and color)
  • border-left: border-style; (defines only the left border style)
  • border-left: color; (defines only the left border color)
  • border-left: width; (defines only the left border width in px)
  • border-right: border-style color width; (defines the right border style, color and width in px)
  • border-right: border-style; (defines the right border style only)
  • border-right: color; (defines only the right border side color)
  • border-right: width (defines only the right border side width)
  • border-top: border-style color width; (defines the top border-style, color and width in px)
  • border-top: border-style; (defines the top border style)
  • border-top: color; (defines the top border color)
  • border-top width; (defines the top border width)



Comments (0)

If you want to add php to your html files you need to rename the extension on the file to php.  If the extension on the file is html it will read the php as text and print out the code.

Comments (0)
<!DOCTYPE html>
Comments (0)

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)