Today i have learned to build a resume using HTML and CSS by uses of properties like Class selector, Basics of grid and flex concepts.
Class Selector:
In CSS, a Class Selector is used to target and style multiple HTML elements that share a specific class Attribute.
Unlike id Selectors class Selectors can be applied to any number of elements on a page.
An element can have multiple classes separated by spaces, allowing you to combine different styles.
The element Selector selects HTML elements based on the element name.
What is Grid?
In CSS Grid is a powerful two-dimensional layout system that allows you to arrange content in both rows and columns simultaneously.
it provide more flexible way to build complex responsive web design compared to older methods like floats or positioning.
Grid Container:
The parent element where you apply display: grid;. this create the grid context for all its direct children.The direct children of grid container that automatically become part of the grid layout.
Essential properties of Grid
grid-template-columns/grid-template-rows: Defines the number and size of your columns and rows.
gap: Sets the spacing between rows and columns.
fr unit: A special Fractional unit is used in CSS grid to distribute the available space within the container.
What is Flex?
In CSS Flex is a one dimensional layout model used to arrange the elements in rows or columns.
It allows items to flex by growing to fill available space or shrinking to prevent overflow, making it essential for building responsive Web Design.
Flex container: the parent element created by setting display: flex; or display: inline-flex;
Flex items: The direct children of a flex container.
Core properties of Flex Container
flex-direction: Sets the main Axis (eg: row, column, row-reverse).
justify-content: Aligns items along the main axis (eg: center, space-between).
align-items: Aligns items along the cross axis (eg: center, start).
Top comments (0)