CSS

17 September 2024 12:05

Em : parent k font se data

Rem: parent se data leta ha

CSS Page 1
Car class is dependent on pet/De engine ?
Petrol

Diesel

start

CSS Page 2
Fonts Family :

How to use external fonts:

1. Goto google fonts

2. Download any front
3. Unzip and goto static folder and install

CSS Page 3
Properties with fonts:

font-family: Gowun Batang;

font-weight: 600;
text-transform: capitalize/uppercase;
text-decoration: line-through;
font-size: 20px/1vw;

Line-height
-----------
Using this tag each line will follow this unit

Text-align
----------
Used to align text on screen
Note : text-align always start from left side by default

Padding ,margin and border

---------------------------

CSS Page 4
 padding

margin

Display: it is very easy if you understand how it works

sets whether an element is treated as a block or inline box and the layout used for its children

What is block : in html each tag have their nature like inline or block just like div and span

Eg: if you h1 and again h1 both will come one by one it's called block nature
h1

h2

CSS Page 5
 By default nature

Note: If an element is a block-level element, it takes up the entire width of the row, and no other elements can appear beside it—just like a lion in the
jungle, ruling over its space alone (similar to how only one block-level element fits in a row).

but when we make block and inline-block the it will allow other elements can appear beside it

Inline elements allow other elements can appear beside it if these is space
on the other hand, are like monkeys—they're flexible and allow other elements to sit beside them in the same line, leaving space around them.

If you make any element inline then you cannot change it's width and height

Inline: this is will make block and inline-block

Position:

CSS Page 6
position: relative

Note: If we make parent position relative then child will take property from parent not screen

CSS Page 7
Genie
Genie Ashwani
Ashwani

inline

CSS Page 8
CSS Page 9
Flex : when we want element side by side them flex is better choice as compare to inline, because we have more
control over element

Note : flex property will apply on parent not on child's

When you apply Flexbox, two axes get activated automatically: the main axis and the cross axis. These axes control how
the flex items are laid out inside the flex container

1. Main Axis
The main axis is the primary direction in which the flex items are laid out. By default, when you apply display: flex, the
main axis runs horizontally from left to right (because flex-direction: row is the default).

If you set flex-direction: row, the main axis is horizontal.

If you set flex-direction: column, the main axis becomes vertical.

2. Cross Axis
The cross axis is always perpendicular to the main axis. If the main axis is horizontal (in a row layout), the cross axis is
vertical. If the main axis is vertical (in a column layout), the cross axis is horizontal.

In flex-direction: row, the cross axis runs vertically (top to bottom).

In flex-direction: column, the cross axis runs horizontally (left to right).

Main Axis: Controls the flow of items (horizontally or vertically, depending on flex-direction).
Cross Axis: Handles the alignment of items perpendicular to the main axis (vertically if in a row, horizontally if in a
column).

Why Are Two Axes Needed?

These two axes are essential because Flexbox is designed to give you control over both the direction and alignment of
items inside a container

CSS Page 10
items inside a container

Steps to apply flex

1. First, we need to make that container flexible display: flex;

2. Choosing the Direction of Flex Items

.container {
display: flex;
flex-direction: row;
}

3. Spacing Items Out

.container {
display: flex;
justify-content: center; //work with main axis
}

4. Aligning Items Vertically

.container {
display: flex;
align-items: center; ////work with cross axis
}

1. Handling Wrapping : If you have too many items to fit in a row, you might want them to wrap onto a new line rather
than squish together.

.container {
display: flex;
flex-wrap: wrap; /* Now the items will wrap to a new line if needed */
}

Individual Item Control

.item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
}

Flex Container Properties

1. display: flex;: Defines the container as a flex container.
2. flex-direction: Defines the direction of the flex items.
○ row (default): Items align horizontally.
○ row-reverse: Items align horizontally, but in reverse order.
○ column: Items align vertically.
○ column-reverse: Items align vertically in reverse order.
3. justify-content: Aligns items along the main axis (horizontal in row direction).
○ flex-start: Aligns items to the start of the container.
○ flex-end: Aligns items to the end of the container.
○ center: Aligns items in the center.
○ space-between: Evenly distributes items with space between them.

CSS Page 11
 ○ flex-start: Aligns items to the start of the container.
○ flex-end: Aligns items to the end of the container.
○ center: Aligns items in the center.
○ space-between: Evenly distributes items with space between them.
○ space-around: Items have space around them, including outside edges.
4. align-items: Aligns items along the cross axis (vertical in row direction).
○ stretch (default): Items stretch to fill the container.
○ flex-start: Aligns items to the start of the cross axis.
○ flex-end: Aligns items to the end of the cross axis.
○ center: Centers items along the cross axis.
○ baseline: Aligns items along their text baselines.
5. align-content: Controls the alignment of items when there is extra space in a multi-line flex container (when flex-wrap is used).
○ Works similarly to justify-content but for the cross axis.
6. flex-wrap: Determines whether items should wrap onto multiple lines.
○ nowrap (default): All items are on one line.
○ wrap: Items wrap to the next line if they can’t all fit on one line.
○ wrap-reverse: Items wrap in reverse order.
7. gap: Specifies the space between flex items. Previously handled by margins, gap makes it easier to add spacing between rows and
columns.

Flex Item Properties

1. order: Controls the order of flex items. Items are displayed in ascending order of order values.
2. flex-grow: Defines how much space an item should take relative to others. A value of 1 makes an item grow to fill remaining space.
3. flex-shrink: Defines how much an item should shrink if there’s not enough space. A value of 0 prevents shrinking.
4. flex-basis: Sets the default size of an item before the remaining space is distributed. Can be set in pixels, percentages, etc.
5. align-self: Allows individual items to override the align-items property and align themselves differently along the cross axis.

Pseudo-elements and Pseudo-classes Overview

In CSS, both pseudo-elements and pseudo-classes are used to style specific parts or states of elements,
but they do this in different ways:

• Pseudo-classes: These apply styles to an element based on its state or condition, such as when an element is hovered over, focused, or
even its position relative to siblings.
• Pseudo-elements: These allow you to style specific parts of an element, like the first letter, first line, or even inserting new content
before or after the element’s content.

Common Pseudo-classes:
button:hover {
background-color: lightblue;
}

input:focus {
border-color: green;
}
li:nth-child(2) {
color: red;
}
p:first-child {
font-weight: bold;
}
a:active {
color: red;
}

Common Pseudo-elements:
h1::before {
content: ' ';
color: orange;
}
h1::after {
content: ' ';
}
p::first-line{
font-size: 2em;
color: red;
}
::selection {

CSS Page 12
::selection {
background-color: yellow;
color: black;
}

Display: grid

headers

sidebar content

footer

1D

3*3 = 2D

CSS Page 13
CSS Page 14
CSS Page 15