HTML-CSS CONCEPTS
Published: 2023-02-24 12:45:20

## **BOX MODEL**

+ The CSS box model surrounds every HTML element with a rectangular box.
+ It consists of four parts: content, padding, border, and margin.
  + **Content:** The actual text or image within the element.
  + **Padding:** The space between the content and the border.
  + **Border:** Line that surrounds the padding.
  + **Margin:** The space between the border and adjacent HTML elements.
+ Properties of a  CSS box include width, height, padding, border, and margin.
  + **Width** and **height** set the size of the content box.
  + **Padding** can be set for each side of the element using padding-top, padding-right, etc.
  + **Border** can be set using border-width, border-style, and border-color properties.
  + **Margin** can be set using margin-top, margin-right, etc.
+ The CSS box model can be implemented using a combination of these properties.
+ CSS Box model is essential for creating visually appealing designs on web pages.

```css
.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}
```
<hr>

## **INLINE VS BLOCK ELEMENTS**

### 1. **BLOCK ELEMENTS**

  + Block elements take up the entire width of their container and stack vertically.
  + **Examples** of block elements include `<div>`, `<p>`, `<h1>`, `<form>`, `<ul>`, `<ol>`, and `<li>`.
  + Block elements can have margins, padding, and borders applied to them.
  + Block elements can be positioned using CSS.

### 2. **INLINE ELEMENTS**

  + Inline elements do not start a new line by default and only take up as much width as necessary.
  + **Examples** of inline elements include `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, and `<input>`.
  + Inline elements cannot have margins or padding applied to them but can have borders.
  + Inline elements can be positioned using CSS, but their position is relative to the text around them.
<hr>

## **POSITIONING: RELATIVE/ABSOLUTE**

### 1. **RELATIVE POSITIONING**

+ Positioned relative to its normal position in the document flow.
+ Takes up space in the normal document flow.
+ Can be moved using **top**, **bottom**, **left**, and **right** properties.
+ New position is relative to its original position.

### 2. **ABSOLUTE POSITIONING**

+ Positioned relative to nearest positioned ancestor or initial containing block.
+ Taken out of the normal document flow and does not take up space.
+ Can be moved using **top**, **bottom**, **left**, and **right** properties.
+ New position is relative to nearest positioned ancestor.
<hr>

## **COMMON CSS STRUCTURAL CLASSES**

  + **.container**: Creates a wrapper for the content on a web page with a fixed width to center the content and provide padding.
  + **.row**: Creates a row of columns within a container.
  + **.col**: Creates a column within a row, with a specified width or auto width.
  + **.clearfix**: Clears floated elements within a container.
  + **.hidden**: Hides an element from view by setting its display property to "none".
  + **.visible**: Shows a hidden element by overriding its display property to "block" or "inline".
  + **.padding**, **.padding-top**, **.padding-right**, **.padding-bottom**, **.padding-left**: Applies padding to an element, with different values to create space around the content.
  + **.margin**, **.margin-top**, **.margin-right**, **.margin-bottom**, **.margin-left**: Applies margin to an element, with different values to create space between the elements.
  + **.float-left**, **.float-right**, **.float-none**: Floats an element to the left, right, or none, respectively.
  + **.text-truncate**: Truncates long text within an element with ellipsis.
<hr>

## **COMMON CSS STYLING CLASSES**

### 1. COLORS

  + **.text-muted**: Applies a light gray color to text for muted or secondary content.
  + **.text-primary**: Applies a primary color to text for main focus or importance.
  + **.text-success**: Applies a green color to text for success or positive outcome.
  + **.text-warning**: Applies an orange or yellow color to text for warning or caution.
  + **.text-danger**: Applies a red color to text for danger or critical issues.
  
### 2. SPACING

  + **.p-1**, **.p-2**, **.p-3**: Adds padding to an element in various sizes.
  + **.m-1**, **.m-2**, **.m-3**: Adds margin to an element in various sizes.
  + **.mt-1**, **.mt-2**, **.mt-3**: Adds margin-top to an element in various sizes.
  + **.mb-1**, **.mb-2**, **.mb-3**: Adds margin-bottom to an element in various sizes.
  + **.ml-1**, **.ml-2**, **.ml-3**: Adds margin-left to an element in various sizes.
  + **.mr-1**, **.mr-2**, **.mr-3**: Adds margin-right to an element in various sizes.

### 3. OTHERS

  + **.rounded**: Applies rounded corners to an element.
  + **.shadow**: Applies a shadow effect to an element.
  + **.opacity-50**: Applies 50% opacity to an element, making it semi-transparent.
  + **.text-center**: Centers text within an element.
  + **.text-left**: Aligns text to the left within an element.
  + **.text-right**: Aligns text to the right within an element.

<hr>

## **CSS SPECIFICITY**

+ CSS specificity is a measure of how specific a CSS selector is in targeting an HTML element.
+ Four values are used to calculate specificity:
  + 0 points for universal selector(*) and combinators(+, >, ~),
  + 1 point for element selectors(e.g. h1, div, input), pseudo-elements(:after, :before), and class selectors(.example),
  + 10 points for ID selectors(#example), and
  + 1000 points for inline styles.
+ When multiple styles are applied to an element, the style with the highest specificity value takes precedence.
+ If two selectors have the same specificity value, the one defined last in the CSS document takes precedence.
<hr>

## **CSS RESPONSIVE QUERIES**

+ CSS responsive queries are also called media queries.
+ They allow you to apply CSS styles based on the characteristics of the device or browser being used to view your website.
+ They are written using the @media rule.
+ We can use queries to target specific device sizes, such as smartphones or tablets, using min-width and max-width.
  + `@media screen and (max-width: 767px)`: Commonly used for smartphones.
  + `@media screen and (min-width: 768px) and (max-width: 1023px)`: Commonly used for tablets.
  + `@media screen and (min-width: 1024px)`: Commonly used for PCs.
<hr>

## **FLEXBOX/GRID**

### 1. **FLEXBOX**

+ One-dimensional layout system.
+ Aligns elements along a single axis (horizontally or vertically).
+ Allows control over size, order, and alignment of elements within a container.
   + **display: flex; -** Defines a flex container.
   + **flex-direction -** Defines the main axis of the flex container, either row or column.
   + **justify-content -** Aligns items along the main axis.
   + **align-items -** Aligns items along the cross axis.
   + **flex-wrap -** Determines if items should wrap or stay on a single line.
   + **flex-grow -** apecifies how much an item can grow in relation to the other items.

### 2. **GRID**

+ Two-dimensional layout system.
+ Creates a grid of rows and columns.
+ Allows placement of elements within the grid.
+ Provides more control over layout, making it suitable for complex, multi-dimensional layouts that adapt to different screen sizes.
   + **display: grid;** - Defines a grid container.
   + **grid-template-columns/grid-template-rows -** Defines the number and size of columns/rows in the grid.
   + **grid-column/grid-row -** Specifies which columns/rows an element should span.
   + **grid-gap -** Defines the gap between grid cells.
   + **justify-items -** Aligns items along the horizontal axis.
   + **align-items -** Aligns items along the vertical axis.
<hr>

## **COMMON HEADER META TAGS**

+ `<title>`: Defines the title of the HTML document.
+ `<meta charset="utf-8">`: Specifies the character encoding used in the HTML document.
+ `<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 brief description of the HTML document.
+ `<meta name="keywords" content="comma-separated list of keywords">`: Specifies a comma-separated list of relevant keywords.
+ `<link rel="stylesheet" href="stylesheet.css">`: Links an external stylesheet to apply styles to HTML elements.
<hr>

## **CSS UNITS**

### ABSOLUTE UNITS

  + **em**: Based on the font size of the parent element.
  + **rem**: Based on the font size of the root element.
  + **%**: Based on the size of the parent element.
  + **vw/vh**: Based on the viewport width and height.

### RELATIVE UNITS

  + **px**: Based on the physical pixel of the screen.
  + **in/cm/mm**: Based on physical measurements.
<hr>

## **REFERENCES**

+ [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS)
+ [CSS Documentation](https://devdocs.io/css/)
+ [CSS Tutorial - GeeksforGeeks](https://www.geeksforgeeks.org/css/)
+ [YouTube Lectures By Code With Harry](https://www.youtube.com/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg)