The alt attribute in images provides alternative text for an image if it cannot be displayed. It is also used by screen readers to describe images for visually impaired users, improving accessibility.

Example:

The flexbox layout is a CSS module that provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown and/or dynamic. The main components are:

• display: flex; : Defines a flex container and enables a flex context for all its direct children.
• flex-direction: Defines the direction of the flex items.
• justify-content: Aligns flex items along the main axis.
• align-items: Aligns flex items along the cross axis.
• flex-wrap: Specifies whether the flex items should wrap or not.

Example:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Padding: The space between the content of the element and its border. It affects the element's internal space.

Margin: The space outside the border of the element. It affects the element's external space, creating space between elements.

A table in HTML is created using the

tag along with for table rows, for table headers, and for table data cells.

Example:

  

    
Header 1
    
Header 2
  
  

    
Data 1
    
Data 2
  

position: relative; : The element is positioned relative to its normal position. Offsets (top, right, bottom, left) will move it from its normal position without affecting the layout of other elements.

position: absolute; : The element is positioned relative to its nearest positioned ancestor (not static). If no such ancestor exists, it uses the document body, and it will be placed in relation to the initial containing block. Absolute positioning removes the element from the normal document flow.

Example:

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

.absolute-element {
  position: absolute;
  top: 50px;
  left: 100px;
}

• External CSS: Styles are defined in an external stylesheet file with a .css extension, linked to the HTML document using the tag.
• Internal CSS: Styles are defined within the
• Inline CSS: Styles are applied directly to HTML elements using the style attribute.

This is a red paragraph.

Media queries are used in CSS to apply different styles based on the characteristics of the device, such as its width, height, orientation, and resolution. They are essential for creating responsive web designs that adapt to various screen sizes.

Example:

/* Default styles */
body {
  background-color: white;
}

/* Styles for screens wider than 600px */
@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

The z-index property in CSS controls the stacking order of elements that overlap. Higher values are placed on top of lower values. It only works on positioned elements ( position: relative , absolute , fixed , or sticky ).

Example:

.div1 {
  position: absolute;
  z-index: 1;
}

.div2 {
  position: absolute;
  z-index: 2;
}

CSS specificity determines which CSS rule is applied by the browser when multiple rules target the same element. It is calculated based on the selectors used:

• Inline styles have the highest specificity (e.g., style="color: red;" ).
• ID selectors ( #id ) have higher specificity than class selectors ( .class ), attribute selectors ( [attribute] ), and pseudo-classes ( :hover ).
• Element selectors (e.g., div , p ) and pseudo-elements ( ::before , ::after ) have the lowest specificity.

Example Calculation:

/* Specificity: 0-1-0-0 (one ID selector) */
#header { color: blue; }

/* Specificity: 0-0-1-0 (one class selector) */
.header { color: green; }

/* Specificity: 0-0-0-1 (one element selector) */
header { color: red; }

CSS preprocessors are scripting languages that extend CSS by allowing variables, nested rules, mixins, functions, and more. They help to make CSS more maintainable, reusable, and easier to write. Popular preprocessors include Sass, LESS, and Stylus.

Example using Sass:

$primary-color: blue;

body {
  color: $primary-color;
}

.navbar {
  background-color: $primary-color;
}

The DOCTYPE declaration is used to specify the HTML version and type for the browser. It helps the browser to render the document correctly. The declaration should be the very first thing in an HTML document, before the tag.

Example:

CSS Grid Layout is a two-dimensional layout system for the web. It allows developers to create complex, responsive web layouts more easily. It uses rows and columns to define the structure of the layout.

Basic Example:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
}

.item {
  background-color: lightblue;
}

visibility: hidden; Hides the element, but it still takes up space in the layout.

display: none; Removes the element from the document flow entirely, so it does not take up any space.

Example:

.hidden-element {
  visibility: hidden;
}

.none-element {
  display: none;
}

Pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They are used to define the styles for special states of elements.

Examples:

a:hover {
  color: red;
}

input:focus {
  border-color: blue;
}

li:nth-child(2) {
  background-color: yellow;
}

em: A relative unit that is based on the font size of the element it is used on. If no font size is set on the element, it will inherit the font size from its parent.

/* If the parent element has a font size of 16px */
.child {
  font-size: 2em; /* 32px */
}

rem: A relative unit that is based on the root element's ( html ) font size. It is not affected by the parent element's font size.

/* If the root element has a font size of 16px */
.child {
  font-size: 2rem; /* 32px */
}