HTML-CSS Concepts
Tags: html, css, beginners, webdev
Published: 2023-03-02 05:54:34


## **BOX MODEL**

* The CSS box model refers to a rectangular box that is created around the html element.
![CSS box model](https://static.javatpoint.com/csspages/images/css-box-model.png "CSS box model")
* It consists of four parts: content, padding, border, and margin.
  * **Content:** It represent content inside the element.
  * **Padding:** it represent the space between the content and the border.
  * **Border:** Line that surrounds the padding.
  * **Margin:** The space between the border and adjacent HTML elements.
* To change the padding arround the content use **padding-left**, **padding-right**, **padding-top**, and **padding-bottom**.
* To change the border around the padding use **border-left**, **border-right**, **border-top**, and **border-bottom**.
* Similarly, to change the margin use **margin-left**, **margin-right**, **margin-top**, and **margin-bottom**.

<hr>

## **INLINE VS BLOCK ELEMENTS**

### 1. **BLOCK ELEMENTS**

  * Block elements take up the entire width of their container.
  * They create a line break after the element.
  * Some of the examples of block elements are `<div>`, `<h1>`-`<h6>`, `<p>`, `<ul>`, `<ol>`, `<li>`, `<table>`, `<form>`, and `<footer>`.
  * It is used to create structure of webpage.

### 2. **INLINE ELEMENTS**

  * Inline elements take up only neccessay width.
  * They can't create a line break after the element.
  * Some of the examples of inline elements are `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, and `<input>`.
<hr>

## **CSS POSITIONING**

### 1. **Relative POSITIONING**
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.


![Relative vs Absolute positioning](https://i.stack.imgur.com/gz265.png 'Relative vs Absolute positioning')
### 2. **ABSOLUTE POSITIONING**

This element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor


<hr>

## **COMMON CSS STRUCTURAL CLASSES**

* **.row**: This class is used to create a row of columns in a grid-based layout.

* **.col**: This class is used to create columns in a grid-based layout.

* **.container**: This class is used to create a container for the web page content, often used to center and set a maximum width for the content area.

* **.wrapper**: This class is used to wrap the main content of the web page. It's often used to create a container for the content that's separate from the header and footer.

* **.rightmenu**: This class is used to style a right sidebar section on webpage.

* **.main-content**: This class is used to style the main content section of a web page.

* **.leftmenu** : This class is used to style a left sidebar section on webpage.
 
<hr>

## **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.

<hr>

## **CSS SPECIFICITY**

+ CSS specificity is a method to determine which style to apply if there is any conflict.
+ Types of selectors in CSS with their specificity value:
    * Type selectors and pseudo-elements - they have the lowest specificity value (0,0,0,1)
    * Class selectors, attributes selectors and pseudo-classes - they have a medium specificity value (0,0,1,0)
    * ID selectors - they have a high specificity value (0,1,0,0)
    * Inline styles - they have the highest specificity value (1,0,0,0)
+ When two or more styles are applied to an element, the style with the highest specificity value will apply.
+ If two selectors have the same specificity value, the one that was defined last in the CSS file will apply to the element.

<hr>

## **CSS RESPONSIVE QUERIES**

+ CSS responsive queries are also called media queries.
+ They allow developer to apply CSS styles on webpage based on the viewport of the device or browser in device.
+ Syntax start with  `@media rule`.
+ We use differrent queries to target specific device sizes, such as smartphones or tablets, using min-width and max-width.
  + `@media all and (max-width: 767px)`: Commonly used for smartphones.
  + `@media all and (min-width: 768px) and (max-width: 1023px)`: Commonly used for tablets.
  + `@media all and (min-width: 1024px)`: Commonly used for PCs.
<hr>

## **FLEXBOX/GRID**

### 1. **FLEXBOX**
![Flex Box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png "Flex Box model")
+ One-dimensional layout system.
+ Aligns elements along a single axis (horizontally or vertically).
  * To align items vertically set the `flex-direction: column`, then the main-axis will be vertical and cross-axis will be Horizontal. 
  * To align items Horizontally set the `flex-direction: row`, then the main-axis will be horizontal and cross-axis will be vertical.
+ `Justify-content` works on main axis.
+ `align-items` work on cross axis.
+ `gap` is used to provide space between the element of main axis and cross axis.


### 2. **GRID**

+ Two-dimensional layout system.
+ Creates a grid of rows and columns.
+ Allows placement of elements within the grid.
+ `grid-template-columns`/`grid-template-rows` - It defines the size and number of column/row in grid.
+ `grid-column`- In this we need to specift the positon of starting of column and ending of column upto which content needed to spread.
+ `grid-row`- In this we need to specift the positon of starting of row and end of row upto which content needed to spread.
+ `grid-gap` Defines the gap between grid cells.
+ `justify-items`-  Aligns object along the horizontal axis.
+ `align-items`-  Aligns object along the vertical axis.
<hr>

## **COMMON HEADER META TAGS**

+ `<title>`: Defines the title of webpage.
+ `<meta charset="utf-8">`: Specifies the character encoding used in the webpage.
+ `<meta name="viewport" content="width=device-width, initial-scale=1.0>`: Sets the viewport width to the width of the device and sets the initial zoom level to 1.0.
+ `<meta name="description" content="description of your webpage">`: Provides a small description of the webpage.
+ `<link rel="stylesheet" href="stylesheet.css">`: Use this to link external css file to the html file.
<hr>

## **CSS UNITS**

### ABSOLUTE UNITS

  + **em**

  This unit is depended on parent element. For example, setting the font size of a parent element to 16px and the font size of a child element to 1.5em would result in a font size of 24px for the child element.

  + **rem**

  This unit is depend on root element. For example, setting the font size of a root element to 16px and the font size of a element to 1.5rem would result in a font size of 24px for that element.

  + **%**

  This unit is the percentage of its parent element. For example, setting the font size of a parent element to 16px and the font size of a child element to 50% would result in a font size of 8px for the child element.

  + **vw/vh**

  This unit is depend upon the height and width of viewport. For example, setting the height of an element to 50vh would make it half the height of the viewport.

### RELATIVE UNITS

  + **px**:

  It represent the physical pixel of the screen.


  + **in/cm/mm**
  
  This is physical units such as centimeter,inch and milimeter.

<hr>

## **REFERENCES**

* Geek For Geeks. "CSS units – %, em, rem, px, vh, vw". Retrieved from https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/
* Java T Point. "CSS Box Model". Retrieved from https://www.javatpoint.com/css-box-model
* MDN web docs. "position". Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/position
* W3 School. "HTML Block and Inline Elements". Retrieved from https://www.w3schools.com/html/html_blocks.asp
* Geek For Geeks. "CSS Grid Layout Module". Retrieved from https://www.geeksforgeeks.org/css-grid-layout-module/
* W3 School. "CSS Flexbox". Retrieved from https://www.w3schools.com/css/css3_flexbox.asp