0% found this document useful (0 votes)

79 views

Styles Introduction

The document discusses different ways to define styles in HTML - inline styles, embedded styles, and external stylesheets. It provides examples and explanations of each approach. Inline styles are defined directly in elements, embedded styles are defined within <style> tags in the head/body, and external stylesheets are linked via <link> tags. The document also covers CSS selectors like type, ID, class selectors and their priority. Additional topics include media types, minification, CDNs, and pseudo-classes.

Uploaded by

aamir khan

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

79 views

Styles Introduction

Uploaded by

aamir khan

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 117

Styles Introduction

Styles with HTML

=============

- Styles are attributes defined for HTML elements to make them more interactive and
responsive.

<h2 align="left|center|right|justify"> </h2>

- Styles can be defined for HTML elements in 3 ways

1. Inline Styles
2. Embedded Styles
3. External Style Sheet
[CSS - Cascade Style Sheet]

Inline Styles:
==========
- Styles are defined for every element individually.

Syntax:
<h2 style="attribute:value; attribute:value">

- This technique is faster in rendering CSSOM [CSS Object Model]

- You can't extend styles easily.
- You can't re-use styles.
- When you want apply effects only for individual element and extensibility and reusability
not required then better use this technique.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
</head>
<body>
<h1 style="background-color: red;color:white; text-align: center;">HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
</html>

Embedded Styles:
==============
- Styles are defined for elements in a separate <style> container.
- Clean separation of design and effects.
- Easy to extend.
- Easy to reuse.
- They are slower that inline.

FAQ: Where to embed styles?

Ans : You can embed in <head> or <body> section.

FAQ: What is difference between styles in <head> and styles in <body>?

Ans: Styles in <head> section are intended to load into browser memory
and accessed when ever required.

Styles in <body> section are intended to load into page workspace

directly. [browser workspace].

Note: You can see developers writing styles outside HTML.

Styles outside HTML are faster. But abnormal in behaviour.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
h1 {
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>

<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
</html>

- You have to define the MIME type of styles when you embed in a page.

- You can define Media type for styles

FAQ: What are Media Types?

Ans: Media type is targetting styles to specific device, which includes
a) screen
b) print [printer]
c) speech

Syntax:
<style type="text/css" media="screen|print|speech">

</style>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style type="text/css" media="screen">
h1 {
background-color: blue;
color:white;
text-align: center;
}
</style>
<style type="text/css" media="print">
h1 {
background-color: black;
color:white;
text-align: left;
}
#js {
display: none;
}
</style>
</head>
<body>

<h1>HTML</h1>
<h1>CSS</h1>
<h1 id="js">JavaScript</h1>
</body>
</html>
Styles in External Files:
==================
- You can configure styles in a separate style sheet.
- Style sheet have extention ".css"
- Style sheet can cascade, so that you can access and use style across several pages.
- You can reuse across multiple pages.
- It increases the number of requests for page and also page load time.

Ex:
1. Goto "src/styles" folder
2. add a new file
effects.css
h1 {
background-color: green;
color:white;
text-align: center;
}
3. Link to your HTML page

<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<link rel="stylesheet" href="../src/styles/effects.css">
</head>
<body>

<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
</html>

Minification and Bundling

Selectors
CSS Styles and Selectors
External Files
.css
<link>

Syntax:
<link rel="stylesheet" href="path" type="text/css" media="print">

FAQ: What is CDN?

Ans:
-CDN is Content Delivery Network
-Style Sheets are kept in a repository server and accessed from
server directly.
-Style Sheets are not in local project.
-You can use for multiple projects.

Syntax:
<link rel="stylesheet" href="http://127.0.0.1/cdn/effects.css">

Minification
=========
- It is a coding technique used by developers to reduce the size of file.
- It is not ZIP or RAR, It is a coding technique.

Development Code:
if (condition )
{
statement_if_true;
}
else
{
statement_if_false;
}
Production Code: [Minified]
(condition) ? statement_if_true : statement_if_false;

- You can Minify the CSS files by using various software tools. You have to use the minified
files for production.

Ex:
1. Create a new CSS file
"effects.css"
h1 {
background-color: green;
color:white;
text-align: center;
}

2. Copy the CSS code and Paste in CSS Minifier [Online]

www.cssminifier.com

3. Click "Minify" button

4. It generates minified code, which you copy and paste in your project file
"effects.min.css"
h1{background-color:green;color:#fff;text-align:center}

5. You can link minified file to HTML page.

<link rel="stylesheet" href="../src/styles/effects.min.css">

Note: Always use the uncompressed file for "Development"

Always use the compressed file [minified] for "Production"

FAQ: Why we can't use minified file for development?

Ans: It is difficult to track errors.

FAQ: Can we edit minified file directly?

Ans: Yes. But not recommended.

Summary:
1. Inline
2. Embedded
3. External File

FAQ:
1. If effects are defined in external style sheet, embedded and inline, which effect will
apply to content?
A.
- If same effects are written then
Priority
1st Inline
2nd Embedded
3rd External file
- If different effects are written then all will apply

2. Can we link multiple stylesheets to page?

A. Yes.

3. Can we define multiple embedded styles?

A. Yes. Only the latest will effect if having same attributes.
Writing Style Attributes
=================
- Inline Styles are defined by using "style" attribute and value.

<h2 style="attribute:value; attribute:value">

- Embedded and External Styles

Selector
{
attribute:value;
attribute:value;
}

CSS Selector
==========
- Selector defines where to apply the given set of effects.
- The primary selectors used in CSS.
1. Type Selector
2. ID Selector
3. Class Selector

Type Selector:
- It uses the token name to apply effects.
- The effects are applied at every location where the tag is used.
- You can't ignore for any specific tag.

Syntax:
h1, p, div, span, table, td {
attribute: value;
}

ID Selector:
- Id selector is defined by using "#"
- It is accessed by using "id" attribute.
- You can apply only to the element your require.

Syntax:
#heading {

<h2 id="heading">
<div id="heading">
- Every element can have only one ID.
- You can't apply multiple categories of styles to one element.

Class Selector
===========
- It is defined by using "."
- It is accessed by using "class" attribute.
- Every element can implement multiple classes.

Syntax:
.class1-name { }
.class2-name { }

<h2 class="class1-name class2-name">

Selectors
Sudhakar Sharma
•
Yesterday
Primary Selectors
1. Type
2. ID
3. Class

FAQ: IF all selectors are defined for any specific element then what is the
priority?
Ans:
1st ID Selector
2nd Class Selector
3rd Type Selector

FAQ: How to group selectors?

Ans: Selectors can be grouped by using "," delimeter.

#name, p {
color:red;
}

.className, #id, p {

The effects are applied to all selectors defined.

- The CSS selectors are further classified into various groups based on their
behaviour.

1. Rational Selectors or Combinators

Child Selector
Decendent
Adjacent Sibling
General Sibling

Child Selector:
It applies effects to all child elements present within the specific parent.

parent child {
}
It will apply effects for element present at any level of hierarchy.

Decendent Selector:
It applies effects only to direct child elements. Not to all levels of hierarchy.

parent > child {

Adjacent Siblings
It defines effects to adjacent element, i.e the element that comes after the specified
element. [Only to First One]

element1 + element2
{
}

General Siblings
It defines effects to all adjacent elements.

element1 ~ element2
{
}

Note: Rational selectors and combinators are based on parent and child or element
and its adjacent.

2. Attribute Selectors
These are used to apply effects based on the attribute defined for element.

element[attribute=value]
{
}

Attribute selector can apply effect without the value defined.

element [ attribute ] p [id ] { }

{
}

Attribute selector can apply effect by using conditions

[attribute=value] attribute exactly matches the value.

[Equal to ]
[attribute^=value] attribute starts with specified value.

[attribute$=value] attribute ends with specified value.

[attribute~=value] attribute value at any location individually.

[attribute|=value] attribute value starts with and separated

with "-" delimeter.

3. Pseudo Dynamic Classes

pseudo : It is not effecting exactly the name it reffering to.

Link => <a>

dynamic : It can change according to state and situation.

class : It is a program template that comprises of

sample logic and data, which you can implement
and customize according to requirements.

:link : ":" is implementing operator

It defines effect for normal anchor.

:visited : It defines effects for visited link

:active : It defines effects for active link

:hover : It defines effects on mouse over of any element.

Styles Examples
All Examples of selectors are in Style document uploaded already. Please check.
::placeholder
::selection defines effects for selected text in page.
::before for element that occurs before the current element
::after for element that occurs after the current element
::first-letter effect only for first letter in container. [DropCap]
::first-line effect only for first line in container.
:Empty to configure effects where container is empty.
Not even a blank space.  
:root To root level of document. [body]
*{} Universal Selector, It is similar to root.
:lang Language selector applies effects based on
the language defined for contents in page.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
p::selection {
background-color: yellow;
}
</style>
</head>
<body>
<p>
Your use of this software is subject to the terms and conditions of the license agreement
by which you acquired this software. If you are a volume license customer, use of this
software is subject to your volume license agreement. You may not use this software if you
have not validly acquired a license for the software from Microsoft or its licensed distributors.
</p>
</body>
</html>

EX:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
p::selection {
background-color: yellow;
}
</style>
</head>
<body>
<p>
Your use of this software is subject to the terms and conditions of the license agreement
by which you acquired this software. If you are a volume license customer, use of this
software is subject to your volume license agreement. You may not use this software if you
have not validly acquired a license for the software from Microsoft or its licensed distributors.
</p>
</body>
</html>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
p::first-letter {
font-size: 30px;
font-weight: bold;
font-family: Arial;
float:left;
}
p::first-line {
color:blue;
}
</style>
</head>
<body>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.</p>
</body>
</html>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
td:empty {
background-color: lightcoral;
}
</style>
</head>
<body>
<table border="1" width="400">
<tr>
<th>Name</td>
<th>Price</td>
</tr>
<tr>
<td>TV</td>
<td>60000.44</td>
</tr>
<tr>
<td>Mobile</td>
<td></td>
</tr>
</table>
</body>
</html>

Summary:
1. How to define styles in HTML page?
2. What is Minification?
3. How to target various media devices?
4. Rules of CSS
5. Selectors

CSS Colors
=========
- CSS allows colors by
a) Color Name
b) Hexa decimal code
c) rgb()
d) rgba()
e) hsl()

Color Name: Any specified color name

color: red;

Hexa Decimal: Hexa code uses 3 & 6 char code with "#"
#RGB
#RRGGBB
Range of color : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
0 = dark
f = bright
rgba() : RGB method with color range from 0 to 255.
Alpha range from 0 to 1.

color : rgb(0,0,255,0.4);

rgb() : RGB method without alpha.

hsl() : hue, saturation and lighting. Range from 0 to 255

Gradient Colors
- A combination of multiple colors with specific orentation.
a) linear gradient
b) radial gradient

Note: You can apply gradients only as image, not as a color value.

Syntax:
{
background-image: linear-gradient(direction, colors);
}

Similar for radial, which is from center.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
width: 600px;
height: 300px;
border:2px solid black;
background-image: linear-gradient(to top right, rgb(243, 170, 170), yellow 30%,
green);
}
</style>
</head>
<body>
<div id="container">

</div>
</body>
</html>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
body {
background-image: url("images/netflixback.jpg");
}
#container {
height: 700px;
width: 100%;
background-image: radial-gradient(rgba(255,255,255,0.3),rgba(0,0,0,1));
}
</style>
</head>
<body>
<div id="container">

</div>
</body>
</html>
CSS Inheritance and Box Model
CSS Units
========
1. Absolute Units
px - Pixel for screen
in - Media is Printer
cm
pt
% - Responsive 50%

2. Relative Units
em - parent element
rem - root element

- Absolute unit is with regard to the value you defined.

- Relative unit is with regard to the parent element or root element.

Syntax:
#container {
font-size: 30px; // absolute
}
p{
font-size: 0.5em; // relative to container [15px]
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
font-size: 30px;
}
p{
font-size: 0.5em;
}
</style>
</head>
<body>
<div id="container">
Web Techologies
<p>Styles in HTML</p>
</div>
</body>
</html>

CSS Inheritance
==============

- CSS inheritance defines reusability of effects. [Pseudo]

- You can implement inheritance or reusability like features in CSS with the help of "sass or
less".
- The inheritance attributes in CSS are
a) Inherit
b) Initial
c) Unset

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
font-size: 30px;
font-family: Arial;
color:red;
border:2px solid red;
padding:20px;
}
p{
font-size: 0.5em;
color:initial;
}
</style>
</head>
<body>
<div id="container">
Web Techologies
<p>Styles in HTML</p>
</div>
</body>
</html>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
font-size: 30px;
font-family: Arial;
color:red;
border:2px solid red;
padding:20px;
}
p{
color: initial;
font-size: initial;
border:inherit;
padding: inherit;
}
</style>
</head>
<body>
<div id="container">
Web Techologies
<p>Styles in HTML</p>
</div>
</body>
</html>

Basic CSS Summary:

- Different ways of applying styles.
- Selectors
- Units
- Colors
- Inheritance
- Rules

CSS Box Model

============
1. Margins
2. Padding
3. Border
4. Width
5. Height

Margin: It sets space between the page and container border.

margin : short hand [all margins]
margin-left :
margin-right :
margin-top :
margin-bottom :
Syntax:
#container {
margin : top bottom left right;
}

Padding: It sets space between the border and content inside container.

padding
padding-left
padding-right
padding-top
padding-bottom

width : It defines width for container

height : It defines height for container

border : It specifies the border

border : short hand [size, style, color]
border: 2px solid red;
border-size
border-style
border-color

border-left-size
border-left-style
border-left-color
border-left : short hand [size, style, color]

similarly right, top and bottom.

border-radius : curved borders

border-image : sets border image.

Syntax: Border Image

border-image : url("path") style offsetSize;

border-image : url("border.png") stretch 80;

offsetSize is distance between border and image.

Note : You can't define border-image without border style.

EX:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
margin: 20px;
text-align: justify;
padding: 20px;
border: 30px solid transparent;
border-image: url("images/border.png") stretch 80;
}
</style>
</head>
<body>
<div id="container">
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
</div>
</body>
</html>

Positions
Display
CSS Positions and Inde
CSS Box Model
- Border
- Padding
- Margin
- Width
- Height

CSS Positions
===========
1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

Static : It is the default position of element.

Element is kept according to document flow.
It can't be removed from its existing position.
It is not effected by top, left, right, bottom positions.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
border:1px solid black;
}
#offer {
width: 80px;
border:1px dotted red;
position: static;
right: 100px;
}
</style>
</head>
<body>
<div id="container">
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
<div id="offer">
50% OFF
</div>
</div>
</body>
</html>

Absolute: It removes element from normal flow of document.

You keep its position left, right, top or bottom of page.
It is fixed relative to content in page.
Hence when you scroll content, the element will scroll according
to the position.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
border:1px solid black;
}
#offer {
width: 80px;
border:1px dotted red;
position: absolute;
right: 10px;
top: 50px;
background-color: red;
color:white;
}
</style>
</head>
<body>
<div id="container">
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
<div id="offer">
50% OFF
</div>
</div>
</body>
</html>

Fixed: It removes element from normal flow of document.

You can keep its position left, right, top or bottom.
It is fixed relative to page.
Scrolling is locked.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
border:1px solid black;
}
#offer {
width: 80px;
border:1px dotted red;
position: fixed;
right: 10px;
top: 50px;
background-color: red;
color:white;
}
</style>
</head>
<body>
<div id="container">
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
<div id="offer">
50% OFF
</div>
</div>
</body>
</html>

4. Sticky : It is the position where element is kept according to normal

flow of document.
It is not effected by left, right, top and bottom.
It can stick to page after reaching the specified position.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container {
border:1px solid black;
}
#offer {
width: 80px;
border:1px dotted red;
position: sticky;
right: 10px;
top: 50px;
background-color: red;
color:white;
}
</style>
</head>
<body>
<div id="container">
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
<div id="offer">
50% OFF
</div>
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.

</div>
</body>
</html>

5. Relative : It keeps element position relative to its parent.

It is according to normal flow of document.
It is effected in position based on its parent element.

Note: Specifying left, right, top and bottom will be relative to parent content not to page.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>

div {
border:1px solid red;
}
#parent {
height: 300px;
width: 600px;
position: static;
margin-left: 200px;
}
#child {
height: 100px;
width: 150px;
position: relative;
left: 50px;
}
</style>
</head>
<body>
<div id="parent">
parent container
<div id="child">
child container
</div>
</div>
</body>
</html>

CSS Z-Index
==========
- Z Index is used to arrange elements stack.
- Stack overlaps elements.
- You can bring forward or send backward by using z-index
- It uses the values starting for 0 level.

0 - absolute back
1,2,3,4.. - from back to front

Syntax:
element1 {
z-index: 0;
}
element2 {
z-index:2;
}
element3 {
z-index:1;
}

CSS Float
========
- It controls the element position directly relative to adjacent elements by keep float ing to left
or right.
- It can also control the floating of content by using "clear", which clears the float attribute.
[As float attribute continous for rest of adjacent elements].
- Clear is defined by using dynamic property.

Syntax:
element {
float : left;
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#kids {
float: right;
margin-left: 100px;
}
div {
background-color: black;
height: 400px;
color:white;
font-family: Arial;
padding: 20px;
}
h1,h2 {
padding-top: 30px;
padding-right: 20px;
}
</style>
</head>
<body>
<div>
<img id="kids" src="../public/images/kids.png" width="200" height="200">
<div id="title">
<h1>Create profiles for children.</h1>
<h4>Send children on adventures with their favourite characters in a space made
just for them—free with your membership.</h4>
</div>
</div>

</body>
</html>
Display
- flex
- inline
- grid
Display CSS
CSS Clear
- It is used to clear floating attribute that spans after specified elements.
- You can configure clear : both, left, right

Syntax:
element1 {
float : left;
}
element2 {
clear: left;
}

CSS Display
=========
- It controls the display style of elements
flex
grid
inline
block
none
- display:none will hide element in page.
- display:block will display elements in block style [new line]
- display:inline will display elements in same line. [side-by-side]
- display:flex will display elements inline with fluid container.
- display:grid will display elements in grid style, which contains
rows and columns.

FAQ: What is difference between inline and flex?

Ans:
- inline is used for element
- flex is used for container that contains elements.
- flex also allows to control the alignment and wrapping of elements.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
#container div {
display: inline;
}
</style>
</head>
<body>
<div id="container">
<div>
<input type="text" placeholder="User Name">
</div>
<div>
<input type="password" placeholder="Password">
</div>
<div>
<button>Register</button>
</div>
</div>
</body>
</html>

- Display Flex uses various flex attributes

a) flex-wrap
b) flex-direction
c) justify-content
d) align-items

flex-wrap : It control the wrapping of elements to next line or

inline. [wrap | no-wrap]

You have to use wrap, when you don't want the

size of element to change.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
.container div {
border : 1px solid black;
padding: 5px;
width: 100px;
height: 100px;
}
.container {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
<div>Box-6</div>
<div>Box-7</div>
<div>Box-8</div>
<div>Box-9</div>
<div>Box-10</div>
<div>Box-11</div>
<div>Box-12</div>
<div>Box-13</div>
<div>Box-14</div>
</div>
</body>
</html>

- Flex-direction : It controls the orientation of contents, which can

be row, column or reverse.
[row-reverse, column-reverse]

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
.container div {
border : 1px solid black;
padding: 5px;
width: 100px;
height: 100px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
</style>
</head>
<body>
<div class="container">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
<div>Box-6</div>
<div>Box-7</div>
<div>Box-8</div>
<div>Box-9</div>
<div>Box-10</div>
<div>Box-11</div>
<div>Box-12</div>
<div>Box-13</div>
<div>Box-14</div>
<div>You got a mail</div>
</div>
</body>
</html>

- Justify-Content : It controls horizontal alignment of content in flex-box

[space-between, space-around, etc..]

- Align-Items : It is vertical alignment. You can define top, center or

bottom.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
.container div {
border : 1px solid black;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 700px;
border:2px solid red;
align-items: center;
}
nav {
background-color: black;
color:white;
padding: 10px;
display: flex;
justify-content: space-between;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
<nav>
<div>Amazon Shopping</div>
<div>
<input type="text" size="40">
<button><span class="bi bi-search"></span></button>
</div>
<div>
<select>
<option>Country</option>
<option>India</option>
<option>US</option>
</select>
<button>Signin</button>
</div>
</nav>
<div class="container">
<div>Box-1</div>
<div>Box-2</div>
<div>Box-3</div>
<div>Box-4</div>
<div>Box-5</div>
<div>Box-6</div>
<div>Box-7</div>
<div>Box-8</div>
<div>Box-9</div>
<div>Box-10</div>
<div>Box-11</div>
<div>Box-12</div>
<div>Box-13</div>
<div>Box-14</div>
<div>You got a mail</div>
</div>
</body>
</html>
Ex: Horizontal and Vertical Center
{
display : flex;
justify-content:center;
align-items:center; [requires height]
}

<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
body {
background-color: black;
color:white;
font-family: Arial;
background-attachment: fixed;
}
.main-content {
width: 550px;
text-align: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
}
input, button {
height: 40px;
}
button {
background-color: red;
color:white;
border:none;
}
.opaque {
background-color: rgba(0,0,0,0.6);
margin-left: -30px;
margin-right: -30px;
margin-top: -30px;
}
</style>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body background="../public/images/netflixback.jpg">
<div class="opaque">
<div class="container">
<div class="main-content">
<h1> Unlimited movies, TV shows and more.</h1>
<h2> Watch anywhere. Cancel anytime.</h2>
<p>Ready to watch? Enter your email to create or restart your membership.</p>
<p>
<input type="email" size="50" placeholder="Your email address">
<button>Get Started <span class="bi bi-chevron-right"></span> </button>
</p>
</div>
</div>
</div>
</body>
</html>

Display Grid
==========
- Display grid allows to arrange your content into specific row and column.
- Display grid is a fluid grid that splits content using
"grid-template-columns"
- You can arrange content into specific row and column by using
a) grid-row
b) grid-column

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
.container {
display: grid;
grid-template-columns: 3fr 6fr 3fr;
}
header, footer {
background-color: red;
color:white;
}
nav {
background-color: yellow;
}
aside {
background-color: blue;
color:white;
}
header {
grid-row: 1;
grid-column: 1/4;
}
section {
grid-row: 2;
grid-column: 1/4;
height: 300px;
display: grid;
}
footer {
grid-row: 3;
grid-column: 1/4;
}
aside {
grid-row: 2;
grid-column: 3;
}
main {
grid-row: 2;
grid-column: 2;
}
nav {
grid-row: 2;
grid-column: 1;
}
</style>
</head>
<body>
<div class="container">
<header>
Amazon Shopping
</header>
<section>
<nav>
<ol>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ol>
</nav>
<main>
shopping main content
</main>
<aside>
ads..
</aside>
</section>
<footer>
© copyright 2022
</footer>
</div>
</body>
</html>
CSS Text Effects and Backgrounds
Display
- inline
- none
- block
- grid
- flex

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
header, footer, section {
border:1px solid black;
}
article {
width: 80px;
background-color: red;
color:white;
grid-row: 1;
grid-column: 1;
}
.container {
display: grid;
grid-template-columns: 3fr 6fr 3fr;
}
header {
grid-row: 1;
grid-column: 2/4;
}
section {
grid-row :2;
grid-column: 2/4;
}
footer {
grid-row:3;
grid-column: 2/4;
}
</style>
</head>
<body>
<div class="container">
<header>
Header
</header>
<section>
<nav>
navigation
</nav>
<main>
main
</main>
<aside>
ads..
</aside>
</section>
<footer>
footer
</footer>
<article>
70% Off
</article>
</div>
</body>
</html>

CSS Columns
===========
- Columns are used to arrange contineous content from left to right.
- The contents will span automatically to next column.

columns : specifies number of columns.

column-width : width of column
column-gap : space between columns
column-rule : separator line [border options]

Note: Columns always adjust according to content and width. Hence if your defined
gap, better not to define width.

Syntax:
container {
columns : 4;
column-gap: 30px;
column-rule: 2px solid red;
}

- Columns allow merging of content that can span into all columns. You can't define
specific set of columns.
Syntax:
h2 {
column-span: all;
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
header {
font-size: 60px;
font-weight: bold;
text-align: center;
}
p{
text-align: justify;
}
.container {
columns: 6;
column-gap: 30px;
column-rule: 2px dotted black;
}
h2 {
column-span: all;
background-color: black;
color:white;
text-align: center;
}
</style>
</head>
<body>
<header>
THE HINDU
</header>
<div class="container">
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>

<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.</p>
</div>
</body>
</html>

CSS Background
=============
- background : short hand for all attributes
- background-color : sets specific color
- background-image : sets background image using "url()"
- background-size : sets the width and height of image.
[in pixels, percent, cover, contain]
- background-position : sets the position along x and y axis.
- background-attachment : controls the scrolling of background
[fixed | scroll]
- background-repeat : It controls repeating of image
- repeat
- no-repeat
- repeat-x
- repeat-y

Syntax:
background-position: left | center | right -- horizontal
top | center | bottom -- vertical

top left, top center, top right

center left, center center, center right
bottom left, bottom center, bottom right

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
body {
background-image: url("../public/images/netflixback.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 600px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>

</div>
</body>
</html>

FAQ: Can we define multiple background images?

Ans : Yes. But requires correct combination of attributes and values.

Syntax:
body {
background-image: url(), url();
background-position: firstImage, secondImage;
background-repeat : firstImage, secondImage;
background-size : firstImage, secondImage;
background-attachment: firstImage, secondImage;
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
body {
background-image: url("../public/images/shoe.jpg"),
url("../public//images/border.png");
background-size: 200px 200px, 200px 200px;
background-repeat: no-repeat, repeat;
background-position: center center;
height: 500px;
background-attachment:fixed, scroll;
}
</style>
</head>
<body>
<div class="container">
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
</div>
</body>
</html>

FAQ: Can we change background image dynamically?

Ans: Yes. By using media attributes.

Syntax:
@media screen and (orientation:landscape)
{
body {
}
}
@media screen and (orientation:portrait)
{
body {
}
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
@media screen and (orientation:landscape) {
body {
background-image: url("../public/images/netflixback.jpg");
background-size: cover;
background-repeat: repeat-x;
}
}
@media screen and (orientation:portrait) {
body {
background-image: url("../public/images/banner.png");
background-size: cover;
background-repeat: repeat-y;
}
}
</style>
</head>
<body>
<div class="container">

</div>
</body>
</html>

CSS Text Effects

=============
Font Effects
font-family : Font Name
font-weight : Bold
font-style : Italic
font-variant : Capitalization
font-size : Size

FAQ: What are web safe fonts?

Ans: sans-serif, serif, monspace

FAQ: How to change font size relative to its parent?

Ans : By using relative units. [em, rem]

FAQ: What is difference between font-variant and text-transform?

Ans : Variant applies capitalization without changing the size.
Transform changes the size.
Transform allows, sentence and title case.
Variant applies only "all caps"

Text Effects:
CSS 2D and 3D
Animations

Bootstrap
CSS Text and 2D
CSS Fonts
font-family
font-size
font-weight
font-style
font-variant

CSS Text Effects

=============
text-decoration : sets underline, overline etc.
text-align : sets left, center, right etc.
text-transform : changes capitalization uppercase, title etc.
text-shadow : sets shadow for text.

text-decoration
- style : dotted, dashed, wavy etc..
- size : thickness
- color : any color
- type : underline, overline, linethrough
Syntax:
h2 {
text-decoration: underline wavy 20px red;
}

text-align
- center, left, right, justify
- horizontal alignment

Syntax:
h2 {
text-align :center;
}

text-transform:
- uppercase, lowercase, capitalize

Syntax:
h2{
text-transform : uppercase;
}

text-shadow:
- it is similar to box shadow.
- 4 values [horizontal, vertical, blur, color]
Syntax:
h2 {
text-shadow: 3px 3px 4px red;
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
h1 {
text-align: center;
font-size: 120px;
text-transform: uppercase;
text-shadow: 10px 5px 8px black;
color:yellow;
}
</style>
</head>
<body>
<h1>welcome to css</h1>
</body>
</html>

CSS Spacing
==========
letter-spacing set space between chars
word-spacing set space between words
line-height set space between line
word-break sets word break for lengthy words in container.
white-space control the wrapping of text
text-overflow controls the overflow of text in container.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
h1 {
text-align: center;
font-size: 80px;
text-transform: uppercase;
text-shadow: 10px 5px 8px black;
color:yellow;
word-spacing: 50px;
letter-spacing: 30px;
}
p{
line-height: 50px;
}
</style>
</head>
<body>
<h1>welcome to css</h1>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license
customer, use of this software is subject to your volume license agreement. You may
not use this software if you have not validly acquired a license for the software from
Microsoft or its licensed distributors.
</p>
</body>
</html>

word-break : It can keep the lengthy words without break

It can break all words in container.

Syntax
p{
word-break : break-all;
}

white-space - will control the wrapping of text

overflow - will control the overflow of text in container
text-overflow - wil define how to display the overflow text i.e with ellipsis

Syntax:
p{
border: 2px solid black;
width : 245px;
height: 50px;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}

CSS 2D Transforms
===============
- Transform is the process of changing from existing state of element to a new state.
- CSS can transform element
a) position
b) size
c) orientation
- CSS 2D transform allows only 2-dimensions i.e x-axis and y-axis.

- Browser Engine have difficulty in understanding transformation of elements, hence

you need some plugin's according to browser.

Note: "Plugin is small set of software tools that provide additional functionality to
existing application".

transform : attributes..

Browser Engine Puglin Browsers

-----------------------------------------------------------------------------------
webkit chrome, edge, opera
moz firefox
ms internet explorer
o opera

transform
webkit-transform
moz-transform
ms-transform
o-transform

CSS Transform comprises of following method

a) translate()
b) scale()
c) rotate()
d) skew()

translate method changes the element position

-translate() : it can move along x and y axis.
-translateX() : it can move along x
-translateY() : it can move along y

Syntax:
transform : translate(200px, 100px);
transform : translateX(200px);
Plugins:
webkit-transform: translate(200px, 100px);
moz-transform:translate(200px, 100px);
ms-transform:translate(200px, 100px);

Note: Transformation takes just a fraction of milli seconds, you can control the
transformation time by using "transition" attribute.

transition-duration : time taken to complete transformation.

Browser Engine
- Webkit
- Gecko
- Chromium
- Chakra

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
.box {
width: 50px;
height: 50px;
border:2px solid red;
transition-duration: 5s;
}
.box:hover {
transform: translate(200px, 100px);
-webkit-transform: translate(200px, 100px);
-moz-transform: translate(200px, 100px);
transition-duration: 2s;
}
</style>
</head>
<body>
<div class="box">
<img src="../public/images/speaker.jpg" width="50" height="50">
</div>
</body>
</html>

scale() is used to change the size of element.

- scale() : both width and height
- scaleX() : only width
- scaleY() : only height
scale value is defined in points
1 = 100 %
2 = 200 %

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
.box {
width: 150px;
height: 150px;
border:2px solid red;
transition-duration: 5s;
}
.box:hover {
transform: scale(2.5, 1.5);
transition-duration: 2s;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="../public/images/speaker.jpg" width="150" height="150">
</div>
</div>
</body>
</html>
CSS 3D
Sudhakar Sharma
•
Yesterday
CSS 2D Transitions
- translate()
translateX()
translateY()

- scale()
- scaleX()
- scaleY()

rotate()
- Changes the orientation of element by specified angle.

rotate()
rotateX()
rotateY()

Sytax:
rotate(60deg) clockwise
rotate(-60deg) counter clockwise

skew()
- It is used to tilt image by specified angle.

skew()
skewX()
skewY()

Syntax:
skew(60deg)
skew(-60deg)

CSS 3D Transform

- Transforms element in 3 dimensional effects.

- All options are similar to 2D transform
- 3 Dimension comprises of additional "z-axis".
- 3D methods are

translate3d()
translateX()
translateY()
translateZ()

scale3d()
rotate3d()
skew3d()

Syntax:
element {
transform: scale3d(x, y, z);
}

element {
transform: scale3d(1.5, 0, 0.5);
}

CSS Transition
============
- Transition comprises of animation timing and effects.

transition short hand for all effects and timings

transition-duration total duration of animation.
transition-delay it defines the delay time to start animation.
transition-property It defines the element property that uses
transition timing.
transition-timining-function : Applies pre-defined animations.
ease-in
ease-out
block() etc..

Syntax:
element {
width: 800px;
transition-duration: 4s;
transition-delay:2s;
transtion-property: width;
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
.container {
width: 100px;
height: 100px;
background-color: red;
transition-duration: 2s;
transition-property: width;
}
.container:hover {
width: 800px;
background-color: yellow;
transition-duration: 2s;
transition-property: width;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>

Predefined Animations

Syntax:
element {
transition-timing-function: steps(3);
}
element:hover {
transition-timing-function: ease-in;
}

FAQ: How to create custom animations in CSS?

Ans: By using "Keyframes" and aimation properties.
a) @keyframe
b) animation
- duration
- delay
- property
- timing-function

CSS Animations
============
CSS Animations
Sudhakar Sharma
•
5:35 PM
CSS Keyframes
- Animation is configured with frames.
- Static frame comprises of object without any change in position or size.
- Keyframe comprises of object with change in position or size.
- CSS provides "@keyframes { }" for configuring tweening animation.
- Tweening is the process of specifying effects at regular frame intervals, the other frames are
configured automatically.
- Tween contains initial postion, final position and any specified position.

Syntax:
@keyframes referenceName
{
from { initial effects }
to { final effects }
}

- You can add any specific position between from and to.

10% { }
50% { }
90% { }

- To apply keyframe to any element in page you have to use the following attributes

animation-name : It refers to keyframe name

animation-duration : time interval
animation-delay : defines delay time
animation-direction : animation direction can be
alternate, reverse etc.
animation-iteration-count: number of times to display.

Syntax:
@keyframes name {

#element {
animation-name : name;
animation-duration: 4s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Animations</title>
<style>
@keyframes slideIn {
from {
margin-left: 120%;
width: 200%;
height: 200%;
margin-top: 400px;
transform: rotate(360deg);
}
to {
margin-left: 0%;
width: 100px;
height: 100px;
margin-top: 0px;
transform: rotate(0deg);
}
}

@keyframes zoomEffect {
from {
margin-top: 300px;
margin-right: 150%;
transform: scale(3);
}
50% {
margin-left: 300px;
}
to {
margin-top: 0px;
margin-right: 50%;
transform: scale(1);
}
}
#pic {
animation-name: slideIn;
animation-duration: 5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
h2 {
animation-name: zoomEffect;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<h2>Welcome</h2>
<img id="pic" src="../public/images/speaker.jpg" width="100" height="100">
</body>
</html>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Animations</title>
<style>
@keyframes zoom {
from {
margin-left: 120%;
height:200px;
width: 200px;
font-size: 50px;
}
50% {
height: 450px;
width: 450px;
font-size: 30px;
}
80% {
font-size: 80px;
}
to {
margin-left: 0%;
height: 400px;
width: 400px;
font-size: 20px;
}
}
body {
overflow: hidden;
}
p{
animation-name: zoom;
animation-duration: 5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<p>Your use of this software is subject to the terms and conditions of the license
agreement by which you acquired this software. If you are a volume license customer, use of
this software is subject to your volume license agreement. You may not use this software if
you have not validly acquired a license for the software from Microsoft or its licensed
distributors.
</p>
</body>
</html>

What is CSS Matrix?

- CSS will not allow multiple transforms for element directly.
- You can apply few transforms by using matrix.

Syntax:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Animations</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
transition: 5s;
}
#box:hover {
transform: matrix(1.5,5,5,0.5,100,100);
transition: 4s;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
</style>
</head>
<body>
<div id="box">
<img src="../public/images/speaker.jpg" width="100" height="100">
</div>
</body>
</html>
CSS Responsive
CSS Responsive Design
- Designing content which can fit on to various devices i.e mobile, pc, laptop, tab etc.
- To configure responsive design for web page we have to use the following features and
options.

1. Configure meta for page

2. Use fluid images
3. Use Grid and Flex
4. Use Media Queries

Meta for Responsive Page:

Syntax:
<meta name="viewport" content="width=device-width, Initial-scale=1">

a) Width : specifies to fit according to device width.

b) Initial-scale : specifies the initial zoom level for content.

Fluid Images:
- Images are defined with size in %.

Syntax:
<img width="45%" height="50%">

Grid and Flex:

- Grid allows to wrap contents into rows and columns.

container {
display:grid;
grid-template-columns: fr fr fr;
}
component {
grid-row : number;
grid-column: number;
}
- Flex with wrap also fits the content according to device.

container {
display:flex;
flex-wrap: wrapping options;
}

- Columns will wrap the content into contineous columns.

container {
columns: count;
column-gap: number;
column-width:number;
}

Media Queries
============
- Media options are used to target various devices.
a) Print
b) Screen
c) Speech

Syntax:
<style>
@media screen {
}
@media print {
}
@media speech {
}
</style>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<style>
@media screen {
body {
width: 90%;
padding: 10px;
background-image: url("../public/images/netflixback.jpg");
}
h2 {
background-color: red;
color:white;
text-align: center;
border:2px solid yellow;
}
aside {
width: 100px;
height: 80px;
background-color: blue;
color:white;
font-size: 20px;
position: fixed;
right: 30px;
}
}
@media print {
body {
width: 90%;
padding: 10px;
}
h2 {
background-color: black;
color:white;
text-align: left;
padding: 5px;
}
aside {
display: none;
}
}
@media speech {
p{
display: none;
}
}
</style>
</head>
<body>
<h2>CSS Responsive Design</h2>
<p>some text..</p>
<aside>
ads..
</aside>
</body>
</html>

Media Query Options

================
1. orientation
2. min-width
3. max-width
4. width

orientation : You can define the orientation as

a) landscape
b) portrait

Syntax:
@media screen and (expression)
{
}

expression : orientation=landscape
orientation=portrait

chrome://apps => webstore => mobile simulator

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Toolbar</title>
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
ul {
list-style: none;
}
li {
border:1px solid red;
background-color: tomato;
color:white;
padding: 5px;
width: 150px;
}
@media screen and (orientation:landscape) {
li {
display: inline;
margin-right: 30px;
width: 150px;
}
ul {
background-color: tomato;
}
}
@media screen and (orientation:portrait) {
li {
display: block;
margin-bottom: 30px;
width: 30px;
background-color: black;
}
ul {
background-color: tomato;
padding: 20px;
width: 50px;
}
.nav-title {
display: none;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><span class="bi bi-facebook"></span> <span class="nav-
title">Facebook</span> </li>
<li><span class="bi bi-twitter"></span> <span class="nav-title">Twitter</span>
</li>
<li><span class="bi bi-linkedin"></span> <span class="nav-
title">Linkedin</span> </li>
<li><span class="bi bi-instagram"></span> <span class="nav-
title">Instagram</span> </li>
</ul>
</nav>
</body>
</html>

width : It defines exact width of browser.

min-width: from the specified width to end of brower width.

min-width:500px; [from 500px]

max-width: upto the specified width.

max-width:500px; [upto 500px]

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Queries</title>
<style>
@media screen and (min-width:600px) {
body {
background-color: yellow;
}
}
@media screen and (max-width:599px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<p>Media Queries</p>
</body>
</html>
Bootstrap Positions
Bootstrap Box Model
=================
- Margins
.m
- Padding
.p
- Border
.border
.border-top, bottom, start, end
colors => .border-{contextual} [primary, secondary, success, danger
warning, etc.]
.border-1 to 5 [width]
.rounded [radius]
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
.rounded-0 to 3

- width and height

.w width
.h height

.w-{value} 25, 50, 75, 100 %

.h-{value} 25, 50, 75, 100 %

Backgrounds
==========
Background color

.bg-{contextual} primary, secondary, danger, warning etc..

Text Color

.text-{contextual} primary, secondary..

Background Opacity

.bg-opacity-{value} 10, 25, 50, 75, 100

Syntax
<p class="bg-primary bg-opacity-75"> </p>

Background Gradient

.bg-gradient

Syntax:
<p class="bg-danger bg-gradient"> </p>

Bootstrap Positions
===============
.position-{value}
.position-fixed
.position-static
.position-relative
.position-absolute
.position-sticky

- For positions absolute and fixed you have to define location by using
top - 0, 50, 100
start - left 0 , 50, 100
end - right 0, 50, 100
bottom - 0, 50, 100

Syntax:
<img class="position-fixed top-0 end-0">
<img class="position-absolute top-50, end-100">

<h2 class="position-sticky top-0"> </h2>

Bootstrap Alerts and Buttons
Sudhakar Sharma
•
5:33 PM
Bootstrap Display
.d-{attribute}
.d-flex
.d-grid
.flex-wrap
.justify-content-between
.justify-content-start
.justify-content-end
.justify-content-center
.align-items-top
.align-items-center

Syntax: Center Align

<div class="d-flex justify-content-center align-items-center">

</head>
<body class="container-fluid">
<div class="d-flex justify-content-center align-items-center" style="height: 500px;">
<form class="border border-3 p-3 border-primary">
<dl>
<dt>User Name</dt>
<dd><input type="text"></dd>
<dt>Password</dt>
<dd><input type="password"></dd>
</dl>
<button>Login</button>
</form>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

</head>
<body class="container-fluid">
<div class="d-flex flex-wrap">
<div class="m-2 border border-2 border-danger" style="height: 200px;width:
200px;">
box-1
</div>
<div class=" m-2 border border-2 border-danger" style="height: 200px;width:
200px;">
box-2
</div>
<div class=" m-2 border border-2 border-danger" style="height: 200px; width:
200px;">
box-3
</div>
<div class=" m-2 border border-2 border-danger" style="height: 200px;width:
200px;">
box-4
</div>
<div class=" m-2 border border-2 border-danger" style="height: 200px;width:
200px;">
box-5
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Grid with Rows and Columns

======================
.row
.col fits according to window and content
.col-{size} size can be 1 to 12
Syntax:
<div class="row">
<div class="col-3"> </div>
<div class="col-9"> </div>
</div>

</head>
<body class="container-fluid">
<h2>Product Details</h2>
<dl class="row">
<dt class="col-3">Name</dt>
<dd class="col-9">Samsung TV</dd>
<dt class="col-3">Price</dt>
<dd class="col-9">56000.55</dd>
<dt class="col-3">Stock</dt>
<dd class="col-9">Available</dd>
</dl>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Ex: Rows and Columns

</head>
<body class="container-fluid">
<div class="m-2 p-2 bg-dark text-white text-center">
Back to Top
</div>
<div class="row bg-dark bg-gradiant m-2 p-2 text-white">
<div class="col">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
</ul>
</div>
<div class="col">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
</ul>
</div>
<div class="col">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
</ul>
</div>
<div class="col">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
</ul>
</div>
</div>
<div class="row m-2 p-2 bg-dark text-white text-center">
<div class="col">
© copyright 2022
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Bootstrap Components
- A component comprises of pre-defined styles and functionality.

Bootstrap Alerts
============
- Alerts are used for embedded message box in page.
- You can control the message box dynamically by using jquery attributes.

Classes:
.alert
.alert-link
.alert-title
.alert-text

Colors By using:
.bg-{contextual}
.text-{contextual}
.alert-{contextual} primary, danger, success, warning etc..

Syntax:
<div class="alert alert-danger">
<h2 class="alert-title"> </h2>
<p class="alert-text"> </p>
<a href="#" class="alert-link"> </a>
</div>

Closing Alert:
.btn-close It is used to design a close button
.alert-dismissable It is an alert suitable for closing.

jQuery Attribute to Close:

data-bs-dismiss It defines which component to dismiss.

Syntax:
<button class="btn-close" data-bs-dissmiss="alert"> </button>
<button data-bs-dissmiss="alert"> OK </button>

Animation:
.fade Adds fade effect
.show To display by default

<div class="alert alert-danger fade show"> </div>

</head>
<body class="container-fluid">
<h2>Alerts</h2>
<div class="alert fade show alert-danger alert-dismissable">
<button class="btn-close" data-bs-dismiss="alert"></button>
<h2 class="alert-title">Delete Record</h2>

<p class="alert-text">Record will be deleted permanently..</p>

Bootstrap Buttons
=============
.btn
.btn-{contextual}
.btn-sm
.btn-lg
.btn-outline-{contextual}
.btn-link
.btn-close
.btn-group
.btn-toolbar

Syntax:
<button class="btn btn-primary"> </button>

.form-control : textbox, password, url, email, textarea

date, number.

.form-select : dropdown list, listbox

.form-input-range : range [slider]

.form-range

.form-label : labels

.form-switch : group of checkbox or radios

.form-check-input : checkbox and radio

.form-check-label : labels used for checkbox and radio.

.form-group : obselete from bootstrap 5

It is used for displaying a category of
controls in form.
: Alternate is to use margins.

Syntax:
<label class="form-label">
<input type="text" class="form-control">
<input type="range" class="form-range">
<input type="checkbox" class="form-check-input">
<select class="form-select">
<textarea class="form-control">

</head>
<body class="container-fluid">
<div class="d-flex justify-content-center align-items-center">
<form>
<h2>Register New User</h2>
<div class="mb-3">
<label class="form-label" for="UserName">User Name</label>
<div>
<input type="text" class="form-control" name="UserName">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="Password">Password</label>
<div>
<input class="form-control" type="password" name="Password">
</div>
</div>
<div class="mb-3">
<label class="form-label" for="City">Your City</label>
<div>
<select name="City" class="form-select" >
<option>Delhi</option>
<option>Hyd</option>
</select>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="Subscribe">Want Subscribtion?</label>
<div class="form-switch">
<input class="form-check-input" type="checkbox"> <label class="form-
check-label">Yes</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="Price">Select Price</label>
<div>
<input type="range" class="form-range" min="1" max="400000" value="1">
</div>
</div>
<div class="mb-3">
<button class="btn btn-primary w-100">Register</button>
</div>
</form>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Note: To keep form elements side by side bootstrap upto 4 version uses "form-inline".
Bootstrap 5 recommends "display" options.
Bootstrap Input Group
=================
Bootstrap 4
.input-group
.input-group-append
.input-group-prepend
.input-group-text
.input-group-sm | lg

Bootstrap-5
.input-group
.input-group-text
.input-group-sm | lg

Note: Bootstrap 5 controls automatic prepend and append based on position.

Syntax:
<div class="input-group">
<span class="input-group-text"> Prefix </span>
<input type="text" class="form-control">
<span class="input-group-text> Suffix </span>
</div>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
body {
background-color: black;
color:white;
}
</style>
</head>
<body class="container-fluid">
<h2>Prefix and Suffix</h2>
<div class="input-group">
<input type="text" placeholder="Your email id" class="form-control">
<span class="input-group-text">@</span>
<input type="text" placeholder="Domain name" class="form-control">
</div>
<h2>Multiple Prepend</h2>
<div class="input-group">
<span class="input-group-text">First Name</span>
<span class="input-group-text">Last Name</span>
<input type="text" class="form-control">
</div>
<h2>Amazon Search Bar</h2>
<div class="input-group">
<select class="input-group-text">
<option>All</option>
<option>Electronics</option>
<option>Footwear</option>
<option>Fashion</option>
</select>
<input type="text" class="form-control">
<button class="btn btn-warning">
<span class="bi bi-search"></span>
</button>
</div>
<h2>Netflix Register</h2>
<div class="input-group input-group-lg">
<input type="email" placeholder="Your email address" class="form-control">
<button class="btn btn-danger">
Get Started <span class="bi bi-chevron-right"></span>
</button>
</div>
<h2>Register</h2>
<div class="input-group">
<input type="text" placeholder="Your gmail id" class="form-control">
<span class="input-group-text">@gmail.com</span>
</div>
<h2>Price</h2>
<div class="input-group">
<span class="input-group-text">₹</span>
<input type="text" class="form-control">
<span class="input-group-text">.00</span>
</div>
<h2>Register</h2>
<div class="input-group mb-3">
<span class="bi bi-person-fill input-group-text"></span>
<input type="text" class="form-control" placeholder="User Name">
<span class="bi bi-check-circle input-group-text"></span>
</div>
<div class="input-group mb-3">
<span class="bi bi-key-fill input-group-text"></span>
<input type="password" class="form-control" placeholder="Password">
<span class="bi bi-check-circle input-group-text"></span>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Spinners
=======
- Used for displaying the status of any task performed in page.
like downloading, uploading, loading, etc..

.spinner-border
.spinner-border-sm | lg
.spinner-grow
.spinner-grow-sm | lg

Syntax:
<span class="spinner-border spinner-border-sm text-danger">
<span class="spinner-grow spinner-grow-sm text-warning">

</style>
</head>
<body class="container-fluid">
<h2>Spinners</h2>
<button class="btn btn-outline-danger">
<span class="spinner-border text-warning spinner-border-sm"></span> Loading
</button>
<button class="btn btn-outline-danger">
<span class="spinner-grow text-warning spinner-grow-sm"></span> Loading
</button>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Bootstrap Badge, Pagination, Cards
Bootstrap Progress
- It is used for showing status of task performed in page.
- It can display multiple progress bars with various progress status.

.progress
.progress-bar
.progress-bar-animated
.progress-bar-stripped

- You can design by using a container

Syntax:
<div class="progress">
<div class="progress-bar"></div>
</div>
- Progress status is defined by using "style=width:40%"

Syntax:
<div class="progress-bar" style="width:30%"> </div>

- You can set color using "bg-contextual"

Syntax:
<div class="progress-bar bg-sucess"> </div>

- You can define stripped and animated progress

Syntax:

<div class="progress-bar progress-bar-stripped progress-bar-animated"> </div>

</style>
</head>
<body class="container-fluid">
<h2>HTML Progress</h2>
<progress min="1" max="100" value="30">
</progress>
20% completed
<h2>Bootstrap Progress</h2>
<div class="progress">
<div class="progress-bar progress-bar-animated progress-bar-striped bg-success"
style="width: 30%;">
30% Completed
</div>
<div class="progress-bar progress-bar-animated progress-bar-striped bg-danger"
style="width: 70%;">
70% Remaining
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Bootstrap Badge
=============
- It is used to display containers within a container to highlight any value.

.badge
.badge-pill

Syntax:
<span class="badge badge-pill"> text </span>

Ex:
<button class="btn btn-primary position-relative">
<span class="bi bi-bell-fill"></span> Notifications <span class="badge position-
absolute bg-dark">5</span>
</button>

Bootstrap Pagination
================
- It designs pagination for navigation with in the data context.

.pagination
.page-item
.page-link
.active
.disabled
.pagination-sm
.pagination-lg
Syntax:

<ul class="pagination pagination-sm">

</style>
</head>
<body class="container-fluid">
<h2>Pagination</h2>
<table border="1" class="table" width="500">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#"> « </a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item disabled"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#"> »</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Bootstrap Tables
=============
.table
.table-hover
.table-bordered
.table-stripped
.table-responsive
.table-dark
.table-light

Syntax:
<table class="table table-hover table-stripped">

Syntax: Responsive
<div class="table-responsive">
<table class="table">
</table>
</div>

</style>
</head>
<body class="container-fluid">
<h2>Pagination</h2>
<div class="table-responsive">
<table border="1" class="table table-hover" width="500">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
</tr>
<tr>
<td>Mobile</td>
<td>12000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
</tr>
<tr>
<td>TV</td>
<td>56000.44</td>
<td>Available</td>
</tr>
<tr>
<td>Mobile</td>
<td>12000.44</td>
<td>Available</td>
</tr>

</tbody>
<tfoot>
<tr>
<td colspan="3">
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#"> « </a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item disabled"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#"> »</a></li>
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Bootstrap Cards
============
.card
.card-header
.card-body
.card-footer
.card-title
.card-subtitle
.card-text
.card-image-overlay
.card-image-top
.card-image-bottom

Syntax:
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
</div>
<div class="card-footer">
</div>
<img class="card-image-top">
</div>

</style>
</head>
<body class="container-fluid">
<h2>Products Catalog</h2>
<div class="d-flex flex-wrap">
<div class="card bg-warning text-white p-2 m-2" style="width:240px">
<img src="../public/images/neckband.PNG" height="200" class="card-image-top">
<div class="card-header" style="height: 130px;">
<h2 class="card-title">boAT Neckband</h2>
<p class="card-subtitle">40% off</p>
</div>
<div class="card-body">
<dl class="card-text">
<dt>Price</dt>
<dd>5600.55</dd>
<dt>Stock</dt>
<dd>Available</dd>
<dt>Rating</dt>
<dd><span class="bi bi-star-fill text-success"></span> 4.3 </dd>
</dl>
</div>
<div class="card-footer">
<button class="btn btn-danger w-100">
<span class="bi bi-cart4"></span>
Add to Cart
</button>
</div>
</div>

<div class="card p-2 m-2" style="width:240px">

<img src="../public/images/shoe.jpg" height="200" class="card-image-top">
<div class="card-header bg-danger text-white" style="height: 130px;">
<h2>Nike Casuals</h2>
</div>
<div class="card-body">
<dl>
<dt>Price</dt>
<dd>7600.55</dd>
<dt>Stock</dt>
<dd>Available</dd>
<dt>Rating</dt>
<dd><span class="bi bi-star-fill text-success"></span> 4.3 </dd>
</dl>
</div>
<div class="card-footer">
<button class="btn btn-danger w-100">
<span class="bi bi-cart4"></span>
Add to Cart
</button>
</div>
</div>

<div class="card p-2 m-2" style="width:240px">

<div class="card-header bg-danger text-white" style="height: 130px;">

<h2>Lee Boot</h2>
</div>
<div class="card-body">
<dl>
<dt>Price</dt>
<dd>6700.55</dd>
<dt>Stock</dt>
<dd>Available</dd>
<dt>Rating</dt>
<dd><span class="bi bi-star-fill text-success"></span> 4.3 </dd>
</dl>
<img src="../public/images/shoe1.jpg" height="200" width="200">
</div>
<div class="card-footer">
<button class="btn btn-danger w-100">
<span class="bi bi-cart4"></span>
Add to Cart
</button>
</div>
</div>

</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Note: You can also configure card images using "card-img-top"

You individually define image using
.img
.img-thumbnail
.img-fluid
Accordion, Carousel, Collapse
Bootstrap Collapse
- It is used to display or hide any block dynamically.

.collapse
.show : Toggle display
.fade : Transition

jQuery Attributes:
data-bs-toggle : Specifies the component type.
data-bs-target : Specifies the target element id reference.

Note: Component Type can be : collapse, modal, carousel etc..

Syntax:
<button data-bs-target="#preview" data-bs-toggle="collapse">
</button>

<div id="preview" class="collapse show fade">

.... your content ......
</div>

ex:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>

</style>
</head>
<body class="container-fluid">
<h2>Product Details</h2>
<dl>
<dt>Name</dt>
<dd>boAt Neckband</dd>
<dt>Price</dt>
<dd>6000.33</dd>
<dt><button data-bs-target="#preview" data-bs-toggle="collapse" class="btn btn-
primary">Preview Toggle</button></dt>
<dd class="collapse show fade" id="preview">
<img src="../public/images/neckband.PNG" width="200" height="200">
</dd>
</dl>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Bootstrap Accordion
===============
- It is a set of components which can toggle display.
- Component is accordion will use Mutex mechanism.
[Mutual Exclusion]
- Only one component can show its content.

.accordion
.accordion-item
.accordion-header
.accordion-body
.accordion-footer
.accordion-button
.accordion-collapse

jQuery Attributes:
The jquery attributes are similar for all component for handling interactions.
data-bs-target
data-bs-toggle
data-bs-dismiss
data-bs-parent - to bind all accordion items to
the parent.

Syntax:
<div class="accordion" id="parent">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button" data-bs-target="c1" data-bs-toggle="collapse"> Your
Text </button>
</div>
<div class="accordion-collapse collapse show" id="c1" data-bs-parent="#parent">
<div class="accordion-body">
......... your content...........
</div>
</div>
</div>
</div>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
body {
margin-left: 20%;
margin-right: 20%;
background-color: black;
color:white;
}
</style>
</head>
<body>
<div class="d-flex justify-content-center align-items-center">
<div>
<h1>Frequently Asked Questions</h1>
<div class="accordion" id="faq">
<div class="accordion-item">
<div class="accordion-header">
<button data-bs-target="#q1" data-bs-toggle="collapse" class="btn w-100
mb-2 bg-dark text-white">What is Netflix?</button>
</div>
<div class="accordion-collapse collapse show" id="q1" data-bs-
parent="#faq">
<div class="accordion-body bg-dark text-white">
<p>Netflix is a streaming service that offers a wide variety of award-
winning TV shows, movies, anime, documentaries and more – on thousands of internet-
connected devices.</p>
<p>You can watch as much as you want, whenever you want, without a
single ad – all for one low monthly price. There's always something new to discover, and new
TV shows and movies are added every week!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button data-bs-target="#q2" data-bs-toggle="collapse" class="accordion-
button">How to Register?</button>
</div>
<div class="accordion-collapse collapse" id="q2" data-bs-parent="#faq">
<div class="accordion-body bg-dark text-white">
<p>Netflix is a streaming service that offers a wide variety of award-
winning TV shows, movies, anime, documentaries and more – on thousands of internet-
connected devices.</p>
<p>You can watch as much as you want, whenever you want, without a
single ad – all for one low monthly price. There's always something new to discover, and new
TV shows and movies are added every week!</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button data-bs-target="#q3" data-bs-toggle="collapse" class="accordion-
button">Where i can watch?</button>
</div>
<div class="accordion-collapse collapse" id="q3" data-bs-parent="#faq">
<div class="accordion-body bg-dark text-white">
<p>Netflix is a streaming service that offers a wide variety of award-
winning TV shows, movies, anime, documentaries and more – on thousands of internet-
connected devices.</p>
<p>You can watch as much as you want, whenever you want, without a
single ad – all for one low monthly price. There's always something new to discover, and new
TV shows and movies are added every week!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Bootstrap Carousel
===============
- It is used for displaying sliding and fading banners in page.
- It is used to control slide show for a set of images in page.

Basic Design
.carousel
.carousel-inner
.carousel-item

Syntax:
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
........your content..........
</div>
</div>
</div>

1. Any one of the carousel item must be in active state.

2. you can't defined multiple active.

<div class="carousel-item active">

</div>

3. Slide show will not start automatically, you have to define the attribute "data-bs-ride" for
carousel.

<div class="carousel" data-bs-ride="carousel">

4. The default animation style for item is fade, you have to apply "slide".

<div class="carousel slide" data-bs-ride="carousel">

Carousel Controls:
- controls are used to manually navigate between previous and next slides.

.carousel-control-prev
.carousel-control-prev-icon
.carousel-control-next
.carousel-control-next-icon

jQuery attributes:
data-bs-slide="prev"
data-bs-slide="next"
data-bs-target="carousel id"

Carousel Indicators
- They are used to slide to any specific item.

.carousel-indicators
data-bs-slide-to="index"

.modal
.modal-dialog
.modal-content
.modal-header
.modal-body
.modal-footer

Syntax:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
-- header ---
-- body --
-- footer --
</div>
</div>
</div>

.modal-dialog-scrollable : It is used to make content scroll if it is more than screen

area. It controls the overflow of content.

Syntax:
<div class="modal-dialog modal-dialog-scrollable">
</div>

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-
icons.css">
</head>
<body class="container-fluid">
<h2>Modals</h2>
<button data-bs-target="#login" data-bs-toggle="modal" class="btn btn-
primary">Login</button>
<div class="modal fade" id="login">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h2>User Login</h2>
<button data-bs-dismiss="modal" class="btn-close"></button>
</div>
<div class="modal-body">
<dl>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
<dt>User Name</dt>
<dd><input type="text" class="form-control"></dd>
<dt>Password</dt>
<dd><input type="password" class="form-control"></dd>
</dl>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Login</button>
<button data-bs-dismiss="modal" class="btn btn-
danger">Cancel</button>
</div>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

- You can also display modal content full screen

.modal-dialog-fullscreen

FAQ: How to display modal dialog on link click?

Ans: Anchor element requires only "data-bs-toggle"
href is used as data-bs-target

Syntax:
<a href="#id" data-bs-toggle="modal"> </a>

Bootstrap Dropdown
================
- HTML Dropdown is defined by using <select> with <option>
- It is RC data type.
- It is good for adding and removing elements dynamically.
- Bootstrap dropdown allows selection of items dynamically.
- It allows symbols, icons into options.
- It is not good for dynamically adding and removing of elements.
- It is good for designing navigation.

.dropdown
.dropup
.dropstart
.dropend
.dropdown-toggle
.dropdown-item
.dropdown-menu
.dropdown-divider

Syntax:
<div class="dropdown">
<button class="dropdown-toggle" data-bs-target="dropdown"> Menu
</button>
<div class="dropdown-menu collapse">
<div class="dropdown-item">
</div>
<div class="dropdown-divider"> </div>
</div>
</div>
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-
icons.css">
</head>
<body class="container-fluid">
<h2>Dropdown</h2>
<div class="dropdown">
<button data-bs-toggle="dropdown" class="dropdown-toggle btn btn-dark" >
<span class="bi bi-globe"></span>
Language
</button>
<div class="dropdown-menu collapse">
<div class="dropdown-item">
<a href="#">English</a>
</div>
<div class="dropdown-item">
<a href="#">हिन्दी</a>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item">
Help?
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Bootstrap Navbar and Tabs

=====================
- It is a plan navigation with tab controls
- Navbar can handle navigation with combination of tab-pages.

.nav
.nav-tabs
.nav-pills
.nav-item
.nav-link
.tab-content
.tab-pane

Syntax:
<div class="nav nav-tabs">
<div class="nav-item">
<a class="nav-link"> </a>
</div>
</div>
<div class="tab-content">
<div class="tab-pane"> </div>
</div>

.navbar
.navbar-expand-lg | sm
.navbar-brand
.navbar-toggler
.navbar-toggler-icon
.navbar-nav
.navbar-collapse
.navbar-dark
.navbar-light
.nav-item
.nav-link
.collapse

Syntax"
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="#" class="navbar-brand"> Amazon </a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link"> Text </a>
</li>
</ul>
</div>
</div>
</div>

Ex: Mouse over dropdown

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
.dropend:hover .dropdown-menu {
display: block;
}
</style>
</head>
<body class="container-fluid">
<div class="dropdown mt-2">
<button data-bs-toggle="dropdown" class="dropdown-toggle btn-dark">
Select Category
</button>
<div class="dropdown-menu dropdown-menu-dark text-white collapse">
<div class="dropdown-item">
<a href="#" class="dropdown-item-text">Electronics</a>
</div>
<div class="dropdown-item">
<div class="dropend">
<button class="dropdown-toggle btn-dark dropdown-item-text">
Fashion
</button>
</div>
</div>
<div class="dropdown-item">
<a href="#" class="dropdown-item-text">Footwear</a>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

Ex: Navbar with dropdown

</head>
<body class="container-fluid">
<div class="navbar navbar-expand-lg navbar-dark bg-dark mt-2">
<div class="container-fluid justify-content-between">
<button class="navbar-toggler" data-bs-target="#menu" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">Amazon</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<div class="dropdown">
<button data-bs-toggle="dropdown" class="dropdown-toggle btn btn-dark">
Select Category
</button>
<div class="dropdown-menu dropdown-menu-dark text-white collapse">
<div class="dropdown-item">
<a href="#" class="dropdown-item-text">Electronics</a>
</div>
<div class="dropdown-item">
<a href="#" class="dropdown-item-text">Footwear</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<form class="d-flex">
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-warning">
<span class="bi bi-search"></span>
</button>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
JavaScript
Sudhakar Sharma
•
Feb 28
JavaScript
========
- JavaScript is light weight "Just-in-time" interpreted or compiled programming language.

JIT - Just-in-Time
AOT - Ahead-of-Time

- JIT will load into browser and translate in browser.

- AOT will translate at application level instead of browser.
- JIT uses "Interpreter", which is translator that translates line by line.
- AOT uses "Compiler", which is a translator that translates entire program. The popular
compilers
a) V8
b) Babel
- JavaScript is a language, which is used

Client Side with HTML

Server Side with Node.js
Database with MongoDB
Animations with Flash, 3DS Max etc.

FAQ: Why we need JavaScript with HTML?

Ans : It is used to reduce burden on server.

- JavaScript is used client side to reduce burden on server by handling

client side interactions and validations.

- JavaScript is not just a client side script, it is a language used to build large scale
applications.

- JavaScript can handle DOM manipulations.

- HTML presents DOM and JavaScript manipulates DOM, like
a) Adding Elements
b) Removing Elements
c) Update Data into Elements etc..

Evolution of JavaScript
==================
- Tim Berners Lee introduced web in early 1990's.
- Tim Berners Lee introduces a language called HTML.
- The first browser was "Mosaic"
- 1994 Netscape Communications developed a browser called
"Netscape Communicator"

HTML for Markup

ECMA Script for Client Side

European Computer Manufacturers Association

- 1995 Netscape Appointed "Brendan Eich" to develop a client side script.

Mocha
Live Script
- Sun Microsystems - Java
JavaScript

- 1998 Microsoft Released OS - Win-98 for Internet

Free Browser - IE - JavaScript
Safari, Opera
- 2000 Netscape stopped
JavaScript - ECMA
JavaScript ECMA Script
ECMA 2021
ECMA 2016 - ES6
ECMA 2017 - ES7

JavaScript - IE, Opera, Safari

JavaScript lot of incompatibility issues

- 2006 John Resig introduced a library from JavaScript called "jquery".

ES8

Deutz Manual bf4m1012
100% (2)
Deutz Manual bf4m1012
490 pages
Chapter 2 CSS
No ratings yet
Chapter 2 CSS
8 pages
UNIT 2
No ratings yet
UNIT 2
76 pages
PPT-2 CSS
No ratings yet
PPT-2 CSS
44 pages
Basics of CSS For Web
No ratings yet
Basics of CSS For Web
16 pages
WD Unit 3 (A)
No ratings yet
WD Unit 3 (A)
39 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
42 pages
Multiple Styles Will Cascade Into One
No ratings yet
Multiple Styles Will Cascade Into One
6 pages
CSS Intro
No ratings yet
CSS Intro
20 pages
What Is CSS?: CSS Stands For Cascading Style Sheets
100% (1)
What Is CSS?: CSS Stands For Cascading Style Sheets
16 pages
CSS Types Properties
No ratings yet
CSS Types Properties
18 pages
Lec5 CSS
No ratings yet
Lec5 CSS
7 pages
Web Design With CSS
No ratings yet
Web Design With CSS
32 pages
Unit 2 Notes
No ratings yet
Unit 2 Notes
27 pages
Web Design and Development Lecture 4
No ratings yet
Web Design and Development Lecture 4
22 pages
CSS Notes Chitkara-till Combinators (2)
No ratings yet
CSS Notes Chitkara-till Combinators (2)
67 pages
Dynamic Hyper Text Markup Language
No ratings yet
Dynamic Hyper Text Markup Language
89 pages
Css (Cascading Style Sheet)
No ratings yet
Css (Cascading Style Sheet)
18 pages
CSS and CSS3 Notes
100% (1)
CSS and CSS3 Notes
54 pages
CSS
100% (1)
CSS
264 pages
1bcom_sem3_unit5_css__notes
No ratings yet
1bcom_sem3_unit5_css__notes
19 pages
Unit Iii
No ratings yet
Unit Iii
46 pages
Unit 3 - Web Technology
No ratings yet
Unit 3 - Web Technology
58 pages
Module2-WT HTML Css
No ratings yet
Module2-WT HTML Css
44 pages
Css
No ratings yet
Css
113 pages
Css
100% (1)
Css
51 pages
CSS1
No ratings yet
CSS1
11 pages
Css Part1 CHP 4 Hamid
No ratings yet
Css Part1 CHP 4 Hamid
56 pages
Css Intro
No ratings yet
Css Intro
30 pages
Basic Web Development
0% (1)
Basic Web Development
75 pages
What Is CSS
No ratings yet
What Is CSS
8 pages
Web Designing (KIT-401) Unit 3
No ratings yet
Web Designing (KIT-401) Unit 3
86 pages
Cascading Style Sheet (Css)
No ratings yet
Cascading Style Sheet (Css)
19 pages
Oopp Unit 5 Notes
No ratings yet
Oopp Unit 5 Notes
32 pages
HTML Part 3 CSS
No ratings yet
HTML Part 3 CSS
59 pages
Css 1
No ratings yet
Css 1
7 pages
What Is CSS? CSS Stands For Cascading Style Sheets
No ratings yet
What Is CSS? CSS Stands For Cascading Style Sheets
18 pages
5-9-2024
No ratings yet
5-9-2024
12 pages
IP - Lecture 6, 7 Chapter-3
No ratings yet
IP - Lecture 6, 7 Chapter-3
48 pages
CSS Introduction
No ratings yet
CSS Introduction
45 pages
Developing Cascading Style Sheets
100% (1)
Developing Cascading Style Sheets
55 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
117 pages
Notes Introduction To CSS
No ratings yet
Notes Introduction To CSS
9 pages
CSS Tutorial
No ratings yet
CSS Tutorial
7 pages
02 CSS
No ratings yet
02 CSS
26 pages
CSS Tech Move
No ratings yet
CSS Tech Move
1 page
Chapter 3
No ratings yet
Chapter 3
58 pages
Introduction to CSS
No ratings yet
Introduction to CSS
250 pages
Web Tech (Third Unit)
No ratings yet
Web Tech (Third Unit)
72 pages
Introduction To HTML & Css
No ratings yet
Introduction To HTML & Css
26 pages
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet
CSS Lab Material
No ratings yet
CSS Lab Material
49 pages
Kosa 0147
No ratings yet
Kosa 0147
7 pages
csspdf
No ratings yet
csspdf
38 pages
What You Should Already Know: Home Page
No ratings yet
What You Should Already Know: Home Page
60 pages
HTML2
No ratings yet
HTML2
25 pages
Cascading Style Sheets: - Deepa Acharya
No ratings yet
Cascading Style Sheets: - Deepa Acharya
64 pages
Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way
100% (1)
Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way
59 pages
The CSS Guide: The Complete Guide to Modern CSS
From Everand
The CSS Guide: The Complete Guide to Modern CSS
Tim Robards
5/5 (2)
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
From Everand
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
Steven Bright
No ratings yet
CSS3 Reference: An Alphabetical Guide
From Everand
CSS3 Reference: An Alphabetical Guide
Jo Foster
No ratings yet
Website Security 101: Real-World Examples, Tools & Techniques For Protecting & Securing Websites
100% (1)
Website Security 101: Real-World Examples, Tools & Techniques For Protecting & Securing Websites
12 pages
vigneshwarAS (3 0)
No ratings yet
vigneshwarAS (3 0)
3 pages
HTML Advantage and Disadvantage
No ratings yet
HTML Advantage and Disadvantage
4 pages
Instant Blogs
No ratings yet
Instant Blogs
29 pages
Bootstrap 3 CSS Classes Desk Reference
100% (2)
Bootstrap 3 CSS Classes Desk Reference
8 pages
Front-End Web Development
No ratings yet
Front-End Web Development
2 pages
Selenium Web Driver Cheat Sheet
No ratings yet
Selenium Web Driver Cheat Sheet
3 pages
Flutter Web - Some Notes. CORS (Cross-Origin Resource Sharing) - by Vinay Shankri - Flutter Community - Dec, 2020 - Medium
No ratings yet
Flutter Web - Some Notes. CORS (Cross-Origin Resource Sharing) - by Vinay Shankri - Flutter Community - Dec, 2020 - Medium
9 pages
PHP Part B1
No ratings yet
PHP Part B1
2 pages
MobileApp Checklist
No ratings yet
MobileApp Checklist
10 pages
A Smarter Way to Learn HTML CSS Learn it faster Remember it longer 1st Edition Mark Myers instant download
100% (1)
A Smarter Way to Learn HTML CSS Learn it faster Remember it longer 1st Edition Mark Myers instant download
53 pages
Todoscontroller Crud Example: ?PHP Namespace Use Use Use Class Extends Public Function
No ratings yet
Todoscontroller Crud Example: ?PHP Namespace Use Use Use Class Extends Public Function
8 pages
COS Screen User Guide
100% (4)
COS Screen User Guide
68 pages
Benjamin Shah
No ratings yet
Benjamin Shah
5 pages
Forum Profile Creation 2016
No ratings yet
Forum Profile Creation 2016
10 pages
435752048-Web-Development-Report IT (IV)
No ratings yet
435752048-Web-Development-Report IT (IV)
29 pages
Full Stack MEAN Developer: Master's Program
No ratings yet
Full Stack MEAN Developer: Master's Program
18 pages
Unit 6 Using Javascript: Structure
No ratings yet
Unit 6 Using Javascript: Structure
20 pages
CCS375 Set2
No ratings yet
CCS375 Set2
3 pages
Quiz 001 - Attempt Review4 PDF
No ratings yet
Quiz 001 - Attempt Review4 PDF
3 pages
PHP 08 POST Redirect Authn
No ratings yet
PHP 08 POST Redirect Authn
45 pages
Web Technology
No ratings yet
Web Technology
64 pages
Report 20190410185247 PDF
0% (1)
Report 20190410185247 PDF
20 pages
Internship Report From Chatgpt
No ratings yet
Internship Report From Chatgpt
7 pages
Scribd Download - Com Tipler Mosca Vol 1 6 Ordm Ed
No ratings yet
Scribd Download - Com Tipler Mosca Vol 1 6 Ordm Ed
46 pages
GC 2024 04 13
No ratings yet
GC 2024 04 13
4 pages
Local Conveyance: Popular Pharmaceuticals LTD
No ratings yet
Local Conveyance: Popular Pharmaceuticals LTD
11 pages
Harshavardhan T UI Developer - Angular Phone Number: +91-9052752852
No ratings yet
Harshavardhan T UI Developer - Angular Phone Number: +91-9052752852
4 pages
SAP FIORI Important Work Questino
No ratings yet
SAP FIORI Important Work Questino
45 pages