HTML AND CSS CONCEPTS
Tags: html, css, htmlconcepts, cssconcepts
Published: 2023-03-02 08:05:48

## BOX MODEL

* CSS Box Model represents each HTML elements as a rectangular box
* Every box is composed of four parts:
   - **Content**: This is the actual content of the element, such as text, an image, or a video player.
   - **Padding**: This is the space from the content area to the border area.
   - **Border**: This is the area that surrounds the padding area.
   - **Margin**: This is the outer space from the border area. It is used to separate the element from its neighbouring elements.
* Some of the properties of CSS Box Model includes width, height, padding, border and margin.
   - **Width**: This is used to set the width of the content area.
   - **Height**: This is used to set the height of the content area.
   - **Padding**: This are the padding properties which includes padding-top, padding-right, padding-left and padding-bottom. We can also use padding property to combine all the padding properties in clockwise direction.
   - **Border**: This are the border properties which include border-width, border-height, border-style and border-color. Border can also be set on each sides (top, right, bottom, left) separately.
   - **Margin**: This are the margin properties which includes margin-top, margin-right, margin-bottom, margin-left. We can also use margin property to combine all the margin properties in clockwise direction.
* We can combine all the properties above to implement the CSS Box Model.

**Example**:
```css
.card {
  width: 22rem;
  height: 22rem;
  padding: 2rem;
  border: 0.125rem dotted red;
  margin: 2rem;
}
```

---
## INLINE VS BLOCK ELEMENTS
### 1. INLINE ELEMENTS
- Inline elements does not start on a new line and  it only takes up width as much as the content provided.
- Some of the inline elements in HTML are: `<a>`, `<br>`, `<button>`, `<img>`, `<span>`, `<strong>`, `<span>` and `<input>`.
- Inline elements can only be positioned using CSS by the amount of content they have inside them.
- Inline elements cannot have margin or padding applied to them, they can only have borders around them.

### 2. BLOCK ELEMENTS
- Block elements takes the full width of their container and always starts on a new line.
- The browsers automatically adds some extra space (margin) before and after the element.
- Some of the block elements in HTML are: `<div>`, `<p>`, `<header>`, `<footer>`, `<section>`, `<form>`, `<nav>` and `<main>`.
- Block elements can be positioned using CSS
- Block elements also have margin, padding and border applied on them.

---
## POSITIONING: RELATIVE/ABSOLUTE
### 1. RELATIVE POSITIONING
- Elements which have `position: relative;` is always positioned relative to its normal position.
- Elemnts with relative position takes up space in the HTML page.
- Setting the properties like **top, right, bottom** and **left** will make the relatively positioned element adjusted away from its normal position.
- Also the other content will not be adjusted to fit into any gap left by the element.

### 2. ABSOLUTE POSITIONING
- Elements which have `position: absolute` is positioned relative to the nearest positioned parent element.
- If an absolute positioned element have no positioned parent element than it will use the document body and will move along with the page scrolling.
- Absolute positioned elements will get remove from the normal flow of the page and can overlap elements.
- Properties that can be used to position to the relative parent element are **top, right, bottom** and **left**.

---
## COMMON CSS STRUCTURAL CLASSES
- There are several common CSS structural classes used to style and layout HTML elements. Some of them are:
- **:first-child**: They represents the element that are prior to their siblings in a tree structure.
```css
.card li:first-child {
  color: gray;
}
```
- **:nth-child(n)**: They apply CSS properties to those elements that appear at the position evaluated by the resultant of an expression.
```css
.card li:nth-child(2n+1) {
  color: gray;
}
```
- **:last-child**: They are psuedo class that represents the element that is at the end of its siblings in a tree structure.
```css
.card li:last-child {
  color: gray;
}
```
- **:nth-last-child(n)**: This is same as **:nth-child(n)** but the positioning of elements start from the end.
```css
.card li:nth-last-child(2n+1) {
  color: gray;
}
```
- **:only-child**: They represents the element that is a sole child of the parent element and there is no other siblings.
```css
div p:only-child {
  color: gray;
}
```
- **:first-of-type**: They represent the first element of the one type of siblings.
```css
.card li:first-of-type {
  color: gray;
}
```
- **:nth-of-type(n)**: They represents those elements of the same type at the position given as n.
```css
.card li:nth-of-type(2n) {
  color: gray;
}
```

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

---
## CSS SPECIFICITY
- CSS specificity is a measure of how specific a selector is in targeting a particular HTML element.
- Here's a breakdown of how specificity is calculated:
  - Element selectors have the lowest specificity and are worth 1 point.
  - Class selectors are worth 10 points.
  - ID selectors are worth 100 points.
  - Inline styles have the highest specificity and are worth 1000 points.
- When multiple styles are applied to an element, the style with the highest specificity values takes precedence.
- If two selectors have the same specificity value, the one defined last in the CSS document will take precedence.

---
## CSS RESPONSIVE QUERIES
- It is used in CSS to apply styles to different devices or screen sizes.
- Media queries allow web developers to specify different CSS styles for different devices, resolutions, and orientations.
- They are written using the `@media` rule.
- We can use queries to target specific device sizes, such as smartphones or tablets.
  - `@media screen and (max-width: 767px)`: This is commonly used for smartphone devices.
  - `@media screen and (min-width: 768px) and (max-width: 1023px)`: They are commonly used for tablet devices
  - `@media screen and (min-width: 1024px)`: This is commonly used for large devices like PC, Laptop.

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

---
## COMMON HEADER META TAGS
- Header meta tags are an important part of a web page's HTML code that provide information about the page's content to search engines, social media platforms, and other web services.
- To Specify the character encoding used by the page. UTF-8 is the most widely used character encoding and supports all Unicode characters.
```html
<meta charset="UTF-8">
```
- To Specify the viewport settings for mobile devices, which affects the layout and scaling of the page on different devices.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- To Specify the title of the page, which appears in the browser's title bar and is used by search engines as the title of the search result.
```html
<title>Page Title</title>
```
- To Specify a brief description of the page's content, which appears in search results and is used by search engines to understand the page's content.
```html
<meta name="description" content="Page description">
```
- To Specify a comma-separated list of keywords that describe the page's content, which can help search engines understand the page's topic and improve its ranking.
```html
<meta name="keywords" content="keyword1, keyword2, keyword3">
```
- To Specify whether search engines should index the page and follow its links.
```html
<meta name="robots" content="index, follow">
```
- To Specify the canonical URL of the page, which is the preferred URL that search engines should use to index the page.
```html
<link rel="canonical" href="https://www.example.com/">
```

---
## CSS LENGTH 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.

---
## CONCLUSION
- HTML and CSS are fundamental tools for web developers.
- HTML provides the structure and content of a web page.
- CSS handles the presentation and styling of that content.
- HTML and CSS are constantly evolving with new updates being released regularly.
- HTML and CSS are integral to modern web development and will continue to be so in the future.
- Overall, HTML and CSS are crucial tools for web development that every aspiring web developer should learn.

---
## REFERENCES
* [Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
* [Inline vs Block element](https://www.w3schools.com/html/html_blocks.asp)
* [Positioning: Relative/Absolute](https://www.w3schools.com/css/css_positioning.asp)
* [Common CSS structural classes](https://www.web4college.com/css/web4-css-structural-classes.php)
* [Common CSS syling classes](https://www.digitalocean.com/community/tutorials/how-to-create-classes-with-css)
* [CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)
* [CSS Responsive Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
* [Flexbox/Grid](http://flexboxgrid.com/)
* [Common header meta tags](https://www.w3schools.com/tags/tag_meta.asp)
* [CSS length units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)