HTML

Hypertext Markup Language is the standard markup language for creating web pages and web applications. It was created by Tim Berners and it represents a document in the world wide web.

DOM

The DOM is an interface that treats a HTML document as a tree structure wherein each node is an object representing a part of the element.

The following example illustrates the tree-like structure of nested HTML elements.

<table>  
  <tr>
    <td>
      <p>Hello</p>
    </td>
    <td>
      <img src="pic.gif"/>
    </td>
  </tr>
</table>  

HTML 5

HTML 5 introduces new API, such as the ability to drag and drop, get history, have editable content, and etc. This reduces the dependency on additional Javascript code.

HTML 5 also introduces new elements such as <nav>, <footer>, <audio>, and <video>.

---

CSS

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML or XML.

Property and Value

CSS allows a browser engine to paint elements of a page with decorative features, like positioning and colors.

CSS features are defined with declaration blocks.

Example:

h2 {  
    // This is a declaration block
    ...
}

Inside declaration blocks, we have key/value pairs that are more formally known as property/value pairs.

Above, the property being set is background-color and the value is red.

Box Model

Each HTML element can be seen as a box. The "Box Model" in CSS represents four areas of this box and the browser's rendering engine adheres to this model.

• Margin Area
• Padding Area
• Border Area
• Content Area

Flex

The Flex layout model defines a CSS box model optimized for user interface design. Any children of a flex container can be laid out in any direction, and the sizes can be flexed to fill up unused space or to shrink to make room for other neighboring containers.

CSS 3

CSS 3 brings additional features, such as the following:

• Rounded corners
• Shadows
• Gradients
• Transitions or animations
• Flex