CSS Introduction

CSS is the language we use to style a Web page.

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
CSS saves a lot of work. It can control the layout of multiple web pages all at
once
External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire
website by changing
just one file!

CSS Syntax
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are
surrounded by curly braces.

Example
--
In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
}
h1{
text-align: center;
}
div{
background-color:blue;
height:300px;
width:300px;
}

table{
background-color: blue;
height: 500px;
width: 500px;
border: 1px gold;
}
Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

Properties in Css.
Border
Border -- Width Style Color
Border-Width -- Any Size
Border-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Border-Color -- Any Color

Border-top -- Width Style Color

Border-top-Width -- Any Size
Border-top-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Border-top-Color -- Any Color

Border-bottom -- Width Style Color

Border-bottom-Width -- Any Size
Border-bottom-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Border-bottom-Color -- Any Color

Border-left -- Width Style Color

Border-left-Width -- Any Size
Border-left-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Border-left-Color -- Any Color

Border-right -- Width Style Color

Border-right-Width -- Any Size
Border-right-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Border-right-Color -- Any Color

Outline
Outline -- Width Style Color
Outline-Width -- Any Size
Outline-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Outline-Color -- Any Color
Outline-Offset -- Any Value

Padding
Padding -- Shorthand
Padding-top -- Any Value
Padding-right -- Any Value
Padding-bottom -- Any Value
Padding-left -- Any Value

4.Margin
Margin -- Shorthand
Margin-top -- Any Value
Margin-right -- Any Value
Margin-bottom -- Any Value
Margin-left -- Any Value

Width
Width -- Any Size
Min-Width -- Any Size
Max-Width -- Any Size

Height
 Height -- Any Size
Min-Height -- Any Size
Max-Height -- Any Size

Box-Sizing
Box-Sizing -- Border-Box,
Content-Box

Overflow
Overflow -- Any Value
Overflow-x -- Any Value
Overflow-y -- Any Value

Border-Radius
Border-radius -- Shorthand
Border-top-left-Radius -- Any Value
Border-top-right-Radius -- Any Value
Border-bottom-left-Radius -- Any Value
Border-bottom-right-Radius -- Any Value

Float
Float -- Left,Right

Clear
Clear -- Left,Right,Both

Font
Font-size -- Any Size
Font-family -- Any Value
Font-weight -- Normal,Bold
Font-style -- Oblique,Italic
Font-varient -- Small-caps
Line-Height -- Any Value

Text
Text-align -- Left,Right,Center,Justify
Text-align-last -- Left,Right,Center
Text-transform -- Uppercase,Lowercase,Capitalize
Text-indent -- Any Value
Word-spacing -- Any Value
Letter-spacing -- Any Value

Text-Decoration
Text-decoration -- Shorthand
Text-decoration-line -- Underline,Overline,Line-through,None
Text-decoration-color -- Any Value
Text-decoration-style -- Solid,Dotted,Dashed,Wavy
Text-decoration-thickness -- Any Value
Text-underline-offset -- Any value

Word-Wrap
Word-Wrap -- Normal,No-wrap; Break-word
Word-Break -- Break-All, Keep-All

Text-Shadow
Text-shadow -- Any Value
H-Shadow V-Shadow
Blur Color
Writing-Mode
Writing-Mode -- Horizontal-tb,Vertical-rl,Vertical-lr
Sideways-rl,Sideways-lr

Column
Coulumn-count -- Any Value
Column-gap -- Any Value
Column-width -- Any Value
Column-span -- All
Column-Rule -- Shorthand
Column-Rule-Width -- Any Value
Column-Rule-Style --
Solid,Dotted,Dashed,Double,Ridge,Groove,Inset,Outset,Mix,None
Column-Rule-Color -- Any Value

List-Style
List-Style -- Shorthand
List-Style-Image -- Any Value
List-Style-Position -- Inside,Outside
List-Style-Type -- With Ul - Circle,Square,Disc,none
-- With Ol - Upper-alpha,Lower-
alpha,Upper-roman,Lower-roman,
Decimal,None

Background
Background -- Shorthand
Background-color -- Any Value
(ColorNames,HexaDecimal,Rgb,Rgba,Hsl,Hsla)
Background-image -- Any Value (AnyImageName,Gradients)
-- Gradients(Linear-Gradients,Radial-
Gradients,Repeating-Linear-Gradients,
Repeating-Radial-Gradients)
Background-Repeat -- Repeat,No-Repeat,Repeat-x,Repeat-y,Space,Round
Background-Position -- Any Side
Background-Attachment -- Scroll,Fixed
Background-Size -- Auto,Any Size in Px,Any Size in
%,Cover,Contain
Background-origin -- Padding-box,Border-box,Content-box
Background-Clip -- Padding-box,Border-box,Content-box,Text
Background-Blend-Mode --
Normal,Multiply,Screen,Overlay,Darken,Lighten,Color-Dodge
Color-Burn,Hard-Light,Soft-
Light,Hue,Saturation,Luminosity

Opacity
Opacity -- Any Value (0 to 1)

Mix-Blend-Mode
Mix-Blend-Mode --
Normal,Multiply,Screen,Overlay,Darken,Lighten,Color-Dodge
Color-Burn,Hard-Light,Soft-
Light,Hue,Saturation,Luminosity

Display
Display -- None,Inline,Block,Inline-
Block,List-Item
Transform
Transform-2d -- Rotate,Translate,TranslateX,TranslateY

Scale,ScaleX,ScaleY,Skew,SkewX,SkewY
None

Transform-3d -- RotateX,RotateY,RotateZ
TranslateZ,Translate3d
ScaleZ,Scale3d
none

Transform-origin -- Any Side or XY Sides

Animation
Animation -- Name Duration Timing Delay Count
Direction
Animation-name -- Any Name
Animation-duration -- Any Time in Seconds
Animation-delay -- Any Time in Seconds
Animation-iteration-count -- Any Value or Infinite
Animation-direction -- None,Alternate,Reverse,Alternate-Reverse
Animation-play-state -- Running,Paused
Animation-fill-mode -- Backwards,Forwards
Animation-timing-function -- ease,linear,ease-in,ease-out,ease-in-out
step-start,step-end,steps(),cubic-
bezier()

User-select
User-select -- None,Auto,all,text

Box-decoration-break
Box-decoration-break -- Clone,Slice

Quotes
Quotes -- ' Any Value ' ' Child Any Value '

Counter
Content -- Any name in Counter (Function)
Counter-reset -- Any starting number
Counter-increment -- Any increment times

Caret-color
Caret-color -- Typing Cursor color

Scroll
Scroll-behavior -- Smooth,Auto

Visibility
Visibility -- Visible,Hidden,Collapse

Position
Position -- Absolute,Relative,Sticky,Fixed

Z-index
Z-index -- Any Value

Table
Border-spacing -- Any value
Border-collapse -- Seperate,Collapse
 Vertical-align -- Top,Middle,Bottom
Caption-side -- Top,Bottom
Empty-cells -- Hide,Show
Table-Layout -- Auto,Fixed

Resize
Resize -- Horizontal,Vertical,Both,None

Cursor
Cursor -- Auto,Default,None,Context-
menu,help,pointer,progress,wait,cell,
Crosshair,text,vertical-
text,alias,copy,move,no-drop,not-allowed,
e-resize,n-resize,ne-resize,nw-
resize,s-resize,se-resize,sw-resize,
w-resize,ew-resize,ns-resize,nesw-
resize,nwse-resize,col-resize,
row-resize,all-scroll,zoom-in,zoom-
out,grab,grabbing
Clip-path
Clip-path -- Circle,Ellipse,Inset,Polygon
Shape-outside -- Circle,Ellipse,Inset,Polygon
Shape-margin -- Any Value

Filter
Filter --
None,Blur(Px),Brightness(%),Contrast(%)
Drop-shadow(box-
shadow),grayscale(%)
hue-
rotate(deg),invert(%),opacity(%)
saturate(%),sepia(%)

Transition
Transition -- Shorthand
Transition-property -- Any Values
Transition-duration -- Any Time in Seconds
Transition-delay -- Any Time in Seconds
Transition-timing-function -- ease,linear,ease-in,ease-out,ease-in-out
step-start,step-end,steps(),cubic-
bezier()

@Media Queries in Css.

1.Screen
2.Print

Units in Css.
1.Px (Pixels)
2.% (Percentage)
3.Em
4.Rem
5.Vw (Viewport width)
6.Vh (Viewport height)

Selectors in Css.
Simple Selectors.
1.Type - tags name
2.Class - .class
3.Id - #id
 4.Universal - *

Combinators Selectors.
1.Descendant selectors - parent child{} - means children+grandchildren
2.Direct Child selectors- parent>child{} - means children not
granchildren
3.Adjacent Sibling selector - sibling+sibling{} - means first sibling
4.General Sibling selector - sibling~sibling{} - means all direct
siblings

Attribute Selectors.
1.Tag[attr] - Any Attribute
2.Tag[attr='val'] - Attribute with value
3.Tag[attr^='val'] - Attribute with value but starting word
4.Tag[attr|='val'] - Attribute with value but word with dash
5.Tag[attr$='val'] - Attribute with value but ending word
6.Tag[attr*='val'] - Attribute with value any word
7.Tag[attr~='val'] - Attribut with value but word with space

Pseudo Classes : & Pseudo Elements :: .

Pseudo Classes :
1.First-child
2.Last-child
3.first-of-type
4.last-of-type
5.nth-child()
6.nth-of-type()
7.nth-last-child()
8.nth-last-of-type()
9.only-child
10.only-of-type
11.empty
12.not()
13.lang()
14.hover
15.visited
16.active
18.focus
19.checked
20.disabled
21.enabled
22.required
23.optional
26.read-only
27.read-write
28.valid
29.invalid

Pseudo Elements ::
1.after
2.before
3.first-letter
4.first-line
5.selection
6.placeholder
7.marker
Functions in Css.
1.var()
2.calc()
3.cubic-bezier()
4.hsl()
5.hsla()
6.rgb()
7.rgba()
8.counter()
9.linear-gradient()
10.radial-gradient()
11.repeating-linear-gradient()
12.repeating-radial-gradient()