IMPORTANT CSS PROPERTIES

Basics

1. width: Sets the width of an element's content area.

2. height: Sets the height of an element's content area.

3. margin: Specifies the margin space around an element. It clears an area outside the border.

4. padding: Specifies the padding space inside an element. It clears an area around the content.

5. border: Specifies the width, style, and color of an element's border.

6. box-sizing: Defines how the total width and height of an element are calculated, including padding and border.

Layout and Box Model:

1. display: Specifies how an element is displayed (e.g., block, inline, inline-block, flex, grid).

2. position: Determines the positioning method used for an element (e.g., static, relative, absolute, fixed).

3. float: Specifies whether an element should float to the left or right of its container.

4. clear: Specifies which sides of an element other floating elements are not allowed.

Typography:

1. font-family: Specifies the font(s) used for text content.

2. font-size: Sets the size of the font.

3. font-weight: Sets the thickness of the font.

4. line-height: Sets the height of a line of text.

5. text-align: Specifies the horizontal alignment of text content.

6. text-decoration: Adds visual emphasis to text content (e.g., underline, line-through, none).

Color and Background:

1. color: Sets the text color.

2. background-color: Sets the background color of an element.

3. background-image: Specifies one or more background images for an element.

Borders and Box Model:

1. border: Specifies the width, style, and color of an element's border.

2. border-radius: Sets the radius of the element's corners.

3. margin: Specifies the margin space around an element.

4. padding: Specifies the padding space inside an element.

Flexbox and Grid:

1. flex: Combines flex-grow, flex-shrink, and flex-basis properties to set the flexibility of a flex item.

2. justify-content: Aligns flex items along the main axis of the flex container.

3. align-items: Aligns flex items along the cross axis of the flex container.

4. grid-template-columns, grid-template-rows: Defines the columns and rows of a grid layout.

5. grid-column, grid-row: Specifies the grid lines on which an item will be placed.

Miscellaneous:

1. z-index: Specifies the stack order of an element.

2. opacity: Sets the opacity level for an element.

3. transition: Defines transition effects for an element.

4. box-shadow: Adds shadow effects to an element's box.

---

Application

Layout and Box Model:

• DISPLAY

display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;

1. display: block;:

   • Elements with display: block; take up the full width available, by default, and create a new line before and after the element.

   • Common block-level elements include <div>, <p>, <header>, <footer>, <section>, etc.

   • Block-level elements can have width, height, margin, padding, and border properties applied to them.

2. display: inline;:

   • Elements with display: inline; do not start on a new line. They flow with surrounding content and only take up as much width as necessary.

   • Common inline elements include <span>, <a>, <strong>, <em>, etc.

   • Inline elements cannot have width, height, margin-top, margin-bottom, and padding-top, padding-bottom applied to them.

3. display: inline-block;:

   • Combines features of both inline and block. It allows the element to have a specified width and height, and it also respects top and bottom margins and padding.

   • Elements with display: inline-block; are positioned like inline elements but behave like block elements concerning their content.

   • Useful for creating elements like navigation menus or grid items that need to be displayed in a line while retaining block-like properties.

4. display: flex;:

   • Implements a flexible box model layout. It allows elements within a container to be dynamically arranged horizontally or vertically.

   • Child elements of a flex container become flex items and can be aligned and distributed in various ways using properties like justify-content, align-items, and flex-direction.

   • Enables powerful layouts such as responsive navigation bars, flexible card layouts, and evenly spaced item distribution.

5. display: grid;:

   • Introduces a two-dimensional grid-based layout system. It divides a page into columns and rows, allowing content to be placed in cells.

   • Provides precise control over layout, alignment, and spacing of elements within the grid.

   • Properties like grid-template-columns, grid-template-rows, grid-column, grid-row, etc., are used to define and position grid items.

   • Offers versatility and simplicity in creating complex layouts, such as magazine-style designs or data tables.

• POSITION

    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: static;
  

  1. position: static;

     • This is the default position value. Elements with position: static; are positioned according to the normal flow of the document.

     • Top, right, bottom, left, and z-index properties do not affect static elements.

  2. position: relative;

     • Elements with position: relative; are positioned relative to their normal position in the document flow.

     • When an element is given position: relative;, you can move it using the top, right, bottom, and left properties.

     • The original space occupied by the element is preserved even after it's moved, which may affect the layout of surrounding elements.

  3. position: absolute;

     • Elements with position: absolute; are positioned relative to the nearest positioned ancestor (an ancestor element with a position value other than static) or to the initial containing block if no positioned ancestor is found.

     • They are removed from the normal document flow, meaning they don't affect the position of surrounding elements.

     • Use top, right, bottom, and left properties to specify the exact position of the element relative to its containing block.

     • If no ancestor has a position other than static, an absolutely positioned element is positioned relative to the initial containing block (usually the viewport).

  4. position: fixed;

     • Elements with position: fixed; are positioned relative to the viewport, meaning they always stay in the same place even when the page is scrolled.

     • Fixed elements are removed from the normal document flow, similar to absolutely positioned elements, and don't affect the layout of surrounding elements.

     • Like absolutely positioned elements, use top, right, bottom, and left properties to specify the exact position of the fixed element relative to the viewport.

  5. position: sticky;

     • Elements with position: sticky; behave like a relatively positioned element within its container until it reaches a specified point (defined by the top, right, bottom, or left properties), at which point it becomes "stuck" and remains fixed at that position as the user scrolls.

     • Sticky positioning is often used for headers or navigation bars to keep them visible at the top of the viewport as the user scrolls down the page.

• FLOAT

float: left;
float: right;
float: none;

1. float: left;

   • When an element is floated to the left, it moves to the leftmost edge of its containing element and content flows around it on the right side.

   • Other block-level elements will wrap around the floated element's right side.

2. float: right;

   • When an element is floated to the right, it moves to the rightmost edge of its containing element, and content flows around it on the left side.

   • Other block-level elements will wrap around the floated element's left side.

3. float: none;

   • This is the default value. Elements with float: none; do not float. They remain in the normal flow of the document, and other elements are not affected by them.

• CLEAR

    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;
  

clear Property:

• Syntax: clear: none | left | right | both | inline-start | inline-end;

• Values:

  1. none: The element is not moved below any floated elements. This is the default value.

  2. left: The element is moved below preceding floated elements that are floated to the left.

  3. right: The element is moved below preceding floated elements that are floated to the right.

  4. both: The element is moved below both left and right floated elements.

  5. inline-start: The element is moved below preceding floated elements, based on the inline direction of the document (e.g., left for LTR languages, right for RTL languages).

  6. inline-end: The element is moved below preceding floated elements, opposite to the inline direction of the document.