CSS Course Hindi - Beginner to Pro ( 2023 ) | Chapter 7

Notes

CSS Variables

CSS variables, also known as custom properties, are values that can be stored and reused throughout a stylesheet. They are similar to variables in programming languages, in that they allow you to store a value that can be used in multiple places in your code.
To create a CSS variable, you use the -- prefix followed by the name you want to give the variable. The value of the variable is set using the : character. Here's an example:
 

:root {
  --main-color: yellow;
  
}
This creates a variable called --main-color with a value of red. To use the variable, you can reference it using the var() function. For example:

h1 {
  color: var(--main-color);
}
This will set the color of all h1 elements to red, because that is the value of the --main-color variable.
CSS variables are useful because they allow you to store values that you might want to reuse throughout your stylesheet, and to change the values of those variables in a single place rather than having to search for and update them in multiple places in your code.
 

CSS Units

There are several units of measure that can be used in CSS, including absolute units and relative units.
Absolute units are fixed and do not depend on the size of the viewport or the size of any other element. The absolute units in CSS are:
  • px: Pixels are used for fixed-size items, such as the width of a border or the size of an icon.
  • in: Inches are used for physical measurements, such as the size of a page or the size of a screen.
  • cm: Centimeters are used for physical measurements.
  • mm: Millimeters are used for physical measurements.
  • pt: Points are used for print media and are equal to 1/72 of an inch.
  • pc: Picas are used for print media and are equal to 1/6 of an inch.
Relative units are relative to some other value, such as the size of the viewport or the size of a parent element. The relative units in CSS are:
  • %: Percentages are used to specify sizes relative to the size of the parent element. For example, if an element has a width of 50%, it will be half the width of its parent element.
  • em: Ems are used to specify sizes relative to the font size of the element itself. For example, if an element has a font size of 16px and a line height of 2em, the line height will be 32px (2 * 16px).
  • rem: Rems are used to specify sizes relative to the font size of the root element (html). This allows you to set a base font size on the root element and then use rems to specify sizes that are relative to that base size.
  • vw: Viewport width units are used to specify sizes as a percentage of the width of the viewport. For example, if an element has a width of 50vw, it will be half the width of the viewport.
  • vh: Viewport height units are used to specify sizes as a percentage of the height of the viewport.
  • vmin: Viewport minimum units are used to specify sizes as a percentage of the smaller of the viewport's width and height.
  • vmax: Viewport maximum units are used to specify sizes as a percentage of the larger of the viewport's width and height.
  • ch : The "ch" unit in CSS stands for "character". It is used to specify sizes in terms of the width of the 0 character (0) in the element's font
 
REM VS EM
em and rem are both units of measure in CSS that are used to specify sizes relative to the font size of an element. The main difference between the two is that em is relative to the font size of the element itself, while rem is relative to the font size of the root element (html).
Here's an example to illustrate the difference:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px (1.5 * 20px) */
  margin: 1rem; /* 16px (1 * 16px) */
}
In this example, the .child element has a font size of 1.5 times the font size of its parent element, so it will be 30px. The .child element also has a margin of 1rem, which is equal to the font size of the root element (16px).
One advantage of using rem units is that they allow you to set a base font size on the root element and then use rem units to specify sizes that are relative to that base size. This can make it easier to scale your design, because you only need to update the base font size to change the size of all the elements that use rem units.
 

::after & ::before

The ::before and ::after pseudo-elements in CSS allow you to insert content before or after an element. They are commonly used to add decorative content, such as icons or background images, to an element.
Here's an example of how to use the ::before pseudo-element to add an icon to the beginning of a list item:

li::before {
  content: url(icon.png);
  display: inline-block;
  margin-right: 0.5em;
}
This will insert the icon.png image before each li element, and add a margin to the right of the image to create some space between the icon and the text.
The ::after pseudo-element works in the same way, but it inserts content after the element instead of before. Here's an example of how to use the ::after pseudo-element to add a background image to the end of a paragraph:

p::after {
  content: "";
  background-image: url(image.jpg);
  display: block;
  width: 100%;
  height: 100%;
}
This will insert the image.jpg image after each p element, stretching it to fill the entire width and height of the element.
It's worth noting that the ::before and ::after pseudo-elements are generated content, which means that they are not actually part of the DOM. They are simply used to add visual content to an element using CSS.
 

Media queries

Media queries are a feature of CSS that allow you to apply styles based on the characteristics of a device, such as its screen size, orientation, or resolution. They are commonly used to create responsive designs that adapt to the dimensions of the viewport and make it easier to read and navigate on different devices.
Here's an example of a basic media query that applies a different stylesheet for devices with a screen width of less than 500 pixels:

@media screen and (max-width: 500px) {
  /* Styles go here */
}
To use a media query, you start with the @media keyword, followed by the media type (e.g., screen, print, speech) and a media feature that defines the characteristics of the device you want to target. In the example above, the media feature is (max-width: 500px), which means that the styles will apply to devices with a screen width of 500 pixels or less.
You can use a variety of media features to target different characteristics of a device, such as its width, height, orientation, resolution, and more. For example:

@media screen and (min-width: 500px) and (max-width: 1000px) {
  /* Styles go here */
}
This media query will apply styles to devices with a screen width between 500 and 1000 pixels.