Basics of webtech

M19 Batch WebTech Notes

Web
A system of interconnected public webpages accessible through the Internet refers to
the World Wide Web (WWW). It is a vast network of websites that users can access via
web browsers like Chrome, Firefox, or Safari.
In simple wordsWeb is a collection of information in the form of images , audios ,
videos , Webpages , websites , Web Application

Basic Terminologies

Internet: A global network that connects millions of devices.

Web: Short for the World Wide Web, a collection of web pages and resources
accessible through the internet.

Browser: A software application (e.g., Chrome, Firefox, Safari) used to access

and display websites.

Server

A server is a computer or a system where all the websites are hosted. It handles
the request of the user 24 x 7. For a valid request server will give the response
and it contains logics and business logics.

Client: A device (e.g., your computer or smartphone) that requests web content
from a server.

IP Address: A unique numerical address assigned to each device connected to

the internet.

URL (Uniform Resource Locator): The web address used to locate a specific
webpage (e.g., [Link]
DNS (Domain Name System): Translates domain names (like [Link])
into IP addresses.

HTTP/HTTPS: Protocols used for transferring data between a client and server.

●​ HTTPS adds a layer of security through encryption.

Difference between a Webpage, Website And WebApplication

Webpage → A single page within a website that displays specific content.

There are two types of Webpages are there 1 static 2 Dynamic

Static →Static pages are those pages in which the information will be same for
each and every User .

Dynamic→Dynamic pages are those pages in which the information will be

different for each and every user .

Website → A collection of interconnected web pages that primarily serve to

display information.

Web Application → A software program that runs in a web browser, allowing

users to interact with features and perform tasks beyond just viewing content. It
is more dynamic and interactive than a regular website.
And they are providing some services to the users.

There are two types of Web Applications 1. Single page 2. Multipage Application

Single Page Application

1.​ Contains single html file
2.​ It will not reload in every request .
3.​ Request will always continuous from the previous request

MultPage Application
1.​ Contains multipages
 2.​ It will reload in every Request made by user

Example →

●​ Website: A company's homepage with information about their products and

services.
●​ Webpage: A specific page on that company website detailing a particular
product.
●​ Web application: An online banking platform where users can view account
balances, transfer funds, and pay bills.

How the Web Works?

Steps

1.​ When you type a URL (website address) in the browser and press
enter.
 2.​ The browser sends a request to a DNS server (Domain Name
System).
3.​ The DNS server translates the domain name (like [Link])
into its corresponding IP address (a unique number assigned to a
website).
4.​ Then, the DNS server sends back this IP address to the browser as a
response.
5.​ Now, the browser sends an HTTP or HTTPS request to the server
using this IP address.
6.​ The server processes the request and sends back a response to the
browser. This response contains the website’s files like HTML, CSS,
and JavaScript.
7.​ The browser receives these files and displays the web page on the
screen, allowing the user to see and interact with it.

What is the URL?

●​ It stands for Uniform Resource Locator or Unified Resource
Locator.
●​ It is the address of the unique resource present on the internet
How Browsers understand HTML, CSS, JS?

A browser is not just a simple software—it has different components that

work together to display web pages.

1. Rendering Engine : Responsible for understanding HTML and CSS.

What is HTML, CSS, JS?

HTML
●​ Html stands for Hyper Text Markup Language.
●​ It is used to structure a webpage.
●​ It also used to add content to the webpage.

CSS
●​ CSS stands for Cascading Style Sheets
●​ It is used to style and add alignment to the web page.

JavaScript
●​ It is used to add some functionality to our web pages
HTML
 HTML
HTML (HyperText Markup Language) is the most basic building block of the
Web. It is used to Create the structure of a webpage and along with that it will
help out to add the content in webpage .
Content like → images , audios , text , videos etc

History Of HTML
●​ 1991: Tim Berners-Lee invented HTML 1.0
●​ 1993: HTML 1.0 was released
●​ 1995: HTML 2.0 was published, which added new features to HTML 1.0
●​ 1997: HTML 3.0 was invented, which improved HTML features and gave
webmasters more capabilities
●​ 1999: HTML 4.01 was released and became the official standard
●​ 2014: HTML 5.0 was released and used worldwide

Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body></body>
</html>

Doctype html:
It is used to declare the version of html as html5.

Html:
It is the root element which contains the head section and body section.
It is the container for all other HTML elements
Head
It holds the meta data about the html document. such as title, styles, and
scripts

Title:
It will provide the title to the webpage.

Body:
This is the place where we have to write all the code which has to be displayed
on UI.

Tags
HTML Tags are predefined keywords that are enclosed in angular brackets (< >). Each
tag has a specific predefined task or purpose

Syntax:
<tagname> content </tagname>

Ex:
<p> Hello world </p>
<b> Hello world </b>

Types of Tags:

HTML tags were categorized into 2 ways.

​ They are:

1. Paired Tags
​ ​ ​ 2. UnPaired Tags

Paired Tags:

A tag which is required of both opening and closing tags are called paired tags.
They also known as Container tag.
Ex: <p> Hello Web Dev </p>
Unpaired Tags:

A Tag which does not require a closing tag is called unpaired tag.
They are also Known as , void tags , empty tags , Self closing tags

Ex: <br> , <hr> , <input>

Element

An element is a combination of opening tag + content + closing tag.

Html Elements were classified into 2 ways

​ ​ ​ 1. Inline Level

2. Block Level

[Link]-block Level

Inline Level:

These elements will occupy only content space.

These elements will display in the same line.

We cannot assign height and width properties for the inline elements. Ex:
<b> , <i> , <span> , etc…

Block Level:

These elements will occupy the whole viewport width.

These Elements will display in the next line.

We can assign height and width properties for the block elements.

Ex: <h1> , <div> , <p> , etc…

Inline-Block-Level
Inline level Elements are those elements which are having both the behaviour block and
inline level elements , They will take content height and content width only along with that
they will accept height and width

Ex: <img> <button> <input>

Heading Tags

Heading Tags are basically used to provide title or subtitle to the content in the
webpage.

We have a set of heading tags from h1 to h6.

Where h1 is highest in font size and h6 is lowest in font size.

Default Sizes:

​ h1 → 2 em

​ h2 → 1.5 em

​ h3 → 1.17 em

​ h4 → 1 em

​ h5 → 0.83 em

​ h6 → 0.67 em

Note: 1 em = 16px
Formatting Tags
​ Formatting Tags are used to display the content in different formats.

Formatting Tags are:

b → It will display the content in bold format.

strong → It will display the content in bold format and the browser will
understand that information is very important.

i → It will display the content in Italic format.

em → It will display the content in Italic format and it is an alternative to the <i>
tag.

u → It will provide an underline to the content.

ins → It will provide an underline to the content and it is an alternative to <u>

tag.

strike → It will strike off the content.

del → It will strike off the content and it is the alternative to <strike> tag.

q → It will provide quotations to the content.

mark → It will highlight the content with yellow background color.

big → It will display the content with a big font-size.

small → It will display the content with a small

font-size

sup → It will display the content as superscript.

sub → It will display the content as subscript.

code → It will display in the font-family “monospace”.

pre → It will consider space also. It will also be known as a pre structured tag.

Deprecated Tags:
These are the tags which will be removed in further versions.

Vs code gives suggestions by displaying in red color.

Semantic tags
Semantic tags are those tags which will describe their meaning by their name only .​

Examples
Main Document Structure

●​ <header> – Introductory content or navigation (top section).​

●​ <nav> – Navigation links.​

●​ <main> – Main content of the document (unique content).​

●​ <section> – A thematic grouping of content.​

●​ <article> – Self-contained content (e.g., blog post, news article).​

●​ <aside> – Sidebar or related content.​

●​ <footer> – Footer section (end of page or section).

Text Content

●​ <h1> ... <h6> – Headings.​

●​ <p> – Paragraph.​

●​ <blockquote> – Long quotation.​

●​ <q> – Inline short quotation.​

●​ <address> – Contact information.​

●​ <time> – Date or time.​

●​ <mark> – Highlighted text.​

●​ <strong> – Important text.​

●​ <em> – Emphasized text (usually italic).​

Etc.. try to find out by yourself for better understanding .

Attributes
HTML attributes are used to define the characteristics of an HTML element.

●​ Attributes provide additional information about elements

●​ Attributes are always used in the opening tag of the element
●​ Attributes usually come in name/value pairs like: name="value"
●​ Attributes must be written in lower case

Name: Specifies the property for that element.

Value: Sets the value of that property for the element.

Types of Attributes

[Link] Attributes

These are basic attributes that can be applied to most HTML elements.

●​ Style: Used to add styles to an element, such as color, font, and

size.
●​ Title: Provides additional information about an element and is
often displayed as a tooltip when the mouse hovers over it.
●​ Class:class attribute is used to group multiple items together. It
allows you to assign the same class name to multiple elements,
making it easier to apply the same styles or manipulate them
collectively using CSS or JavaScript.

Unlike the ID attribute, the class attribute is not unique, and

multiple elements can share the same class.

●​ Id The ID attribute is used to assign a unique identifier to an

HTML element. The id should be unique for each element and the
id attribute should have only one value
[Link] Attributes:
These attributes help adapt the document to different languages and
regions. Examples include lang and dir.
●​ lang
●​ dir

[Link] Attributes
These are the element specific attributes .
●​ src
●​ href
●​ alt
●​ height and width

[Link] Attributes
●​ contenteditable
●​ tabindex
●​ Accesskey

1. contenteditable
The contenteditable attribute specifies whether the content of an element is editable by
the user.

Ex →
​ ​ <div contenteditable="true">You can edit this text!</div>
<div contenteditable="false">This text is not editable.</div>

3. tabindex

The tabindex attribute specifies the tab order of an element when navigating through
the page using the Tab key. It controls the sequence of focusable elements.

●​ 0: The element is focusable in the natural tab order.

●​ Positive Numbers: The element is focusable and has a custom tab order. Lower
numbers are focused first.
 ●​ Negative Numbers: The element is not focusable via Tab, but can be focused
programmatically.

[Link]

The accesskey attribute specifies a shortcut key (keyboard combination) that can be
used to activate or focus a specific HTML element, such as a link, button, or form field.

5. Title

This attribute is used to provide the toolTip for the html elements

Lists
HTML Lists allows to group a set of items together and will display the items on UI.

HTML lists are classified into 3 ways.

They are:

1. Ordered List

2. Unordered List

3. Description List

1. Ordered List:

Ordered List is that list in which they have some sequence , and by default sequence
will be number , so it also known as numbered list

● Tags:

ol → It indicates that we are creating an ordered List.

li → It indicates List Items.

● Attributes:

Type → Specifies the type of sequence.

 Values = 1 (default) , A , a , I , i

Start → Specifies the Starting Position.

Values = 1 (default) , Any Number

Reversed → It will reverse the sequence.

2. Unordered List:

An unordered list is that list in which we don't have any sequence instead of that list
style. It is there by default disc or bullet so It is also known as a bulleted list.

● ​ Tags:

ul → It indicates that we are creating an Unordered List.

li → It indicates List Items.

● ​ Attributes:

○ ​ Type → Specifies the type of symbol.

Values = disc (default) , circle , square ,

none|

3. Description List:

● Description List is used to display the description data along with

description terms.

● ​ Tags:

dl → Indicates Description List

dt → Indicates Description term

dd → Indicates Description Definition.

3. Nested List :
● List inside another list is nothing but the Nested List , it can be
Oredered , unordered , Description .

Examples for List

 Table
Table in html is used to display the data in the structured and organized manner on the
ui .
In the form of rows and columns .
Whatever will be displayed on the ui it will be inside the cell . And the cell is nothing but
the intersection of rows and columns .

Tags : → <Table>, <tr> , <td> , <th> , <thead> , <tbody> , <tfoot>

Attributes → cellspacing , cellpadding , border , rules , rowspan , colspan , dir

Important Table Tags

Tag Description

<table> Main container to create a table.

<tr> Table row – defines a row in the table.

<td> Table data – represents a normal cell inside a row.

<th> Table header – similar to <td> but makes text bold &
centered.

<thead> Groups the header content of the table.

<tbody> Groups the body (main data) of the table.

<tfoot> Groups the footer content of the table (like totals).

Important Table Attributes

Attribute Description
border Adds a border around the table and cells.

cellspacing Space between cells.

cellpadding Space inside a cell (padding).

rules Defines internal borders (rows, cols, or all).

rowspan Makes a cell span across multiple rows.

colspan Makes a cell span across multiple columns.

dir Defines text direction (ltr → left to right, rtl → right to

left).

Task on table
Image
●​ <img> tag is used to display images on a webpage.​

●​ It is an empty tag (no closing tag).

Attributes of <img>

Attribute Description

src Specifies the path (location) of the image file.

alt Alternative text – shown when image is not loaded, also used by screen readers
(for accessibility).

Src attribute will accept two types of path 1. Relative Path , 2. Absolute Path

1.​ Relative path

This is a path having some relation with my current file or folder and it will start with . and
. represents coming out from any file or folder , / it represents move inside amny file or
folder .
 2.​ Absolute Path
This is the Path which is not having any relation with my current file or folder .

Form
HTML form is a container element (<form>) used to collect user input and send it to a
server for processing

Syntax
<form action="">

<!-- Form elements go here -->

</form>

Tags Used in Forms

1.​ <form>
2.​ <label>
3.​ <input>
4.​ <select>
5.​ <optgroup>
6.​ <option>
7.​ <datalist>
8.​ <fieldset>
9.​ <legend>
10.​<textarea>
11.​ <button>
Explanation of Form Elements

1. <form>

●​ The <form> tag is a semantic element used to contain form elements.

2. <label>

●​ Specifies the purpose of an input field.

●​ Improves accessibility by linking with an <input> field using the for and id
attributes.

Example: Label and Input

<label for="userName">Name:</label>

<input type="text" id="userName">

<label for="userEmail">Email:</label>

<input type="email" id="userEmail">

3. <select>

●​ Creates a dropdown list with a set of options.

4. <optgroup>

●​ Groups related <option> elements inside a <select>.

5. <option>

●​ Defines individual options inside a dropdown.

Example: Select, Optgroup, and Option

<label>Skills:</label>
<select name="userSkills" multiple>

<optgroup label="Frontend">

<option value="React">React</option>

<option value="Angular">Angular</option>

</optgroup>

<optgroup label="Database">

<option value="SQL">SQL</option>

<option value="MongoDB">MongoDB</option>

</optgroup>

<optgroup label="Backend">

<option value="Python">Python</option>

<option value="Java">Java</option>

<option value="NodeJs">NodeJs</option>

</optgroup>

</select>

6. <datalist>

●​ Similar to <select>, but allows users to filter options by typing.

●​ Requires an <input> field.
●​ The value attribute and content should be the same.

Example: Datalist

<label>Skills:</label>

<input list="skillsList">
<datalist id="skillsList">

<option value="React">React</option>

<option value="Angular">Angular</option>

<option value="SQL">SQL</option>

<option value="MongoDB">MongoDB</option>

<option value="Python">Python</option>

<option value="Java">Java</option>

<option value="NodeJs">NodeJs</option>

</datalist>

7. <fieldset>

●​ Groups related form fields and displays a border around them.

8. <legend>

●​ Provides a title for a <fieldset>.

Example: Fieldset and Legend

<fieldset>

<legend>Personal Details</legend>

<!-- Form elements go here -->

</fieldset>

9. <textarea>

●​ Used for multiline text input.

 ●​ rows and cols specify the visible height and width.

Example: Textarea

<textarea name="comment" rows="10" cols="30"></textarea>

10. <button>

●​ Creates a button with different types (e.g., submit, reset).

Example: Button

<button type="reset">Reset</button>

<button type="submit">Submit</button>

Attributes of <input> Tag

1.​ type – Specifies the input type (e.g., text, email, password).
2.​ id – Unique identifier for the input field.
3.​ name – It is used to retrieve specific form data after submission
4.​ value – Predefined value in the input field.
5.​ list – Links to a <datalist>.
6.​ multiple – Allows multiple selections.
7.​ readonly – Prevents the user from editing the field.
8.​ disabled – Disables the field.
9.​ required – Makes the field mandatory.
10.​placeholder – Displays hint text inside the field.
11.​ min / max – Defines minimum and maximum values.
12.​minlength / maxlength – Defines min/max length for text input.
13.​step – Specifies increments for number/date inputs.
14.​size – Defines the width of the input field.
15.​autofocus – Automatically focuses the input field.
 16.​autocomplete – Suggests previously entered values.
17.​pattern – Defines a regex pattern for validation.

Values of the type Attribute

1.​ text
2.​ email
3.​ password
4.​ number
5.​ tel
6.​ radio
7.​ checkbox
8.​ button
9.​ submit
10.​reset
11.​ search
12.​date
13.​time
14.​datetime-local
15.​week
16.​month
17.​color
18.​image
19.​file
20.​url
21.​range

Attributes of the <form> Tag

1.​ action
○​ Specifies the URL where the form data should be sent.
2.​ method
○​ Defines how data is sent:
■​ GET – Data is sent in the URL, not secure.
 ■​ POST – Data is sent in the request body, secure.
3.​ novalidate
○​ Prevents form validation before submission.
4.​ autocomplete
○​ Controls autofill behavior (on / off).

Task 1 : Youtube Search

Task for Home :

Anchor Tag

Anchor tag helps us to navigate from one web page to another webpage.

By using anchor tags, we can create hyperlinks in a webpage.

Syntax:

<a href=”pathAddress”> content </a>

Whatever we give as the content to the anchor tag that becomes a hyperlink.

Content can be text, image, button, icon, etc.

To create the hyperlink , href attribute is mandatory

To mail a person we have to use mailto protocol (“[Link]

​ <a href="[Link] Us</a>

To call a person we have to use tel protocol (“[Link]

Attributes:

1. href → It will specify the path address to where we have to navigate.

2. download → It indicates to download the file.

​ <a href="[Link]" download>Download File</a>

3. Target → it specify where to open the linked document

​ ​ ​ (_blank , _parent , _top , _self)

Default colors:

1. Visited link → purple.

2. Unvisited link → blue.

3. Active link → red.

 <!-- Usage -->
<!-- [Link] a web page -->
<!-- [Link] to a section of the same page / another page -->
<!-- 3. Send Email -->
<!-- [Link] to phone caller-->
<!-- 5. Link to a script -->
<!-- [Link] a file-->
<!-- [Link] the page into new window or new tab -->
<!--8. target attribute -->
<!-- 9. four states of the anchor tag →
<!--[Link] key attribute-->
<center>​
​

Audio Tag
The <audio> tag is used to include audio files on a webpage.
Syntax: <audio src="path address"></audio>
Attributes:
1. src → It will specify the path address
2. controls →Displays play, pause, and volume controls for the user.
3. autoplay → It will play the song automatically when the page loads
4. loop → Makes the audio replay continuously after finishing.
5. muted → Starts the audio with the volume muted.

Video Tag
The <video> tag is used to include video files on a webpage.
Syntax: <video src="path address"></video>
Attributes:
1. src → It will specify the path address
2. controls →Displays play, pause, volume, and fullscreen controls for the
user
 3. autoplay →Automatically starts playing the video when the page loads
(should include muted for autoplay).
4. loop → Makes the video replay continuously after finishing.
5. muted → Starts the video without sound.
6. Poster → Specifies an image to display before the video starts
playing.(thumbnail)

Marquee Tag
Marquee tag implements scrollable content in our webpages.

Syntax:

<marquee behavior="" direction=""> Content </marquee>

Whatever we provide in the content place will scroll, content like text / images / anchor

tag / icons / buttons etc…

Attributes:

direction → It specifies the direction of scrolling content.

Values = left (default) / right / up / down

Behavior → It specifies the behavior of marquee element.

Values = scroll (default) / slide / alternate

Scrollamount → It specifies the speed of an element

Values = Numbers (default is 6)

Loop → It specifies how many times the content has to scroll.

Height → It Specifies the height of an element.

Width → It Specifies the width of an element.

Audio Tag
The <audio> tag is used to include audio files on a webpage.
Syntax: <audio src="path address"></audio>
Attributes:
1. src → It will specify the path address
2. controls →Displays play, pause, and volume controls for the user.
3. autoplay → It will play the song automatically when the page loads
4. loop → Makes the audio replay continuously after finishing.
5. muted → Starts the audio with the volume muted.

Video Tag
The <video> tag is used to include video files on a webpage.
Syntax: <video src="path address"></video>
Attributes:
1. src → It will specify the path address
2. controls →Displays play, pause, volume, and fullscreen controls for the
user
3. autoplay →Automatically starts playing the video when the page loads
(should include muted for autoplay).
4. loop → Makes the video replay continuously after finishing.
5. muted → Starts the video without sound.
6. Poster → Specifies an image to display before the video starts
playing.(thumbnail)
[Link] and height: Define the dimensions of the video player.
Iframe Tag
Iframe tag is used to embed another web page into the current web page. We can
embed internal web pages as well as external web pages like youtube , google maps
etc…
Syntax : <iframe src="" frameborder="0" height="" width=""></iframe>
Attributes:
1. src → It will specify the path address
2. frameborer→Specifies whether the iframe should have a border (0 for
no border, deprecated in HTML5).
7. width and height: Define the dimensions of the iframe.

Embedding Map
Steps to Embed a Map
1.​ Open Google Maps
2.​ Get the Embed Code
3.​ Add the Code to Your Webpage

Generating QR Code
You can use free APIs like Google Chart API or QR Code Generator APIs to dynamically
create QR codes.

1.​ Go to goqr website and get the api (qr code generator api)
[Link]
[Link]
2.​ Replace the Example with the your website path address
3.​ Use img tag and pass the complete path to src
4.​ You can change the qr size also by using height and width attribute or passing values to
the size in path address

HTML Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your HTML text, the
browser might mix them with tags.
Entity names or entity numbers can be used to display reserved HTML characters.
Example →
To display a less than sign (<) we must write: &lt; or &#60;
CSS
 CSS
CSS stands for Cascading Style Sheets
CSS describes how elements in a web page should be displayed on screen
CSS is used to style and provide layout to the webpage

CSS History

​ 1994​
Håkon Wium Lie, a Norwegian technologist at CERN, proposed the idea
of CSS after noticing that there was no way to style documents on the
web.
​ 1996​
The first version of CSS, CSS1, was adopted by the World Wide Web
Consortium (W3C).
​ 1998​
CSS 2 was released, and work on CSS 3 began.
​ 2011​
CSS 3 was released

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.

Ways to add CSS

There are three ways to add CSS .
1.​ Inline CSS
2.​ Internal CSS
3.​ External CSS

1. Inline CSS
An inline style is used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

2. Internal CSS
It is a way of adding the CSS in the same html file itself. By using Style Tag.
We can use style tag anywhere in the html file. It’s recommended to use in a head tag.

Ex :
​ ​ <html>
<head>
 <title>Document</title>
<style>
h1 {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<h1>Let's dive into CSS</h1>
</body>
</html>

3. External CSS
It is a way of writing all the css code in one file which is saved with .css extension.
That css file you can link with multiple html files by using the link tag inside the <head>
section
It makes the stylesheet reusable
​ <!-- [Link] →
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="./[Link]" />
</head>
<body>
<h1>Let's dive into CSS</h1>
</body>
</html>
/* [Link] */
h1 { color: white;
background-color: blue;
}
 Note :
1. The first will always be taken by inline CSS. because of the most recent
update.
2. Internal vs External depends on code flow which is written at last.

CSS Selectors
CSS selectors are used to select and style specific elements in an HTML document.

To apply the css Properties, we can target the html elements in many ways. They are:

1. Simple Selector

2. Combinator Selector

3. Pseudo Class Selector

4. Pseudo Element Selector

5. Attribute Selector

1. Simple Selector
These selectors target elements based on their tag names, IDs, and classes. Here are
the basic selectors:

1. Id (#)
2. Class (.)
3. Tagname
1.​ Grouping Selector (,)
2.​ Universal (*)

Tag Name Selector

●​ Targets an element based on its tag name.

●​ Syntax: tagname
●​ Example: p { color: red; }

Grouping Selector
 ●​ Groups multiple elements and applies the same style to them.
●​ Syntax: Separate selectors by a comma.
●​ Example: h1, h2, h3 { font-family: Arial, sans-serif; }

Universal Selector

●​ Targets all elements in the document, including the body tag.

●​ Syntax: *
●​ Example: * { margin: 0; padding: 0; }

ID Selector

●​ Targets an element with a specific ID. IDs should be unique in a document.

●​ Syntax: #id
●​ Example: #header { font-size: 24px; }
●​ Note: Repeating IDs is discouraged and does not work in advanced
programming languages.

Class Selector

●​ Targets elements with a specific class name. Class names can be repeated.
●​ Syntax: .classname
●​ Example: .button { padding: 10px 15px; background-color: blue; }

2. Combinator Selectors

These selectors combine two simple selectors based on the relationship between
elements. The following are the types of combinator selectors:
Descendant Selector

●​ Targets all children, grandchildren, great-grandchildren, etc., of an element.

●​ Syntax: ancestor descendant
●​ Example: div p { color: blue; } (Targets all p tags inside a div.)

Direct Child Selector

●​ Targets only direct children, not descendants.

●​ Syntax: parent > child
●​ Example: div > p { color: green; } (Targets p tags that are direct children of div.)

Adjacent Sibling Selector

●​ Targets the element immediately following(immediate right) a specified element.

 ●​ Syntax: element + sibling
●​ Example: h1 + p { color: purple; } (Targets the first p after an h1.)

General Sibling Selector

●​ Targets all siblings following a specified element.

●​ Syntax: element ~ sibling
●​ Example: h1 ~ p { color: orange; } (Targets all p elements that are siblings of an
h1.)

3. Pseudo-Class Selectors

Pseudo-classes target elements based on their state or position in the DOM. These
selectors are preceded by a single colon (:).

:hover

●​ Applies styles when the cursor hovers over an element.

●​ Example: a:hover { color: red; }

Link States:

●​ :link: Targets unvisited links.

○​ Example: a:link { color: blue; }
●​ :visited: Targets links that have been visited.
○​ Example: a:visited { color: purple; }
●​ :active: Targets a link or element when it is actively being clicked.
○​ Example: a:active { color: red; }

:first-child
Targets the first child element of a parent.

:last-child
Targets the last child element of a parent.
:nth-child(n)
Targets the nth child of a parent (based on number).
Pseudo element

●​ ::first-line → Styles the first line of a block element.​

●​ ::first-letter → Styles the first letter of a block element.​

●​ ::before → Inserts generated content before an element’s

content.​

●​ ::after → Inserts generated content after an element’s

content.​

●​ ::selection → Styles the portion of text highlighted by the

user.​

●​ ::marker → Styles the bullet/number of list items.​

Attribute Selector
1.​ [ AttributeName ]
2.​ [ AttributeName = “Value” ]
3.​ TagName[ AttributeName= “Value” ]

CSS units
Relative Units:
These units are dynamic, It will depend on some other values. Relative Units are:
1. vw → depends on viewport width
2. vh → depends on viewport height
3. % → depends on parent element
4. rem → depends on root element
5. em → depends on parent element

Absolute Units:
 1.​ Px
2.​ In
3.​ cm

Text Properties

Text Properties are basically used to apply CSS effects on text content.
1. color
2. text-align
3. text-transform
4. text-decoration
5. text-wrap
6. letter-spacing
7. word-spacing
8. line-height
9. Text-shadow

●​ color: Changes the text color. Syntax: color: value; Values = any color.​

●​ text-align: Aligns the content. Syntax: text-align: value; Values = left /

start, center, right / end, justify.​

●​ text-transform: Converts text format.

●​ Syntax: text-transform: value; Values = lowercase, uppercase,
capitalize.​

●​ text-decoration: Adds underline/overline/line-through. Syntax:

text-decoration: value; Values = underline, overline, line-through, none.​

●​ text-wrap: Controls wrapping. Syntax: text-wrap: value; Values = wrap,

nowrap.​
 ●​ letter-spacing: Sets space between letters. Syntax: letter-spacing:
value; Values = any number.​

●​ word-spacing: Sets space between words. Syntax: word-spacing: value;

Values = any number.​

●​ line-height: Sets line height. Syntax: line-height: value; Values = any

number.​

●​ text-shadow: Adds text shadow. Syntax: text-shadow: x-axis y-axis

blur color; Default = 0px 0px 0px black, Example = 2px 2px 3px blue.​

Font Properties
Font properties are used to apply CSS effects such as text size, boldness, style,
and font family to text content.
It specifically define the visual appearance of the text itself, including font
family, size, weight, and style

Font Properties are:

1.​ font-size
2.​ font-weight
3.​ font-style
4.​ font-family
5.​ font-variant

1. font-size:

OSpecifies the size of the text content.

●​ Syntax: font-size: value;

●​ Values:
○​ Predefined keywords: xx-small, x-small, small, medium, large, x-large,
xx-large.
○​ Custom values: Any valid length (e.g., 16px, 1.5em, %).
2. font-weight:

Specifies the boldness or thickness of the text.

●​ Syntax: font-weight: value;

●​ Values:
○​ Numeric scale: 100 (thin) to 900 (extra bold).
○​ Keywords: lighter, normal, bold, bolder.

3. font-style:

Defines the style of the text, such as making it italicized.

●​ Syntax: font-style: value;

●​ Values:
○​ normal: Default, no special styling.
○​ italic: Italicized text.
○​ oblique: Text slanted at an angle.

4. font-family:

Specifies the font family for the text content.

●​ Syntax: font-family: value;

●​ Values:
1.​ From VS Code: Standard font families like Arial, Times New Roman,etc.
2.​ Google Fonts: from Google Fonts website we can get the font family

5. font-variant:

Displays the text in small-caps format or keeps it normal.

●​ Syntax: font-variant: value;

●​ Values:
○​ normal: Default text appearance.
 ○​ small-caps: Converts lowercase text to uppercase while keeping it smaller
in size.

Background Properties
Background properties are used to apply effects to an element's background. The
background shorthand property combines several background-related properties into a
single declaration.

1. background

●​ A shorthand property for multiple background properties.

●​ Instead of writing all properties individually, you can specify all values in a
single declaration.

2. background-color

●​ Specifies the background color of an element.

●​ Syntax: background-color: value;
●​ Values: Any valid color (e.g., red, #ff0000, rgb(255, 0, 0)).

3. background-image

●​ Specifies the background image of an element.

●​ Syntax: background-image: url("path/to/image");

4. background-repeat

●​ Defines how a background image is repeated.

●​ By default, the background image repeats.
●​ Syntax: background-repeat: value;
●​ Values:
○​ repeat: Repeats the image both horizontally and vertically (default).
○​ no-repeat: Prevents image repetition.
○​ repeat-x: Repeats the image horizontally.
○​ repeat-y: Repeats the image vertically.

5. background-position

●​ Specifies the position of the background image.

●​ Syntax: background-position: x-position y-position;
 ●​ Values:
○​ x-position: left, center, right.
○​ y-position: top, center, bottom.

6. background-size

●​ Defines how the background image fits within the container.

●​ Syntax: background-size: value;
●​ Values:
○​ auto: Default. Keeps the original size of the image.
○​ contain: Scales the image to fit within the container without cropping.
○​ cover: Scales the image to fill the container, possibly cropping the image.

7. background-attachment

●​ Determines whether the background image scrolls with the page or remains
fixed.
●​ Syntax: background-attachment: value;
●​ Values:
○​ scroll: Background image scrolls with the page (default).
○​ fixed: Background image remains fixed in place.

8. background-blend-mode​
Specifies how the background image(s) should blend with each other and with the
background color.​
Syntax: background-blend-mode: value;

Values:

●​ normal → Default, no blending.​

●​ multiply → Multiplies colors (darker effect).​

●​ screen → Lightens colors by inverting, multiplying, and inverting again.​

●​ overlay → Mix of multiply and screen (high contrast).

Gradients
CSS gradients let you display smooth transitions between two or more specified
colors.
There are three types of gradients they are →

●​ Linear Gradients (goes down/up/left/right/diagonally)

●​ Radial Gradients (defined by their center)
●​ Conic Gradients (rotated around a center point)

Linear Gradient

A linear gradient transitions colors along a straight line, either horizontally, vertically, or
at an angle.

background-image: linear-gradient(direction, color-1, color-2, ...);

A repeating linear gradient:

#grad {

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

Radial Gradient

A radial gradient transitions colors radiating outward from a center point.

​ We can also set the shape of the radial gradient as (ellipse , circle)

​ #grad {

background-image: radial-gradient(circle, red, yellow, green);

}
Conic Gradient

A Conic gradient transitions colors in Conical shape from the top of the cone

​ #grad {

background-image: conic-gradient( red, yellow, green);

Border
Border properties allow you to customize the borders of elements with various
styles, colors, and widths.

1.​ border​
It is a shorthand property for border-width, border-style, and
border-color.​
Syntax: border: border-width border-style border-color;

2.​ border-width​
Specifies the width(thickness) of the border.​
Syntax: border-width: value;

3.​ border-style​
Specifies the style of the border.​
Syntax: border-style: value;​
Values: solid, dashed, dotted, double, groove, ridge, none.

4.​ border-color​
Specifies the color of the border.​
Syntax: border-color: value;
 5.​ border-top / border-bottom / border-left / border-right​
Used to style borders for specific sides of an element​
Syntax:
○​ border-top: border-width border-style border-color;
○​ border-bottom: border-width border-style border-color;
○​ border-left: border-width border-style border-color;
○​ border-right: border-width border-style border-color;

6.​ border-collapse​
Used for tables to decide whether the table cells' borders should be
separated or collapsed.​
Syntax: border-collapse: value;​
Values: separate, collapse.

7.​ border-spacing​
Specifies the space between cells in a table. It works only when
border-collapse is set to separate and is an alternative to the cellspacing
attribute in the <table> tag.​
Syntax: border-spacing: value;

Box Model
By default, every HTML element has some default margin and padding. These default
values can affect the layout of our webpage. To control and manage these layout
issues, we use the Box Model concept.
The Box Model consists of four main parts:

1.​ Content Box

2.​ Padding Box
3.​ Border Box
4.​ Margin Box

1. Content Box

●​ It represents the area where the content of an element is displayed.

●​ It includes the content height and width, but not the element's total height &
width.

2. Padding Box
 ●​ It is the space between the content and the border of an element.

Example:​
padding: 5px;
padding: 10px;

3. Border Box

●​ It defines the border around an element.

Example:​
border: 2px solid blue;

4. Margin Box

●​ It specifies the space outside an element, separating it from other elements.

Example:​
margin: 5px;
margin: 10px;
Margin Shorthand Property

The margin property is a shorthand for setting margin-top, margin-right,

margin-bottom, and margin-left in a single line.

Four values:​
margin: 10px 20px 30px 40px;

●​
○​ Top: 10px
○​ Right: 20px
○​ Bottom: 30px
○​ Left: 40px

Three values:​
margin: 10px 20px 30px;

○​ Top: 10px
○​ Left & Right: 20px
○​ Bottom: 30px
Two values:​
margin: 10px 20px;

●​
○​ Top & Bottom: 10px
○​ Left & Right: 20px

One value:​
margin: 10px;

●​
○​ Applies to all four sides

The same rules apply to the padding property as well.

Height and Width Calculation

The total height and width of an element include all parts of the Box Model.

Total Height Calculation

Total height = margin-top + border-top + padding-top + content-height +

padding-bottom + border-bottom + margin-bottom

Total Width Calculation

Total width = margin-left + border-left + padding-left + content-width + padding-right +

border-right + margin-right

Important Note:
If we specify:​
height: 100px;
padding: 10px;

●​ The total height will be 120px (100px content + 10px padding top + 10px padding
bottom).
To fix the size of an element regardless of padding and border, use:​
​
box-sizing: border-box;

●​ This ensures that padding and border are included within the specified width
and height.

To remove the default margin and padding from all elements, use:​
​
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

Border-radius
The border-radius property allows you to create rounded corners for elements by
defining the radius of their corners.

You can control each corner of an element separately using these properties:

●​ border-top-left-radius: Specifies the radius for the top-left corner.

●​ border-top-right-radius: Specifies the radius for the top-right corner.
●​ border-bottom-right-radius: Specifies the radius for the bottom-right corner.
●​ border-bottom-left-radius: Specifies the radius for the bottom-left corner.

Shorthand Property:

You can define the radius for all four corners in a single border-radius property.

border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;

●​ You can provide 1 to 4 values:

○​ 1 value: Applies to all four corners.​
Example: border-radius: 10px;
○​ 2 values: First for top-left & bottom-right, second for top-right &
bottom-left.​
Example: border-radius: 10px 20px;
 ○​ 3 values: First for top-left, second for top-right & bottom-left, third for
bottom-right.​
Example: border-radius: 10px 20px 30px;

4 values: Each value applies to its respective corner.​

Example: border-radius: 10px 20px 30px 40px;

Display
The display property controls how an element behaves in the document flow.

Common Display Values:

1.​ none – Hides the element completely, without occupying space.

2.​ inline – Displays elements in a line, only taking up content width. Cannot set
height/width.
3.​ block – Takes up full width by default, allows height/width to be set.
4.​ inline-block – Behaves like inline (stays in the same line) but allows height/width
adjustments like block.
5.​ flex – Enables a one-dimensional layout for arranging elements in rows or
columns.
6.​ grid – Enables a two-dimensional layout for structuring elements in rows and
columns.

Flex

Flex is the arrangement of elements in one direction like row or column

To work with flex boxes, We need a flex container and all the direct children
will become the flex-items. (ONLY DIRECT CHILDREN).
There are many properties which we can apply only to the container as well as only
to the items.

Flex-container Properties are:

1.​ display:flex
2.​ justify-content
3.​ align-items
4.​ flex-direction
5.​ flex-wrap
6.​ align-content
7.​ column-gap
8.​ row-gap
9.​ gap

1.​ display: flex:

●​ This is the main property we must use to work with flex boxes.
●​ By assigning this property we are able to use all flex properties.

2.​ Justify-content:
​ ​
★​ It will align the flex-items on the main axis.
★​ Syntax: justify-content: values;
★​ Values = start , center , end , space-between , space-evenly , space-around.
○​ flex-start (default) – Items align at the start.
○​ center – Items align at the center.
○​ flex-end – Items align at the end.
○​ space-between – Equal space between items.
○​ space-around – Equal space around items.
○​ space-evenly – Equal space between and around items.

The default value is start.

Note : When we use display: flex; then the by default direction is row so here
main-axis means row and cross-axis means column.

3. align-Items:

●​ It will align the flex-items on the cross axis.

●​ Syntax: align-items: values;
●​ Values = start , center , end , stretch , baseline.
●​ The default value is start.

4. flex-direction:

●​ It will specify the direction of flex-items.

●​ Whether to display in row format or column format.
●​ It will decide the main axis.
●​ Syntax: flex-direction: values;
●​ Values = row , column , row-reverse , column-reverse.
●​ The default value is row.
5. flex-wrap:

●​ It will specify whether to wrap the flex-items into the next line or not.
​

○​ Syntax: flex-wrap: values;

○​ Values = nowrap , wrap , wrap-reverse.
○​ The default value is nowrap.​
6.​ align-content:
●​ It will specify the position of wrapped flex items.
●​ Syntax: align-content: values;
●​ Values = start , center , end , space-between , space-around , stretch

7.​ gap:

It is a shorthand property of row-gap &

column-gap. It will specify the space between the
flex items.
Ex: row-gap:20px & column-gap:20px; / gap: 20px 20px;

Ex: gap:20px
Flex-items Properties are:

1.​ order
2.​ align-self
3.​ flex-grow
4.​ flex-basis
5.​ Flex-shrink
6. Flex

1. Order:

●​ It will arrange the flex-items in an order in the flex container.

●​ It will define place of the item in flex container ( like which item should be
at first place, which should be at second place)
●​ The order value must be a number, default value is 0.
●​ We can provide -ve values also

Ex:

.item1 {
order: 4;
}
.item2 {
order: 1;
}
.item3 {
order: 2;
}

.item4 {
order: 3;
}
2. Align-self:

●​ By using this property, we can align the flex-items individually.

●​ It will override the default alignment which is specified by align-items.
●​ It will accept all the values which can be acceptable by align-items
property. The only difference is

i.​ Align-items to move all the items of container in cross axis

ii.​ align-self to move a specific item in cross axis

3. Flex-grow:
●​ flex-grow allows flex items to grow to fill the available space in the
container along the main axis.
●​ It increases the size of flex items proportionally based on their flex-grow
values.
●​ The remaining space in the flex container is divided according to the
flex-grow values, and distributed to each item accordingly.

●​ Ex:

.item1 {
flex-grow: 0;
}
.item2 {
flex-grow: 0;
}
.item3 {
flex-grow: 0;
}
 .item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 1;
}
.item3 {
flex-grow: 1;
}

​ ​ .item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
.item3 {
flex-grow: 1;
}

4. flex-basis
 It is equivalent to the width property.

Ex:

​ ​ ​ .item1 {
flex-basis: 200px;
}

.item2 {
flex-basis: 100px;
}

.item3 {
flex-basis: 200px;
}

5. flex-shrink:

It will shrink the size of the flex-items.

Based on the extra space required in a container to fit all the
flex-items.
If there is no enough space in a container to fit all the flex-items then
all flex-items will shrink(decreases) equally and fit’s in a container.
By default the value is 1;
Ex:

For example:
The width of container is 800px;
And with provided to items is 300px;
So to fit 300 + 300 + 300 = 900 px into an 800px container all items
will shrink equall
 But our need is that we may shrink item2 and item3 but item1 should
not shrink.
So, we can target item2 & item3 and specify the flex-shrink value.
And for item1 we can pass the value of flex shrink as 0

6. flex:

■​ It is a shorthand property of flex-grow , flex-shrink and flex-basis.

​ ​ Syntax : flex : flex-grow flex-shrink flex-basis;
■​ Ex: flex: 1 1 200px
■​ If we specify flex 1 , it will increase , decrease , and width equally
Grid

Grid will layout the webpages in 2 dimensional format.

To work with a grid, We need a grid container and all the direct children
will become grid-items. (ONLY DIRECT CHILDREN).
Grid Container Properties are:

1.​ display:grid

2.​ Grid-template-columns

3.​ Grid-template-rows

4.​ Column-gap

5.​ Row-gap

6.​ gap
1.​ Display:grid

a.​ It specifies the container as a grid container.

b.​ So that we can use all the grid properties.

2.​ Grid-template-columns:

a.​ It will specify [Link] columns along with the width of each column

B. As the width of the cell is defined here, It is not required to mention

again for the grid item.
 <!-- html code -->
/* CSS Code */
<html>
*​ {
<head>
margin: 0;
<title>Document</title>
padding: 0;
<link rel="stylesheet"
box-sizing: border-box;
href="./[Link]" />
}
</head>
section {
<body>
height: 500px;
<section>
width: 1000px;
background-color: bisque;
<div class="item1">item1</div>
border: solid;
<div class="item2">item2</div> color: white;
<div class="item3">item3</div> font-size: 25px;
display: grid;
<div class="item4">item4</div>
grid-template-columns: 200px 200px

</section> 200px 200px;

/* It will consider as 4
</body> columns each with 200px width */

</html> }
div {
background-color: chocolate;
border: dashed;
text-align: center;

[Link]-template-rows:
It will specify [Link] rows along with the height of
each column.

As the height of the cell is defined here, It is not

required to mention again for the grid item.

Ex:

/* CSS Code */

section {

display: grid;

grid-template-columns: 200px
200px 200px 200px;

/* It will consider as 4
columns each with 200px
width */

grid-template-rows:
150px 50px 150px 30px
100px;

/*​ It will consider as 5 rows with

widths => 1st - 150px , 2nd
-​ 50px , 3rd - 150px , 4th - 30px , 5th
- 100px*/
}
 We can pass the values for grid-template-rows and
grid-template-columns in multiple ways.

grid-template-columns: 200px 100px 150px 100px​ 80px 20px;

grid-template-columns: 200px 200px 200px 200px;

grid-template-columns: 150px 150px 150px 150px;

grid-template-columns: repeat(4, 180px);

grid-template-columns: repeat(4, auto);

grid-template-columns: 1fr 3fr 1fr;

grid-template-columns: repeat(4,1fr);

grid-template-rows: 150px 150px 100px;

grid-template-rows: 1fr 1fr 1fr;

grid-template-rows: 1fr 5fr 1fr;

grid-template-rows: 0.5fr 0.2fr 1fr 0.2fr;

4.​ gap:
 a.​ It will specify the space between the grid items.
b.​ It is the shorthand property of row-gap & column-gap.

​ section {

row-gap: 5px;

column-gap: 20px;

=====​ or ======

gap: 5px 20px;

}
Grid Items Properties are:

1.​ grid-row-start

2.​ grid-row-end

3.​ grid-column-start

4.​ grid-column-end

5.​ grid-row

6.​ grid-column

7.​ grid-area

1.​ grid-row:

a.​ It is a shorthand property of grid-row-start and grid-row-end.

b.​ Grid-row-start will specify where to start the row.

c.​ Grid-row-end will specify where to end the row.

​ Syntax: grid-row: grid-row-start/grid-row-end

​ Ex: grid-row: 1/5;

​ Ex:

|
 g.

*​ {

margin: 0;

padding: 0;

box-sizing: border-box;

section {

height: 500px;

width: 1000px;

background-color: bisque;
border: solid;
color: white;
font-size: 25px;

display: grid;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(4, auto);
}

div {
background-color: chocolate;
border: dashed;
text-align: center;
}
.item1 {
background-color: rgb(204, 138, 52);
grid-row-start: 1;
grid-row-end: 5;
======= or =======
grid-row: 1/5;
}

|
2.​ grid-column:

a.​ It is a shorthand property of grid-column-start and grid-column-end.

b.​ Grid-column-start will specify where to start the column.

c.​ Grid-column-end will specify where to end the column.

d.​ Syntax: grid-column: grid-column-start/grid-column-end

e.​ Ex: grid-column: 1/5;

f.​ Ex:

g.

.item1 {

background-color: rgb(204, 138, 52);

grid-column-start: 1;

grid-column-end: 5;

======= or =======

grid-column: 1/5;

|
 3.​ grid-area:

a.​ It is the shorthand property of grid-row-start , grid-column-start

, grid-row-end and grid-column-end.

b.​ Syntax: grid-row-start/grid-column-start/grid-row-end/grid-column-end.

​ Ex:

.item1 {

background-color: rgb(204, 138, 52);

grid-area: 1/1/3/5;

}
CSS Positions
The position property is used to control the placement of elements on a webpage.

Types of Positioning:

1.​ Static
2.​ Relative
3.​ Absolute
4.​ Fixed
5.​ Sticky

To control positioned elements, we use helper properties:

●​ top
●​ bottom
●​ left
●​ right

1. Static Positioning

●​ This is the default position of all elements.

●​ The element follows the normal document flow.
●​ Helper properties (top, bottom, left, right) do not affect static elements.

2. Relative Positioning

●​ Moves the element relative to its original position.

●​ The space originally occupied by the element remains empty. Other elements
do not move into its place.

Example:​
position: relative;
top: 20px; /* Moves the element 20px down from its original position */
left: 10px; /* Moves the element 10px to the right */

3. Absolute Positioning

●​ Moves the element relative to the nearest positioned ancestor (an element
with position: relative;, absolute;, or fixed;).
●​ If no positioned ancestor exists, it is positioned relative to the viewport.
●​ The element does not reserve space in the normal document flow—other
elements will take its place.
●​ If multiple elements have position: absolute;, they overlap each other.
●​ To control overlapping, use the z-index property.
Example:​
​
.parent {
position: relative;
}

.child {
position: absolute;
top: 50px;
left: 30px;
}

4. Fixed Positioning

●​ The element is positioned relative to the viewport and does not move even
when scrolling.
●​ Requires helper properties (top, bottom, left, right) to define its position.

Example:​
position: fixed;
top: 0;
left: 0;
width: 100%;
background: black;
color: white;

5. Sticky Positioning

●​ Acts like relative until the element reaches a certain scroll position, then it sticks
in place like fixed.

Example:​
position: sticky;
top: 50px; /* The element will stick at 50px from the top when scrolling */

Important Notes:

●​ If an element has relative, absolute, fixed, or sticky positioning, it is removed

from the normal document flow and floats on the z-axis.
●​ Do not use both top and bottom or left and right together, as it can lead to
unpredictable behavior.
Transform

Transform will change the state of an element like changing position ,

applying rotations , altering sizes, etc…

Syntax: transform: value;

Values: translateX() translateY() translate(
)
scaleX() scaleY() scale()
skewX() skexY() skew()
rotateX() rotateY() rotate()

Translate():

The translate() function moves an element along the x-axis and y-axis without affecting
its size or shape.

It is a shorthand for:

●​ translateX() → Moves the element along the x-axis.

●​ translateY() → Moves the element along the y-axis.

Ex: transform: translateX(200px);

transform: translateY(400px);

transform: translate(200px , 400px);

Scale():

The scale() function increases or decreases the size of an element based on the
provided scale value.
By default, the scale value is 1, meaning no change in size.

transform: scaleX(2); /* Doubles the width of the element */ transform:

scaleY(0.5);​ ​ /* Reduces the height to half */
transform: scale(2, 0.5); /* Doubles the width and halves the height */

Skew():

The skew() function tilts an element along the x-axis and y-axis, creating a
slanted effect.

Ex: transform: skewX(40deg);

transform: skewY(20deg);
transform: skew(40deg , 20deg)
Rotate():

The rotate() function rotates an element around its center point.

●​ Positive values rotate clockwise.

●​ Negative values rotate counterclockwise.

Ex: transform: rotateX(90deg);

transform: rotateY(180deg);

transform: rotate(90deg); // clockwise

transform: rotate(-90deg); // anticlockwise

Transition

The transition property allows CSS properties to change smoothly over a

specified duration, commonly used for hover effects.

It is a shorthand property of

Transition-property

Transition-duration

Transition-delay

Transition-timing-function

Transition-property:

Specifies which CSS property should be animated.

If not specified, it applies to all properties that change.

Transition-duration:

Defines how long the transition effect should take.

●​ Default value: 0s (no transition).

●​ Must be specified for the transition to work.

Transition-delay:

Delays the start of the transition effect.

 ●​ Default value: 0s (starts immediately).

Transition-timing-function:

Controls the speed curve of the transition.

Common values:

●​ ease-in → Starts slow, then speeds up.

●​ ease-out → Starts fast, then slows down.
●​ ease-in-out → Slow start and slow end.
●​ ease → Slow start, fast in the middle, slow end (default).
●​ linear → Constant speed throughout.

Example: Smooth Button Hover Effect

button {

background-color: blue;

color: white;

padding: 10px 20px;

border: none;

cursor: pointer;

transition: background-color 0.5s ease-in-out, transform 0.3s ease;

button:hover {

background-color: red;

transform: scale(1.1);

Animation

Animations will change the style of an element from one style to another style
to another style and so on.

Animation is a shorthand property of

 1.​ Animation-name
2.​ Animation-duration
3.​ Animation-delay
4.​ Animation-timing-function
5.​ Animation-direction
6.​ Animation-iteration-count

@keyframes rule
As we said, animation will change from one style to another and so on. To store all
these styles we have to use @keyframes rule.
Syntax:

@keyframes identifier {

0%{

// code

50%{

// code

}
100%{​

//CODE

}
}

Animation-name:

Defines the name of the animation, which must match an @keyframes identifier.

We can create @keyframes rules with different styles.

Animation-duration

Specifies how long the animation should run.

●​ Default: 0s (no animation).

●​ Must be set for animation to work.

Animation-delay:
 Defines how long the animation should wait before starting.

●​ Default: 0s (starts immediately).

Animation-timing-function:

It specifies the speed curve of animation.

We can assign the values like

ease-in → slow start

ease-out → slow end

ease-in-out → slow start and slow end

ease → slow start , fast , slow end

linear → same speed

Animation-direction:

Defines the direction in which the animation runs.

Values:

●​ normal → Runs forward (default).

●​ reverse → Runs backward.
●​ alternate → Runs forward, then backward.
●​ alternate-reverse → Runs backward, then forward.

Animation-iteration-count:

Specifies how many times the animation should repeat.

Values:

●​ Any number (e.g., 3 → Runs 3 times).

●​ infinite → Runs forever.

Example
@keyframes slide {
from {
transform: translateX(-100%);
opacity: 0;
 }
to {
transform: translateX(0);
opacity: 1;
}
}

.box {
width: 100px;
height: 100px;
background-color: blue;
animation: slide 2s ease-in-out 0.5s infinite alternate;
}
Transform

Transform will change the state of an element like changing position ,

applying rotations , altering sizes, etc…

Syntax: transform: value;

Values: translateX() translateY() translate(
)
scaleX() scaleY() scale()
skewX() skexY() skew()
rotateX() rotateY() rotate()

Translate():

The translate() function moves an element along the x-axis and y-axis without affecting
its size or shape.

It is a shorthand for:

●​ translateX() → Moves the element along the x-axis.

●​ translateY() → Moves the element along the y-axis.

Ex: transform: translateX(200px);

transform: translateY(400px);

transform: translate(200px , 400px);

Scale():

The scale() function increases or decreases the size of an element based on the
provided scale value.
By default, the scale value is 1, meaning no change in size.

transform: scaleX(2); /* Doubles the width of the element */ transform:

scaleY(0.5);​ ​ /* Reduces the height to half */
transform: scale(2, 0.5); /* Doubles the width and halves the height */

Skew():

The skew() function tilts an element along the x-axis and y-axis, creating a
slanted effect.

Ex: transform: skewX(40deg);

transform: skewY(20deg);
transform: skew(40deg , 20deg)
Rotate():

The rotate() function rotates an element around its center point.

●​ Positive values rotate clockwise.

●​ Negative values rotate counterclockwise.

Ex: transform: rotateX(90deg);

transform: rotateY(180deg);

transform: rotate(90deg); // clockwise

transform: rotate(-90deg); // anticlockwise

Transition

The transition property allows CSS properties to change smoothly over a

specified duration, commonly used for hover effects.

It is a shorthand property of

Transition-property

Transition-duration

Transition-delay

Transition-timing-function

Transition-property:

Specifies which CSS property should be animated.

If not specified, it applies to all properties that change.

Transition-duration:

Defines how long the transition effect should take.

●​ Default value: 0s (no transition).

●​ Must be specified for the transition to work.

Transition-delay:

Delays the start of the transition effect.

 ●​ Default value: 0s (starts immediately).

Transition-timing-function:

Controls the speed curve of the transition.

Common values:

●​ ease-in → Starts slow, then speeds up.

●​ ease-out → Starts fast, then slows down.
●​ ease-in-out → Slow start and slow end.
●​ ease → Slow start, fast in the middle, slow end (default).
●​ linear → Constant speed throughout.

Example: Smooth Button Hover Effect

button {

background-color: blue;

color: white;

padding: 10px 20px;

border: none;

cursor: pointer;

transition: background-color 0.5s ease-in-out, transform 0.3s ease;

button:hover {

background-color: red;

transform: scale(1.1);

Animation

Animations will change the style of an element from one style to another style
to another style and so on.

Animation is a shorthand property of

 1.​ Animation-name
2.​ Animation-duration
3.​ Animation-delay
4.​ Animation-timing-function
5.​ Animation-direction
6.​ Animation-iteration-count

@keyframes rule
As we said, animation will change from one style to another and so on. To store all
these styles we have to use @keyframes rule.
Syntax:

@keyframes identifier {

0%{

// code

50%{

// code

}
100%{​

//CODE

}
}

Animation-name:

Defines the name of the animation, which must match an @keyframes identifier.

We can create @keyframes rules with different styles.

Animation-duration

Specifies how long the animation should run.

●​ Default: 0s (no animation).

●​ Must be set for animation to work.

Animation-delay:
 Defines how long the animation should wait before starting.

●​ Default: 0s (starts immediately).

Animation-timing-function:

It specifies the speed curve of animation.

We can assign the values like

ease-in → slow start

ease-out → slow end

ease-in-out → slow start and slow end

ease → slow start , fast , slow end

linear → same speed

Animation-direction:

Defines the direction in which the animation runs.

Values:

●​ normal → Runs forward (default).

●​ reverse → Runs backward.
●​ alternate → Runs forward, then backward.
●​ alternate-reverse → Runs backward, then forward.

Animation-iteration-count:

Specifies how many times the animation should repeat.

Values:

●​ Any number (e.g., 3 → Runs 3 times).

●​ infinite → Runs forever.

Example
@keyframes slide {
from {
transform: translateX(-100%);
opacity: 0;
 }
to {
transform: translateX(0);
opacity: 1;
}
}

.box {
width: 100px;
height: 100px;
background-color: blue;
animation: slide 2s ease-in-out 0.5s infinite alternate;
}

CSS Units
In CSS, units specify the length of an element or the size of its content.

Units are categorized into two types:

1. Absolute Units

These units are static and do not depend on any other values.

Examples of Absolute Units:

●​ mm → Millimeters
●​ cm → Centimeters
●​ in → Inches
●​ px → Pixels

2. Relative Units

These units are dynamic and depend on other values.

Examples of Relative Units:

●​ vw → Depends on viewport width

●​ vh → Depends on viewport height
●​ % → Depends on the parent element
●​ rem → Depends on the root element (<html>)
●​ em → Depends on the parent element
CSS Responsiveness
To achieve responsiveness, we mainly use the @media rule.

@media Rule
The @media rule provides features to apply styles based on conditions such as screen
size, device type, or orientation.

Syntax:

@media mediaType mediaOperator mediaFeatures {

/* CSS Code */

Key Components of @media Rule

1. Media Type

Specifies the type of view mode.

Values:

●​ all → Default, applies to all media types

●​ screen → Applies only to screen displays
●​ print → Applies to print previews

2. Media Operator

Combines multiple media features.

Values:

●​ and → Checks if all conditions are true

●​ or → Checks if at least one condition is true
●​ not → Negates a condition

3. Media Features

Defines breakpoints based on screen properties.

Examples:

●​ min-width → Minimum width of the screen

●​ max-width → Maximum width of the screen
●​ width → Exact width of the screen
 ●​ min-height → Minimum height of the screen
●​ max-height → Maximum height of the screen
●​ height → Exact height of the screen
●​ orientation → Can be landscape or portrait

Example:
@media screen and (min-width: 0px) and (max-width: 400px) {

h1::after {

content: "Mobile View";

body {

background-color: teal;

@media screen and (min-width: 400px) and (max-width: 800px) {

h1::after {

content: "Tablet View";

body {

background-color: cadetblue;

Extra Things

overflow Property

The overflow property in CSS controls how content is displayed when it exceeds the size
of its container. It is commonly used to manage scrollbars and prevent content
overflow.
Syntax

selector {
overflow: value;
}

Values of overflow Property

1.​ visible (Default)

○​ Content overflows the container and is visible outside.

Example:​
​
div {
width: 200px;
height: 100px;
overflow: visible;
}

○​ Content may exceed the container, leading to design issues.

2.​ hidden
○​ Hides any content that overflows the container. No scrollbars appear.

Example:​
​
div {
width: 200px;
height: 100px;
overflow: hidden;
}

○​ Useful for preventing content from spilling out.

3.​ scroll
○​ Adds scrollbars (horizontal and vertical) even if the content fits.

Example:​
​
div {
width: 200px;
height: 100px;
overflow: scroll;
}

○​ Ensures users can scroll to see hidden content.

4.​ auto
○​ Adds scrollbars only if needed (when content overflows).
 Example:​
​
div {
width: 200px;
height: 100px;
overflow: auto;
}

○​ Better for usability as it avoids unnecessary scrollbars.

Shorthand Usage (overflow-x and overflow-y)

The overflow property can be applied separately for horizontal (overflow-x) and
vertical (overflow-y) scrolling.

div {
overflow-x: scroll; /* Horizontal scrollbar */
overflow-y: hidden; /* No vertical overflow */
}

CSS Variables (Custom Properties)

CSS variables, also known as custom properties, allow you to store values in
reusable variables, making styles easier to maintain and update.

Declaring and Using CSS Variables

1. Declaring a Variable

CSS variables are defined inside a :root selector (or any other selector) using -- (double hyphen)
before the variable name.

:root {
--primary-color: blue;
--font-size: 16px;
}

2. Using a Variable

Use the var() function to access the variable.

h1 {
color: var(--primary-color);
font-size: var(--font-size);
}
Task To be Done
Simple
1 Google Homepage Clone vanilla css
2. Instagram login page tailwind css

medium
1. Spotify landing page
2. YouTube Video Page Clone
3. Airbnb
vanilla css

Hard
1. Apple
2. Netflix
tailwind