html and css notes

HTML Tutorial:

1.  intro:  html is hyper text markup language.  html tags are keywords surrounded by "< >", opening and closing tags.  html documents contain html tags and plain text, and are called web pages.

2.  getting started:  don't need any tools to start.  html can be written and edited using multiple applications including dreamweaver, visual studio, and plain text editors.  there is no difference between saving it .htm or .html.

3.  basic:  html headings are defined by <h1> - <h6> tags.  html paragraphs are defined with <p> tags.  html links are defined with <a> tags.  html images are defined with <img> tags.


CSS Tutorial:

1.  intro:  have a basic understanding of html.  css stands for cascading style sheets.  concerned with how to display html elements.  styles saved to external .css files.

2.  syntax:  css rule contains a selector and one or more declarations.  declarations always end with ";" and surrounded by "{ }".  comments are used to explain your code.

3.  id & class:  id selector is used to specify a style for a single element and is defined with a "#".  class selector is used to specify a style for a group of elements and defined with a ".".

4.  background:  color can be specified by a color name, a RGB value, and a hex value

5.  text:  color specified the same as for the background.  text-align is used to set the horizontal alignment of text.  text-decoration is used to add or remove decoration from text.  text-transform is used to specify upper and lower case letters.  text-indentation specifies the indentation of the first line of the text.

6.  box model:  term is used when talking about design and layout.  parts include margin, border, padding, and content

7.  border:  border-style specifies the type of border to display.  border-width specifies the width of the border.  border-color sets the color of the border.  it is possible to set each side of the border differently.

8.  outline:  outlines are set around borders to make element stand out more.

9.  margin:  defines the space around elements, outside the border.  possible to specify different margins for different sides.

10.  padding:  defines the space between the element border and element content.  can set different paddings for different sides.