HTML and CSS Lessson 3

Create and style the container

Lesson 2 Lesson 4

Notes:


HTML Notes:

<title> tag:

  • The <title> tag is required in all HTML documents and it defines the title of the document.

<link> tag:

  • The <link> tag defines a link between a document and an external resource.
  • Its used to link to external style sheets and icon.

<div> tag:

  • The <div> tag defines a division or a section in an HTML document.

CSS Notes:

background property:

  • The background shorthand property sets all the background properties in one declaration.
    Syntax background: bg-color bg-image bg-repeat bg-attachment bg-position;
    1. background-color: Its sets the background color of an element.
      Syntax background-color: color | transparent;
    2. background-image: Its sets background images for an element.
      Syntax background-image: url('your image') | none;
    3. background-repeat: Its sets how a background image will be repeated.
      Syntax background-repeat: repeat | repeat-x | repeat-y | no-repeat;
    4. background-attachment: Its sets whether a background image is fixed or scrolls with the rest of the page.
      Syntax background-attachment: scroll | fixed | local;
    5. background-position: Its sets the starting position of a background image.
      Syntax background-position: value;

width property:

  • The width property sets the width of an element.
    Syntax width: auto | value;

border property:

  • The border shorthand property sets all the border properties in one declaration.
    Syntax border: border-width border-style border-color;
    1. border-width: Its sets the width of an element's four borders. This property can have from one to four values.
      Syntax border-width: medium | thin | thick | value;
    2. border-style: Its sets the style of an element's four borders. This property can have from one to four values.
      Syntax border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
    3. border-style: Its sets the color of an element's four borders. This property can have from one to four values.
      Syntax border-color: color | transparent;
  • The border-top shorthand property sets all the top border properties in one declaration.
    The border-right shorthand property sets all the right border properties in one declaration.
    The border-bottom shorthand property sets all the bottom border properties in one declaration.
    The border-left shorthand property sets all the left border properties in one declaration.
    Syntax border: border-width border-style border-color;
  • Note: To set the four, three, two or one value use the same concept of the margin in bottom.

margin property:

  • The margin clears an area around the elements (outside the border) of an element.
    Syntax(Four values) margin: 1.(top value) 2.(right value) 3.(bottom value) 4.(left value);
    Syntax(Three values) margin: 1.(top value) 2.(right value-left value) 3.(bottom value);
    Syntax(Tow values) margin: 1.(top value-bottom value) 2.(right value-left value);
    Syntax(One values) margin: all four margins value;
    1. margin-top: Its sets the top margin of an element.
      Syntax margin-top: value;
    2. margin-right: Its sets the right margin of an element.
      Syntax margin-right: value;
    3. margin-bottom: Its sets the bottom margin of an element.
      Syntax margin-bottom: value;
    4. margin-left: Its sets the left margin of an element.
      Syntax margin-left: value;

font-weight property:

  • The font-weight property sets how thick or thin characters in text should be displayed.
    Syntax font-weight: normal | bold | bolder | lighter | value;

line-height property:

  • The line-height property specifies the line height.
    Syntax line-height: normal | value;