HTML and CSS concepts
Published: 2023-03-02 07:22:43

### Box Model: 
* Every element on a webpage is considered a rectangular box 
* Box model has some properties which can be set to the HTML page
#### Padding:
* Specifies the gap between content and border

```
// HTML code //

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 class="header"> hello</h1>
</body>
</html>


//  CSS code  //
.header{
    padding:1rem;
}
```
* The above maintain a gap of 1rem between content and border of h1 element
* Here are some of the padding attributes
#### padding-top
* Specifies the gap between the top of the content and the border
* in the same we can use padding-left, padding-bottom, and padding-right to give space at 
required position.
* If we want to apply the same padding for the top and bottom and the same padding for the left and right you have to pass two values like below
```
p{
    padding: 1rem 2rem;
}
```
* The above property sets 1rem gap at the top and bottom and a 2 rem gap at the left side and right side
* if you want different spacing for all four sides you can give 4 values for the padding attribute
```
a{
    padding: 1rem 2rem 3rem 2rem;
}
```
* Here the order of values applied to the element is a top, right, bottom, left
#### Margin:
* margin specifies the gap between the border and other outside sibling elements
* Syntax for margin is the same as padding explained above but instead of padding we use margin in syntax
* you can use all the attributes mentioned for padding
For example
```
p{
    margin: 10px 20px 22px 10px
}
```
#### Border:
* Border specifies how the border should be to your HTML elements like border style, border width, and border color.
* border-style properties are dashed, solid, none, and dotted
* border-width specifies the width of the border
* border-color specifies the color of the border
* Shorthand syntax to apply all of the above properties is
```
a{
    border: solid 2px blue
}
```
#### Box-sizing in CSS
* This property controls how an element's width and height are calculated, including its padding and border.
* By default, when you set the width and height of an element in CSS, those values only apply to the element's content
* If you apply border and padding the element size will increase because the default value for box-sizing is content-box
* If you want to mention sizes including padding and border you can give border-box for box-sizing element
Example
```
.element {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 1px solid black;
}

```
In the above code, the box-sizing property is set to border-box, which means that the element's width of 200 pixels includes its padding and border. Without the border-box value, the element's total width would be 222 pixels (200px + 10px padding on each side + 1px border on each side).


### Inline versus Block Elements:
#### Block elements:
* Block elements are those that take up the full width of their container and create a new line after the element.
* Block elements typically contain other block and inline elements within them
* Examples of block elements include 
```
<div>, <p>, <h1> to <h6>, <ul>, <ol>, and <form>.
```
#### inline elements
* These elements do not create a new line after the element and only take up as much width as necessary to contain their content.
* Examples of inline elements include 
```
<span>, <a>, <strong>, <em>, and <img>.
```
* These elements don't have padding, border, and margin properties

#### Positioning: Relative/Absolute
#### position relative
* When you set position: relative to an element, it is positioned relative to its normal position on the page. 
* This means that you can use the top, bottom, left, and right properties to move the element up, down, left, or right from its original position.
```
.box {
  position: relative;
  top: 20px;
  left: 50px;
}

```
In this example, the box element will be positioned 20 pixels down from its normal position and 50 pixels to the right of its normal position.
#### position absolute:
* When you set position: absolute on an element, it is positioned relative to its nearest positioned ancestor. 
* If no ancestor elements are positioned, then the element is positioned relative to the body of the webpage.
* This means that you can use top, bottom, left, and right properties to position the element precisely on the page, regardless of where it appears in the HTML document.
Example
```
.box {
  position: absolute;
  top: 100px;
  left: 200px;
}

```
In this example, the box element will be positioned 100 pixels down from its nearest positioned ancestor and 200 pixels to the right of its nearest positioned ancestor.

### Common CSS structural classes:
* structural classes are used to apply styles to specific types of elements based on their position in the document tree.
#### Parent selector
* The parent selector (also known as the "descendant selector") is used to apply styles to child elements based on their relationship to a parent element.
* The selector uses a space to indicate the relationship between the parent and child elements.
Example 
```
.parent p {
  color: red;
}

```
In this example, the p elements that are descendants of the parent element will have red text color.

#### Child Selector

* The child selector (also known as the "direct descendant selector") is used to apply styles to direct child elements of a parent element. 
* The selector uses the > symbol to indicate the direct relationship between the parent and child elements.
Example
```
.parent > p {
  color: red;
}

```
In this example, only the direct p children of the parent element will have red text color.

#### Sibling Selector

* The sibling selector is used to apply styles to elements that are siblings of another element. 
* There are two types of sibling selectors: the adjacent sibling selector and the general sibling selector.

#### The adjacent sibling selector (represented by the + symbol)
* selects the first sibling that follows immediately after the first element.
Example
```
h1 + p {
  color: red;
}

```
In this example, the p element that immediately follows the h1 element will have red text color.

#### The general sibling selector (represented by the ~ symbol):

* Selects all siblings that follow after the first element.
```
h1 ~ p {
  color: red;
}

```
In this example, all p elements that follow the h1 element will have red text color.

#### pseudo-classes
* These are used to style elements based on their state or relationship to other elements in the document tree.
* Pseudo-classes start with a colon (:) and are appended to a selector.
Common types of pseudo-classes
#### :hover
*:hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse.
* commonly used to highlight links and buttons.
Example
```
a:hover {
  color: red;
}

```
This will make all links turn red when the user hovers over them.
#### :active
* : active pseudo-class is used to apply styles to an element while it is being clicked or activated.
```
button:active {
  background-color: gray;
}

```
This will make a button turn gray while the user is clicking on it.
#### :focus

* This is used to apply styles to an element that has focus.
* commonly used to highlight form fields that are being filled out by the user.
```
input:focus {
  outline: none;
  border-color: blue;
}
```
This will remove the outline and change the border color of an input field when it has focus.

#### :first-child and :last-child

* The :first-child and :last-child pseudo-classes are used to select the first or last child element of a parent element. 
* This is commonly used to style list items or table rows.
Example
```
li:first-child {
  font-weight: bold;
}

tr:last-child {
  background-color: gray;
}

```
This will make the first list item bold and give the last table row a gray background color.
#### :nth-child()

The :nth-child() pseudo-class is used to select an element based on its position in the document tree. This is commonly used to alternate the styles of table rows or to select specific items in a list.

For example:
```
tr:nth-child(even) {
  background-color: gray;
}

li:nth-child(3n) {
  font-style: italic;
}
```
This will give every even table row a gray background color and make every third list item italic.
* You can use odd to select every nth odd element
* To select a specific nth child use the below syntax
```
li:nth-child(3) {
  font-weight: bold;
}

```
This will select the third li element and make its text bold.
* If you want  to select every third child element starting from the fourth element use below one
```
li:nth-child(3n+4) {
  text-decoration: underline;
}

```
This will select every third li element starting from the fourth li element and underline its text.

### Common CSS styling classes
* CSS styling classes are reusable sets of styles that can be applied to HTML elements to quickly and consistently achieve a desired visual effect.
#### .container
* The .container class is used to define a fixed-width container element that centers its content horizontally on the page. 
* This class is commonly used for wrapping entire page layouts or individual sections of a page.

```
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
```
#### .btn
* This class is used to define a button element with a standardized appearance.
```
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
}
```
#### .card

* This class is used to define a rectangular container element with a border and padding. 
* It is commonly used for displaying content in a structured and visually appealing way.
```
.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
```
The .card class is used to define a rectangular container element with a border and padding
#### .form-control
* This class is used to define form input elements with a standardized appearance.
* It is commonly used for text inputs, text areas, and other form elements.

#### text-center

* This class is used to horizontally center text inside an element. 
* It is commonly used for headings, paragraphs, and other text elements.
```
.text-center {
  text-align: center;
}
```
```
.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
```
By defining common style attributes you can re-use whenever you need.

#### CSS Specificity
* CSS specificity is a way of determining which CSS rules should be applied to an HTML element when there are multiple CSS rules targeting the same element.

below is the order of specificity from lowest to highest
1. Type selectors (e.g., div, p, a)
2. Class selectors (e.g., .my-class)
3. ID selectors (e.g., #my-id)
4. Inline styles (e.g., style="color: red;")

The higher the specificity of a selector, the more weight it carries when determining which CSS rule should be applied to an element. For example, a rule with an ID selector will override a rule with a class selector, which in turn will override a rule with a type selector.

#### CSS Responsive Queries
* To make our webpage responsive we use media queries 
Media queries allow developers to apply different styles to different devices or screen sizes based on their characteristics, such as screen width, height, orientation, resolution, and more.

* To use media queries in CSS, you can add them to your CSS stylesheet using the @media rule.
Example
```
/* styles for all devices */
body {
  font-size: 16px;
  color: #333;
}

/* styles for devices with a maximum width of 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* styles for devices with a minimum width of 1024px */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

```
In the example above, we have defined styles for all devices by targeting the body element. Then, we added two media queries to adjust the font size of the body element based on the device's screen width. The first media query targets devices with a maximum width of 768px, and the second targets devices with a minimum width of 1024px.

Media queries can also be combined with logical operators (and, not, and only) and other CSS selectors to create more complex rules. 
Example:
```
/* styles for devices with a width between 768px and 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 90%;
  }
}

/* styles for devices with a width greater than 1024px or with a high-resolution display */
@media (min-width: 1024px) or (orientation: protrait) {
  .container {
    width: 80%;
  }
}

```
### Flexbox/Grid

### Flexbox
Flexbox (short for "Flexible Box Layout") is a layout model in CSS that allows you to create flexible and responsive layouts for web pages.
* It provides a way to arrange and align elements inside a container, regardless of their size or content, in a predictable and flexible way.

#### display:
This property sets the element to be a flex container or not. To create a flex container, set the display property to flex or inline-flex.

#### flex-direction:
This property sets the direction of the main axis of the flex container. It can be set to row (left-to-right), row-reverse (right-to-left), column (top-to-bottom), or column-reverse (bottom-to-top).

#### justify-content:
This property sets the alignment of flex items along the main axis of the flex container. It can be set to flex-start (left or top), flex-end (right or bottom), center (centered), space-between (distributed evenly with no extra space before the first or after the last item), space-around (distributed evenly with equal space before the first and after the last item), or space-evenly (distributed evenly with equal space between all items).

#### align-items:
This property sets the alignment of flex items along the cross-axis of the flex container. It can be set to stretch (stretches to fill the container), flex-start (top or left), flex-end (bottom or right), center (centered), or baseline (aligned on their baselines).

#### flex-wrap:
This property determines whether flex items should wrap or not if they exceed the width or height of the flex container. It can be set to nowrap (no wrapping), wrap (wrapping if needed), or wrap-reverse (wrapping in reverse order).

#### align-content:
This property sets the alignment of multiple lines of flex items along the cross-axis of the flex container. It works like justify-content, but for multiple lines of flex items. It can be set to stretch (stretches to fill the container), flex-start (top or left), flex-end (bottom or right), center (centered), space-between (distributed evenly with no extra space before the first or after the last line), space-around (distributed evenly with equal space before the first and after the last line), or space-evenly (distributed evenly with equal space between all lines).

#### flex: 
* This property is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties. 
* It sets how much a flex item should grow or shrink relative to the other flex items in the same container.
Example
Html code
```
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>
```
CSS code
```
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  height: 400px;
  background-color: lightblue;
}

.flex-item {
  flex: 1 1 100px;
  background-color: white;
  color: black;
  font-size: 24px;
  text-align: center;
  padding: 20px;
  margin: 10px;
}

```

### Grid
CSS Grid is a powerful layout system that allows you to create complex two-dimensional layouts for web pages.

#### display: grid;: 
* This property is used to make an element a grid container.

#### grid-template-columns and grid-template-rows: 
These properties are used to define the size of the grid tracks (rows and columns) in the grid. They can accept values such as length, percentage, fr units, auto, and minmax().

Example
```
.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}
```

#### grid-template-areas: 
* This property is used to define the grid areas by specifying the grid names for each cell in the grid. You can use dots to represent empty cells.
Example

```
.container {
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
}
```

#### grid-template: 
This is a shorthand property that combines grid-template-rows, grid-template-columns, and grid-template-areas in one declaration.



#### grid-column-gap and grid-row-gap: 
* These properties are used to define the space between grid columns and rows.

```
.container {
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}

```

#### grid-gap: 
* This is a shorthand property that combines grid-row-gap and grid-column-gap in one declaration.

```
.container {
  grid-gap: 10px 20px;
}

```

#### grid-auto-rows and grid-auto-columns: 
* These properties are used to set the size of the rows and columns that are not explicitly defined in the grid template.
```
.container {
  grid-auto-rows: 200px;
  grid-auto-columns: 1fr;
}

```

#### grid-auto-flow: 
* This property is used to specify how the grid should fill in cells that are not explicitly defined in the grid template. The possible values are row, column, row dense, and column dense.

```
.container {
  grid-auto-flow: row;
}

```

#### grid: 
* This is a shorthand property that combines grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow in one declaration.

```
.container {
  grid:
    "header header header" 100px
    "nav main aside" 1fr
    "footer footer footer" 100px /
    1fr 2fr 1fr;
}

```

grid-row-start, grid-row-end, grid-column-start, and grid-column-end: 
* These properties are used to specify the starting and ending positions of grid items in the grid.
 
```
.item {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
}

```

#### grid-row and grid-column: 
These are shorthand properties that combine grid-row-start, grid-row-end, grid-column-start, and grid-column-end in one declaration.
Example
```
.item {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

```

#### grid-area: 
This property is used to specify the grid area that a grid item should span.

```
.item {
  grid-area: 2 / 2 / 4 / 4;
}
```
#### justify-items and align-items: 
* These properties are used to align grid items within their grid cells. The possible values are start, end, center, stretch, and baseline.
Example code
```
.container {
  justify-items: center;
  align-items: end;
}

```

#### justify-content and align-content: 
* These properties are used to align the grid tracks within the grid container. The possible values are start, end, center, stretch, space-between, space-around, and space-evenly.

Example
```
.container {
  justify-content: space-between;
  align-content: center;
}

```

#### place-items and place-content: 
* These are shorthand properties that combine justify-items and align-items, and justify-content and align-content in one declaration.

```
.container {
  place-items: center end;
  place-content: space-between center;
}

```

#### grid-auto-flow: 
* This property controls the automatic placement of grid items that are not explicitly placed with grid-row and grid-column.
Example
```
.container {
  grid-auto-flow: dense;
}

```

### Common header meta tags

`<meta charset="utf-8">`  
This meta tag specifies the character encoding used in the document, which is usually set to UTF-8.

` <meta name="viewport" content="width=device-width, initial-scale=1.0">`  
This meta tag sets the viewport size for the document, which is important for responsive design. The width=device-width attribute sets the width of the viewport to the width of the device, while the initial-scale=1.0 attribute sets the initial zoom level to 1.0.

` <meta name="description" content="Description of your website"> `
 This meta tag provides a brief description of the website, which can be used by search engines or social media platforms when displaying search results or links.

` <meta name="keywords" content="keyword1, keyword2, keyword3"> `
 This meta tag specifies a comma-separated list of keywords or phrases that are relevant to the website.

`<meta name="author" content="Your Name"> `
 This meta tag specifies the author of the document.

`<meta name="robots" content="index, follow"> `

This meta tag specifies how search engine crawlers should treat the website. The index attribute tells search engines to index the website, while the following attribute tells search engines to follow the links on the website.

`<meta http-equiv="X-UA-Compatible" content="IE=edge">`
This meta tag specifies the compatibility mode for Internet Explorer.

## References

- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
- https://www.geeksforgeeks.org/difference-between-block-elements-and-inline-elements/
- https://www.sitepoint.com/structural-pseudo-classes/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- https://css-tricks.com/logic-in-css-media-queries/