COMPLETE CSS BY ANSARI ANDUL BASIT!

[Lomanu4]

Hello everyone my self Ansari Abdul Basit.
Recently I am complete my css part and in this post I will share you everything which I learn about css.
So let's start.....
So CSS is stand for (Cascading Style Sheet)
It is a language that is used to describe the style of a document.
So the first thing is we have to learn is basic syntax
H1{
Color:red
}
So in this H1 is selector,color is property and red value.
So write the css part there are 3 type

1. In line
2. style tag
3. 
   External style sheet
   The following are the properties of css
   
   
4. 
   Color property:
   Used to set the color of the foreground color
   2.Background color property:
   Used to set the color of background.
   

There are color system:
RGB stand for the [red,green,blue]
RGB value is from 0-255

Then next is selector:
1.Universal selector:
*{}
2.Element selector:
H1 {}
3.Id selector:
#my Id {}
4.Class selector:
.my class{}
The another property is TEXT PROPERTY
There are 4 text Property's
1.Text align
2.Text decoration
3.Font-weight
4.Font-Family

So there are two units type in css
1.Absolute (pixel)
2.Relative (%,em,rem)
So pixel is Absolute unit in Css
The another property is Text-property.
The another property is Text-transform property.
(Uppercase,lowercase,Capitalise,none)

The another part is Box model in CSS:
There are 5 properties which is important in Box Model.
•Height
•Width
•Border
•padding
•Margin

The another property is Display Property:
Display: inline/block/inline-block/none.

•inline: Take only the space required by the elements
•block: Takes full space available in width
•inline-block: similar to inline but we can set margin and padding
None: to remove elements from document flow.

-Units in CSS:(relative)
1.percentage (%):
It is often used to define a size as relative to an element parent Object.

1. EM: Font size of the parent,in the case type graph property's like font-size and font size of properties like width.

3.Rem:
Font size of ghr root element

-Positions:
The position CSS property sets how ab element is positioned In a document.
Positions are: static/relative/Absolute/fixed
1.Static: default position

2.Relative: element is relative to itself.

3.absolute: positioned relative to its closest positioned ancestor.

4.fixed: positioned relative to browser

5.sticky: positioned based on user's scroll postion.

z-index:


It decides the stack level of element with a larger z-index cover those with a smaller one
background- image:


Used to set an image as a background.
background size:


Cover/contain/auto.

The another Topic is Flex box
-Flex box layout:
It is one-dimensional layout method for arranging items in rows or columns.

-Flex Direction:
It sets how flex items are placed in the flex container along which axis and direction
Row/row-revers/column/colum-revers.

Flex properties


(For flex containers)

1.justify-cintent: alignment along the main axis.
Flex-start/flex-end/center/space-evenly.

2.Flex-wrape:nowrap/wrap/wrap-revers.

1. Align-items: alignment along the cross axis.

4.align-content: alignment of space between and around the content along cross-axis.

Flex properties:


(For flex item)

1. Align-self: alignment of individual along the cross axix.

2.flex-grow:how much a flex item will grow relative to the rest of the flex item if space is available.

3.flex shrink:how much a flex item will shrink relative to the rest of the flex item if space is available.

Media Queries:


Help create a responsive website.

There are 3 possibility of writing Media Queries.

1. 
   
   
   

   Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

   
   
   (width : 600px) {
   
   div {
   
   background-color : red;
   }
   
   }
   
   
2. 
   
   
   

   Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

   
   
   (min-width : 600px) {
   div {
   
   background-color : red;
   
   }
   }
   
   
3. 
   
   
   

   Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

   
   
   (min-width : 200px)
   and (min-width : 300px){
   
   div { background-color : red;
   }
   }
   

Transitions:


Transitions enable you to define the transition between two states of an element.

1•transition-property : property you want to transition (font-size, width etc.)

2•transition-duration : 2s / 4ms..

3•transition-timing-function : ease-in / ease-out / linear / steps ..

4•transition-delay: 2s / 4ms..

CSS Transform:


CSS Transform Used to apply 2D & 3D transformations to an element.

•rotate
transform: rotate(45deg);

CSS Transform:
•scale
transform: scale(2); transform: scale(0.5); transform:scale(1,2);

transform: scaleX(0.5); transform: scaleY(0.5);

CSS Transform:
•translate
transform: translate(20px); transform: translate(20px, 50px);

transform: translateX(20px);
transform: translateY(20px);

CSS Transform:
•skew
transform: skew (30deg);

Animation:


To animate CSS elements

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

myName{
from { font-size : 20px; }
to { font-size : 40px; }
}

#Animation Properties:
•animation-name animation-•duration animation-timing-•function animation-delay •animation-iteration-count •animation-direction

% in Animation:


@keyframe myName {

0% { font-size : 20px; }
50% { font-size : 30px; }
100% { font-size : 40px; }
}

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.