HTML-CSS CONCEPTS

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.

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

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.

  ---

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.

  ---

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.

  ---

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

  ---

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.

    ---

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

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

  ---

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.

  ---

REFERENCES

• MDN Web Docs
• CSS Documentation
• CSS Tutorial - GeeksforGeeks
• YouTube Lectures By Code With Harry