Web Dev course part two:
CSS Part two
-Css units
-Position property
-Grid and Flexbox
-Text Specifications
-Z-index
-Opacity
-Overflow
1-CSS units:
CSS uses various units to define length values. Common units include pixels (`px`), percentages (%), em,
and rem.
-Pixels provide a fixed measurement,.
-Percentages are relative to the parent element,
-em is relative to the font-size of the parent element.
-rem is relative to the font-size of the root element.
2-Text specs:
Text specifications in CSS include properties like
font-family, font-size, font-weight, and line-height. These
properties allow you to style the text content on your
webpage, specifying the font, size, weight, and spacing.
3-Position property:
The position property in CSS determines how an element is positioned on a
webpage. It can be set to values like relative, absolute,fixed, or static.
- Relative positioning is relative to the normal flow,
-absolute positioning is relative to the nearest positioned ancestor.
-fixed is relative to the viewport.
-static is the default, following the normal flow.
4-z-index:
The z-index property in CSS controls the stacking order of
elements. It is particularly useful when elements overlap,
determining which one appears on top. Elements with a
higher `z-index` value will be placed on top of elements with
lower values.
5-Opacity:
The opacity property adjusts the transparency of
an element. A value of 1 is fully opaque, and 0 is fully
transparent. It's often used for creating subtle visual
effects or overlays.
6-Overflow:
The overflow property controls what happens when content
overflows its containing element. Values can be visible (default),
hidden, scroll, or auto, determining whether the content is
displayed, clipped, or if a scrollbar is provided.
7-Grid :
CSS Grid is a powerful layout system that allows developers to create complex, two-dimensional layouts with ease.
Here are some key specifications and properties associated with CSS Grid:
display: grid;:
To enable grid layout, you use the display: grid; property on the container element. This sets up a grid context for the child
elements.
grid-template-rows and grid-template-columns:
These properties define the size of rows and columns in the grid, allowing you to set fixed sizes, percentages, or use the fr unit
for flexible sizing.
grid-gap:
Specifies the size of the gap between rows and columns in the grid.
8-Flex-Box:
Flexbox, or the Flexible Box Layout, is a one-dimensional layout model in CSS that allows you to design complex layouts more efficiently. It's
particularly well-suited for distributing space along a single axis—either horizontally or vertically.
Here are key specifications and properties associated with CSS Flexbox:
display: flex;:
To enable flexbox layout, you use the display: flex; property on the container element. This makes the container a flex container.
flex-direction:
Specifies the direction of the main axis. It can be row (default), row-reverse, column, or column-reverse.
justify-content:
Aligns flex items along the main axis. It controls the distribution of space between and around content items.
align-items and align-self:
align-items aligns flex items along the cross axis.
align-self allows the individual flex items to override the alignment set by align-items
align-items
