COMPLETE CSS BY ANSARI ANDUL BASIT!
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 In line style tag External style sheet The following are the properties of css 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. 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. 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) 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. @media (width : 600px) { div { background-color : red; } } @media (min-width : 600px) { div { background-color : red; } } @media (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 @keyframe 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% { f
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
- In line
- style tag
External style sheet
The following are the properties of cssColor 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.
- 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.
- 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)
- 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.
@media (width : 600px) {
div {
background-color : red;
}
}@media (min-width : 600px) {
div {
background-color : red;
}
}@media (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 @keyframe 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; }
}
