Introduction to CSS:

********************

CSS ( Casecading style sheet ) is used to style and layout wed pages- control
color, font, spacing, alignment etc.

Example:

<p style="color:blue;"> What is this color </p>

___________________________________________________________________________________
____________________

Types of CSS:
************

1). Inline CSS

<p style="color:blue;"> What is this color </p>

2). internal CSS:

<style>
p{

colot:blue;

}
</style>

3). External CSS:

<link rel="stylesheet" href="style.css">

Syntax:
**********

selector{
property:value;
}

Example:

p{
background = blue;
}
___________________________________________________________________________________
___________________________________

Colors in CSS:
**************

*). Name:Blue

*). hex: #ff0000

*). RGB: rgb(255,0,0)

*). RGBA: rgba(255,0,0,0.5)

*). HSL: hsl(3degree,100%,50%)

*).linear-gradient(two and more color apply) => (to right or left or tob and top
right or top left , two and more colors)

example:
linear-gradient(to right,aqua,yellow,green)
linear-gradient(350deg,aqua,yellow,green)

Text Properties:
****************
1). color:

p {
color: red;
}
------------------------------------------------------------------
2). text-align:

*). left

*). right

*). center

*). justify (adjust text to both sides)

Example:

h1 {
text-align: center;
}

------------------------------------------------------------------
3). text-decoration

none — no decoration

underline — line below text

overline — line above text

line-through — cut the text

Example:

a {
text-decoration: none;
}
------------------------------------------------------------------
4). text-transform

*). none

*). capitalize (first letter capital)

*). uppercase (all capital)

*). lowercase (all small)

Example:

p {
text-transform: uppercase;
}
------------------------------------------------------------------
5). letter-spacing:

Example:

h1 {
letter-spacing: 3px;
}
------------------------------------------------------------------
6). word-spacing:

Example:

p {
word-spacing: 5px;
}
------------------------------------------------------------------

7). line-height:

Example:

p {
line-height: 1.5;
}
------------------------------------------------------------------
8). direction:

*). ltr --> left to right

*). rtl --> right to left

Example:

p {
direction: rtl;
}
------------------------------------------------------------------

9). text-indent(gap):

Example:

p {
text-indent: 50px;
}
------------------------------------------------------------------

10). font-family:

Example:
body {
font-family: Arial, sans-serif;
}
------------------------------------------------------------------

11). font-size:

Example:

h1 {
font-size: 30px;
}

12). Text Shadow:

h1 {
text-shadow: 2px 2px 5px grey;
}
-----------------------------------------------------------------------------------
---------------------------
Units:
What is units: Units means measurement
type to set size,space, margin, padding,font-size,
width, height in CSS

Types of UNITS:

1). Absolute Units:

--------------------
fixed element, No change element size

*). Px (pixel)
*). cm (centimeter)
*). mm (millimeter)

Example: h1{
font-size:20px;
}
*). font size is always 20 pixel.

2). Relative Units:

*). % --> percentage of parent element

*). em --> based on parent element's font size
*). rem --> based on root (html) font size
*). vh --> 1% of the viewport's height
*). vw --> 1% of the viewport's width
------------------------------------------------------------------
12). font-style:

Values:

*). normal

*). italic

*). oblique
Example:

p {
font-style: italic;
}
------------------------------------------------------------------

13). font-weight:

*). Values:

*). normal

*). bold

*). lighter

*). bolder

*). or numeric values (100 to 900)

Example:

h1 {
font-weight: bold;
}

p {
font-weight: 700; /* numeric value*/
}
-------------------------------------------------------------------
14). text-shadow:

Example:

h1 {
text-shadow: 2px 2px 5px gray;
}
-------------------------------------------------------------------
___________________________________________________________________________________
____________________________
Pseudo-classes:
***************

What is Pseudo-class:

*). Pseudo-class is a special keyword in CSS.

*). It is used to style an element when it is in a special state.

*). Example: when mouse over a button, or when a link is visited.

Why Use Pseudo-class:

*). To add style on hover, click, focus, active

*). To style first/last child in a list
*). To style visited/unvisited links
*). To style an element when it’s in a certain position
Commonly Used Pseudo-classes:
-------------------------------
1). :hover --> When mouse goes over the element.

Example:

button:hover
{
background-color: green;
}

Use:

Change color when mouse over.

2). :active --> When element is clicked and held.

Example:

button:active {
background-color: red;
}

Use:

Style button while pressing.

3). :focus --> When element is selected or focused.

Example:

input:focus {
border: 2px solid blue;
}

Use:

Highlight input box when user types.

*). p[class]{
color: blue;
}

4). :first-child --> Selects first element inside a parent.

Example:

p:first-child
{
color: red;
}

Use:
Style first paragraph alone.

5). :last-child --> Selects last element inside a parent.

Example:

li:last-child {
color: green;
}

6). :nth-child(n) --> Selects specific position element.

Example:

li:nth-child(2) {
color: blue;
}
Use:
Style second item in list.

7). :visited --> For links already clicked/visited.

Example:

a:visited {
color: purple;
}
Use:
Style visited links differently.

___________________________________________________________________________________
___________________________________________

CSS selector:
*************

A CSS selector is a pattern that tells the browser which HTML elements you want to
style.

Example:

h1{
backgroundcolor:yellow
}

1). Universal selector : * {}

*{
margin : 0;
padding : 0;
}
why use:

To apply a common style to everything in the page.

---------------------------------------------------
2). Element selector: P {}

selects specific HTML tags.

Example:

P {
font-family:italic
}

Why use:

To style all <p> tags in the page

--------------------------------------------------
3). ID selector: #idname {}

Selects an element with a specific ID attributes.

Example:

#head{
font-size:20px;
}

Why use:

to style a unique , single element.

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

4). class selector: . classname {}

Selects elements with a specific class attribute.

Example:

.box {
background-color: yellow;
}

Why use:

When you want to style multiple elements with the same

class.
---------------------------------------------------------

5). Group selector: h1,p,div {}

Selects multiple selectors and applies the same style.

Example:

h1, h2, p {
 color: green;
}

Why use:

When you want to apply the same style to many tags at once.
---------------------------------------------------------------

6). Descendant selector: div p{}

Selects an element that is inside another element.

Example:

div p {
color: red;
}

Why use:

To style p tags only inside div tags.

7). Child selector: div > p{}

Selects an element that is a direct child of another element.

Example:

div > p {
color: blue;
}

Why use:

When you want to style only immediate child elements.

8). Adjacent sibling: h1 + p {}

Selects an element that is immediately next to another element.

Example:

h1 + p {
color: orange;
}

Why use:

To style a p tag right after an h1 tag.

________________________________________________________________________________

Box Model:
**********

Components:

*). Content --> Text/image inside

*). Padding --> Space around content

*). Border --> Line around the box

*). Margin --> Space outside the box

Example:
*******

div {

padding: 10px;
border: 2px solid black;
margin: 20px;

___________________________________________________________________________________
_____________

Position Property:
******************

*). Position property is used to control where an element appears on the page.

It decides how the element should be placed inside the web page.

1). static: This is the default position.

The element will be placed normally on the page.

Example:

div {
position: static;
}

Use:
When you don’t want to change position.

2). relative: The element will be placed relative to its normal position.

You can move it using top, bottom, left, right.

Example:

div {
position: relative;
top: 20px;
left: 30px;
}

Use:
When you want to move element little from its normal place.
3). absolute: The element will be placed relative to nearest positioned parent

(not static one).

If no parent, it will use the page (body).

Example:

div {
position: absolute;
top: 50px;
left: 100px;
}

Use:
When you want to place element anywhere inside a specific block.

4). fixed: The element is placed relative to the browser window.

It won’t move even when page is scrolled.

Example:

div {
position: fixed;
top: 0;
right: 0;
}

Use:
For sticky headers, footers, chat buttons etc.

5). sticky: The element will be relative at first.

When you scroll, it becomes fixed at a certain point.

Example:

div {
position: sticky;
top: 0;
}

Use:
For sticky menu bars or ads while scrolling.
______________________________________________________________________________

___________________________________________________________________

Background Properties:
**********************
Background properties are used to set the background style for an element —

like color, image, position, size, repeat, and attachment.

1). background-color: Sets the background color of an element.

Syntax:

div {
background-color: lightblue;
}

Why use:

To fill the background with a color.

2). background-image: Adds an image as the background.

Syntax:

div {
background-image: url("bg.jpg");
}

Why use:

To show a background image behind content.

3). background-repeat: Controls whether the background image repeats or not.

Values:

*). repeat (default)

*). no-repeat

*). repeat-x (horizontal only)

*). repeat-y (vertical only)

Example:

div {
background-image: url("pattern.png");
background-repeat: no-repeat;
}

Why use:

To decide how images should repeat.

4). background-position: Sets the starting position of the

background image.

Values:
left, right, top, bottom, center, x% y%, xpx ypx

Example:

div {
background-image: url("banner.png");
background-position: center top;
}

Why use:

To control image placement.

5). background-size: Adjusts the size of the background image.

Values:

*). auto (default)

*). cover (cover full div)

*). contain (fit inside without cropping)

*). width height (px, %, etc.)

Example:

div {
background-image: url("hero.jpg");
background-size: cover;
}

Why use:

To control image scaling.

6). background-attachment: Decides whether the background image scrolls with the
page or stays fixed.

Values:

*). scroll (default)

*). fixed

Example:

div {
 background-image: url("mountain.jpg");
background-attachment: fixed;
}

Why use:

For parallax-like effects.

7). Background:

Used to set all background properties in one line.

Syntax:

div {
background: url("pic.jpg") no-repeat center/cover;
}

Why use:

To write clean, short background style code.

______________________________________________________________________________

Border Properties:
*******************

Borders are lines drawn around the edges of an element.

Using CSS, you can control the size, color, style, and shape of those borders.

1). border: It’s a shorthand property to set border width, style, and color in one
line.

Syntax:

div {
border: 2px solid black;
}

Why use:

To quickly set a full border.

2). border-width:Sets the thickness of the border.

Syntax:

div {
border-width: 3px;
}
Why use:

To control how thick or thin the border is.

3). border-style: Decides the style of the border line.

*). Values:

*). solid

*). dotted

*). dashed

*). double

*). groove

*). ridge

*). inset

*). outset

*). none

Example:

div {
border-style: dashed;
}

Why use:

To change the border’s appearance.

4). border-color: Sets the color of the border.

Syntax:

div {
border-color: red;
}

Why use:

To make the border color match your design.

5). border-radius: Makes the corners rounded.

Syntax:

div {
border-radius: 10px;
}

Why use:
To make sharp corners look soft and rounded.
--------------------------------------------

6). Border for Specific Sides:

You can also style borders on specific sides:

Property Use
border-top Top border
border-right Right border
border-bottom Bottom border
border-left Left border

______________________________________________________________________________

List Styling:
***************

*). List Styling is used to change the style of list bullets or numbers.

*). It works for <ul> (bullets list) and <ol> (number list).

1). list-style-type: It changes the bullet type or number type.

*). disc — ●

*). circle — ○

*). square — ■

*). none — no bullet

Example:

ul {
list-style-type: square;
}

2). list-style-position: It controls bullet position inside or outside the

list item box.

*). outside — bullet outside (default)

*). inside — bullet inside

Example:

ul {
list-style-position: inside;
}

3). list-style-image: It changes the bullet to an image.

Example:
ul {
list-style-image: url("dot.png");
}

4). list-style: It is a shortcut to set type, position, image in one line.

Example:

ul {
list-style: circle inside;
}

______________________________________________________________________________

Display Property:
*****************

Display property is used to control how HTML elements appear on the webpage.

It decides whether the element should behave like a block, inline, or none.

Why Use Display Property:

*). To arrange elements properly

*). To hide or show elements
*). To change how elements take space in page

1). block: Element will take full width of the page. Next element will come

in next line.

Example:

div {
display: block;
}
Used for: <div>, <h1> to <h6>, <p>

2). inline: Element takes only required width.

Next element will come in same line.

Example:

span {
display: inline;
}
Used for: <span>, <a>, <strong>

3). inline-block: Element behaves like inline but you can set width, height,

margin, padding.
Example:

button {
display: inline-block;
}

4). none: Element will be hidden from the page.

It won’t take any space.

Example:

div {
display: none;
}

5). flex: Used to create flexible layouts.

Arrange items in row or column easily.

Example:

.container {
display: flex;
}

6). grid: Used to create grid layouts (like table structure but flexible)

Example:

.container {
display: grid;
}
______________________________________________________________________________

Flexbox:
*********

*). Flexbox (Flexible Box Layout) is a CSS layout method.

It helps to arrange elements side by side or top to bottom easily

inside a container.

It makes the page responsive and flexible.

*). Why Use Flexbox:

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

1). To arrange items in row or column

2). To align items center, left, right, top, bottom
3). To easily handle space between items
4). To make layouts adjust automatically in different screen sizes

Step 1: Make a container flex:

-----------------------------
First, set the parent container as display: flex;

Example:

.container {
display: flex;
}

Properties:
***********

1). flex-direction: It controls direction of items inside the container.

Values:
-------
*). row (left to right — default)

*). row-reverse (right to left)

*). column (top to bottom)

*). column-reverse (bottom to top)

Example:

.container {

display: flex;
flex-direction: row;
}

2). justify-content: It controls horizontal alignment (x-axis).

Values:

*). flex-start (left side)

*). flex-end (right side)

*). center (center)

*). space-between (space between items)

*). space-around (space around items)

Example:

.container {
justify-content: center;
}

3). align-items: It controls vertical alignment (y-axis).

Values:
*). flex-start (top)

*). flex-end (bottom)

*). center (middle)

*). stretch (fill height)

*). baseline (align text baseline)

Example:

.container {

align-items: center;
}

4). align-content: Controls space between multiple lines of flex items (when
wrapped).

Values:

*). flex-start

*). flex-end

*). center

*). space-between

*). space-around

*). stretch

5). flex-wrap: Controls whether the items wrap to next line or stay in one line.

Values:

*). nowrap (default — all in one line)

*). wrap (move to next line if no space)

*). wrap-reverse (wrap to next line in reverse order)

Example:

.container {
flex-wrap: wrap;
}
__________________________________________________________________

Grid Layout:
************

What is Grid Layout:

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

*). Grid Layout is a CSS layout system.

*). It helps to arrange elements like a table — with rows and columns.

*). It’s more powerful than flexbox for complex page layouts.

Why Use Grid Layout:

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

*). To create webpage layouts with rows and columns

*). To easily control size, position and spacing of items
*). To make responsive web pages quickly

Step 1: Make a container grid:

-------------------------------
Example:

.container {

display: grid;
}

1). grid-template-columns:
----------------------------

It defines how many columns and their size.

Example:

.container {

grid-template-columns: 100px 100px 100px;

}

Meaning: 3 columns, each 100px.

Or

Example:

.container {
grid-template-columns: 1fr 2fr;
}

Meaning: 1 part and 2 parts space.

2). grid-template-rows:
-------------------------

It defines how many rows and their size.

Example:
.container
{
grid-template-rows: 200px 300px;
}
Meaning: 2 rows — one 200px, one 300px.

3). grid-column: It controls how many columns an item should span.

Example:

.item1 {
grid-column: 1 / 3;
}
Meaning: Item covers from column 1 to column 3.

4). grid-row: It controls how many rows an item should span.

Example:

.item2 {
grid-row: 2 / 4;
}

5). justify-items: It aligns items horizontally inside grid cell.

Values: start, end, center, stretch

Example:

.container {
justify-items: center;
}

6). align-items: It aligns items vertically inside grid cell.

Values: start, end, center, stretch

Example:

.container {
align-items: center;
}

7). Gap:
-----------

It adds space between rows and columns.

Example:
.container {
gap: 20px;
}

___________________________________________________________________________________
_________

Media Queries:
**************

What is Media Query:

*). Media Query is a CSS technique.

*). It is used to make your website responsive (adjust to different screen

sizes like mobile, tablet, desktop).

Why Use Media Queries:

*). To change styles for different screen sizes

*). To create mobile-friendly websites

*). To adjust fonts, colors, layouts based on device

How to Write a Media Query:

Syntax:

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}

Meaning:

If screen size is 600px or less, then background color will be light blue.

Important Breakpoints (Common Sizes):

Device Type Max Width

Mobile 600px
Tablet 768px
Laptop 992px
Desktop 1200px

Media Query Example:

/* For mobile */
@media only screen and (max-width: 600px) {
h1 {
font-size: 20px;
}
}

/* For tablet */
@media only screen and (max-width: 768px) {
h1 {
font-size: 25px;
}
}
___________________________________________________________________________________
__

Animation & Transition:

**************************

Animation:
************

What is Transition in CSS:

*). Transition means when you change a property, it won’t happen suddenly —

it will happen smoothly over some time.

Why Use Transition:

*). To make smooth effects (like color change, size increase)

*). To avoid sudden changes on screen

*). To make website look professional and cool

How to Use Transition:

----------------------
Syntax:

.element {
transition: property duration timing-function;
}

Example:

button {
background-color: blue;
transition: background-color 0.5s ease;
}

button:hover {
background-color: red;
}

Meaning:

When mouse goes over button, color will change to red slowly in 0.5 seconds.

What is Animation in CSS:

---------------------------
*). Animation means you can move, rotate, fade or change any CSS property
step by step automatically.

Why Use Animation:

*). To make web pages more attractive
*). To add moving effects
*). To highlight important content

How to Use Animation:

-----------------------
Step 1: Write @keyframes

Example:

@keyframes move {
from {
left: 0px;
}
to {
left: 200px;
}
}

Step 2: Apply to Element:

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

.box {
position: relative;
width: 100px;
height: 100px;
background: red;
animation: move 2s linear infinite;
}

Meaning:

Box will move from left 0px to 200px in 2 seconds and repeat (because of infinite).
_______________________________________________________________________________
Difference Between Transition and Animation:
--------------------------------------------

Transition:
----------
1). Needs user action (like hover)

2). Changes only from one state to another

3). Easier for simple effects

Animation:
-----------

1). Runs automatically or on load

2). Can have multiple steps (keyframes)

3). Best for complex movements/effects

_______________________________________________________________________________

Pseudo-elements:
*****************

What is Pseudo-element:
-------------------------

*). Pseudo-element is a special CSS keyword.

*). It is used to style a part of an element without adding extra HTML.
*). Like adding content before/after, or styling first letter/line in a paragraph.

Why Use Pseudo-elements:

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

*). To add content before or after a tag

*). To style first letter or first line
*). To avoid adding extra HTML tags
*). To make special effects easily with CSS

How to Write Pseudo-element:

--------------------------------
Syntax:

selector::pseudo-element {
property: value;
}
Note: Use two colons (::)

1). ::before --> Adds content before the element

Example:

p::before {
content: "👉 ";
}
Use:
Add an arrow before every paragraph.

2). ::after --> Adds content after the element

Example:

p::after {
content: " 🔥";
}
Use:
Add fire emoji after every paragraph.

3). ::first-letter --> Styles first letter of text

Example:
p::first-letter {
font-size: 30px;
color: red;
}
Use:
Make first letter bigger and colored (like storybooks la irukum style).

4). ::first-line --> Styles first line of text

Example:

p::first-line {
font-weight: bold;
}
Use:
Make first line bold.

5). ::selection
👉 Styles text when you select it (highlight)

Example:

p::selection {
background: yellow;
color: black;
}
Use:
Change background and text color when selecting.

Exercise: Pseudo-class vs Pseudo-element Difference

_______________________________________________________________________________
Overflow:
***********

div {
overflow: hidden;
}

Cursor:
**********

div {
cursor: pointer;
}

Clipping (clip-path):
**********************

Example:

div {
 clip-path: circle(50%);
}

Shadows:
**********
Box Shadow:

div {
box-shadow: 5px 5px 10px black;
}

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