HTML & CSS
Published: 2023-03-02 05:52:22

## Box model
* When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model.
*  CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.
*Every box is composed of four parts defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

1. Content area
  * The content area,  bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. 
  * Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

2. Padding area
  * The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.
  * The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.

3. Border area
  * The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.
  * The border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

4. Margin area
  * The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.
  * The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.



## Inline vs Block elements

* In HTML elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout.

### Example for inline
```
<div>
  The following span is an <span class="highlight">inline element</span>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
</div>
```
In this example, the <div> block-level element contains some text. Within that text is a <span> element, which is an inline element. Because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow.

### Example for block element
```
<div style="border: 1px solid black;"> About Us </div>
```



## Positioning: absolute/relative
1. Absolute
* This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.
* You use the positioning attributes top, left, bottom, and right to set the location. 
*  Absolute positioned elements are removed from the normal flow, and can overlap elements.

### Syntax
```
position: absolute;
```
2. Relative
* The relative positioning property is used to set the element relative to its normal position. 
* Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. 

### Syntax
```
position: relative;
```



## Common CSS structural classes
* Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements.
* We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.

The following is the list of structural classes.
1. :first-child - it  represents the element that is prior to its siblings in a tree structure.
2. :nth-child(n) - it applies CSS properties to those elements that appear at the position evaluated by the resultant of an expression.
3. :last-child - it represents the element that is at the end of its siblings in a tree structure.
4. :nth-last-child(n) - :nth-last-child(Expression) is the same as :nth-child(Expression) but the positioning of elements start from the end.
5. :only-child - it represents the element that is a sole child of the parent element and there is no other sibling.
6. :first-of-type - It selects the first element of the one type of sibling.
7. :nth-of-type(n) - it represents those elements of the same type at the position evaluated by the Expression. 
8. :last-of-type - it represents the last element in the list of same type of siblings.
9. :nth-last-of-type(n) - It is the same as :nth-of-type(n) but it starts counting of position from the end instead of start.


## Common CSS styling classes
* **.container** : This class is used to create a container that holds the content of a web page or sometimes container which will hold other elements.

* **.header** : This class is used to style the header section of a web page, which typically contains the site logo, navigation menu, and other important information.

* **.nav** : This class is used to style navigation menus on a web page, such as a top or side menu.

* **.btn** : This class is used to style buttons on a web page. It's often used to add a background color, border, and padding to create a clickable button.

* **.card** : This class is used to create a card-style layout for content, such as a blog post or product listing. It often includes a background color, border, and padding to create a contained section for the content.

* **.footer** : This class is used to style the footer section of a web page, which typically contains copyright information, social media links.


## CSS specificity
Specificity Hierarchy :Every element selector has a position in the Hierarchy. 
1. Inline style: Inline style has highest priority. 
2. Identifiers(ID): ID have the second highest priority. 
3. Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next. 
4. Elements and pseudo-elements: Elements and pseudo-elements have lowest priority. 

* Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.


### Example
```
A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>
```
The specificity of A is 1 (one element selector)
The specificity of B is 101 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)

## Flex box / Grid
**Flex container**:The flex container specifies the properties of the parent. It is declared by setting the display property of an element to either flex or inline-flex.

**Flex items**:The flex items specify properties of the children. There may be one or more flex items inside a flex container.
* it is used to specify the direction of the flexible items inside a flex container. 
* It is used to align the flex items horizontally when the items do not use all available space on the main-axis. 
* It is used to align the flex items vertically when the items do not use all available space on the cross-axis.

The flex container properties are:
* flex-direction
* flex-wrap
* flex-flow
* justify-content
* align-items
* align-content


The flex item properties are:
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self

## CSS Responsive queries
* The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
* Media queries can be used to check many things, such as:
    * width and height of the viewport
    * width and height of the device
    * orientation (is the tablet/phone in landscape or portrait mode?)
    * resolution

### Syntax
```
@media not|only mediatype and (expressions) {
  CSS-Code;
}
```

Value and description:
* all -	Used for all media type devices
* print - Used for printers
* screen - used for computer screens, tablets, smart-phones etc.
* speech - Used for screenreaders that "reads" the page out loud

### Example 
```
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
```


## Common header meta tags
* The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
* You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. 

### Attributes and descriptions
1. Name
  * Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
2. content
  * Specifies the property's value.
3. scheme
  * Specifies a scheme to interpret the property's value (as declared in the content attribute).
4. http-equiv
  * Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

#### Example
```
<!DOCTYPE html>
<html>
  <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>
# output: Hello HTML5!
```