Industrial live event on

“web development Online

Training for 3 Days”
By : Myinfotech

In this event we are going to learn some very imortant technologies who would help us
In this event.

And this event is going to run for 3 days only.

In this event we would try to cover all the important topics which would help you to
Creat best and responsive websites.

.........................www.my-infotech.online................... Visite : www.my-infotech.online

1
Import topics

 HTML / HTML v5
 HTML Introduction _________________________________05
 HTML Editors _________________________________06
 HTML Elements _________________________________09

 HTML Headings _________________________________10

 HTML Paragraphs _________________________________11

 HTML Styles _________________________________12
 HTML Formatting _________________________________13
 HTML Comments _________________________________15
 HTML Colors/CSS _________________________________16
 HTML Links_________________________________17

 HTML Images _________________________________18

 HTML Tables _________________________________21
 HTML Lists _________________________________22

.........................www.my-infotech.online................... 2
  HTML Blocks _________________________________23
 HTML Classes _________________________________24
 HTML Id _________________________________26
 HTML Head Elements _________________________________28
 HTML Layout _________________________________31

 HTML5 Intro _________________________________34

 HTML5 New Elements _________________________________35
 HTML Media _________________________________36
 HTML Video/ Audio _________________________________36

 HTML YouTube _________________________________37

 HTML Tag List _________________________________38

CSS v3
 CSS Introduction _________________________________39
 CSS Syntax _________________________________40

 CSS Selectors _________________________________41

 CSS How To _________________________________44

 CSS Borders _________________________________47

 CSS Margins_________________________________48

 CSS Padding_________________________________49

.........................www.my-infotech.online................... 3
 CSS Colors/ Gradients
_________________________________50
 CSS Shadows _________________________________51
 CSS Buttons _________________________________52

.........................www.my-infotech.online................... 4
HTML Introduction
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the

A Simple HTML Document

.........................www.my-infotech.online................... 5
HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or
TextEdit.

Step 1: Open Notepad (PC)

Windows 10 or later:
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad

.........................www.my-infotech.online................... 6
Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly.
In Preferen
ces > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files
as HTML code instead of formatted text".
Then open a new document to place the code.

Step 2: Write Some HTML

.........................www.my-infotech.online................... 7
Step 3: Save the HTML Page

Step 4: View the HTML Page in Your Browser

.........................www.my-infotech.online................... 8
HTML Elements
 An HTML element usually consists of a start tag and an end tag, with the content inserted in
between:
<!DOCTYPE html>
<html>
<body>

<h1> My First Heading </h1>

<p> My first paragraph .</p>

</body>
</html>
 Example Explained
The <html> element defines the whole document. It has a start tag <html> and an end tag </html>. Inside
the <html> element is the <body> element. The <body> element defines the document body. It has a start
tag <body> and an end tag </body>.

Inside the <body> element is two other HTML elements: <h1> and <p>.
the <hq1> tag is used for headings. It has a start tag <h1> and an end tag </h1>.
The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>.
.

.........................www.my-infotech.online................... 9
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
<!DOCTYPE html> O/P
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

.........................www.my-infotech.online................... 10
HTML Paragraphs
The HTML <p> element defines a paragraph:
Note: Browsers automatically add some white space (a margin) before and
after a paragraph.

• Example : O/P
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

.........................www.my-infotech.online................... 11
HTML Styles
Setting the style of an HTML element, can be done with the
style attribute.
The HTML style attribute has the following syntax:

• Example : O/P
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
.........................www.my-infotech.online................... 12
HTML Formatting and Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

.........................www.my-infotech.online................... 13
Example:
<!DOCTYPE html>
<html>
O/P
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<strong>This text is strong</strong>

<i>This text is italic</i>

<em>This text is emphasized</em>

<h2>HTML <small>Small</small> Formatting</h2>

<h2>HTML <mark>Marked</mark> Formatting</h2>

<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite <ins>color</ins> is red.</p>

<p>This is _subscripted text.</p>

<p>This is ^{superscripted} text.</p>

</body>
</html>

.........................www.my-infotech.online................... 14
HTML Comment Tags
You can add comments to your HTML source by using
the following syntax:
 Example : O/P :

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->

<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

.........................www.my-infotech.online................... 15
HTML Colors/CSS
 HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetuer adipiscing

elit, sed diam nonummy nibh euismod tinciduntut laoreet dolore magna aliquam erat volutpat.
</p>

</body>
</html>

O/P :

.........................www.my-infotech.online................... 16
HTML Links
 HTML links are hyperlinks.
 You can click on a link and jump to another document.
 When you move the mouse over a link, the mouse arrow will turn into a
little hand.
Note: A link does not have to be text. It can be an image or any other HTML
element.
Example : O/P :
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>
<a href="https://my-infotech.online/">
Visit our HTML tutorial</a>
</p>

</body>
</html>
.........................www.my-infotech.online................... 17
HTML Images
 In HTML, images are defined with the <img> tag.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.
 The src attribute specifies the URL (web address) of the image:
 The value of the alt attribute should describe the image and show if image does not
appears :
<!DOCTYPE html>
<html>
<body>

<h2> my-infotech.online </h2>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

<!--------------- back ground image ------------------------->

<div style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br></div>
</body>
</html>

.........................www.my-infotech.online................... 18
O/P :
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

.........................www.my-infotech.online................... 19
Background image
<div style="background-image: url('img_girl.jpg');">
You can specify background images <br>
for any visible HTML element. <br> </div>

.........................www.my-infotech.online................... 20
HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings
are bold and centered. A table data/cell is defined with the <td> tag.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2> O/P :
<table >
<tr>
<th> Firstname </th>
<th> Lastname </th>
<th>Age</th>
</tr>
<tr>
<td> Jill </td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

.........................www.my-infotech.online................... 21
HTML Lists
<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

O/P :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

.........................www.my-infotech.online................... 22
 HTML Block and Inline Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
<!DOCTYPE html> O/P :
<html>
<body>
<div style="border: 1px solid black">Hello World</div>

<p>The DIV element is a block element, and will always start on a

new line and take up the full width available (stretches out to the
left and right as far as it can).</p>

</body>
</html>

Block level elements in HTML:

<address> <article> <header> <hr>
<aside> <blockquote> <ul> <video>
<canvas> <dd> <pre> <section>
<div> <dl> <table> <tfoot>
<dt> <fieldset> <ol> <p>
<figcaption> <figure> <nav> <noscript>
<footer> <form> <li> <main>
<h1> </h6>

Inline elements in HTML:

<a> <abbr> <acronym> <b> <var> <small> <span><strong> <sub>
<bdo> <big> <br> <button> <tt> <textarea> <samp> <script> <select>
<cite> <code> <dfn> <em> <time> <label> <map> <object> <output
<i> <sup> <img> <input> <kbd> <q>

.........................www.my-infotech.online................... 23
HTML The class Attribute
 The HTML class attribute is used to define equal styles for elements with
the same class name.
 So, all HTML elements with the same class attribute will get the same style.
 Here we have three <div> elements that point to the same class name:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div>
</body>
</html>

.........................www.my-infotech.online................... 24
Example of class
<!DOCTYPE html>
<html>
O/P :
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2>The class Attribute</h2>

<p>Use CSS to style elements with the class name "city":</p>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

.........................www.my-infotech.online................... 25
HTML The id Attribute
 The id attribute specifies a unique id for an HTML element (the value must
be unique within the HTML document).
 The id value can be used by CSS and JavaScript to perform certain tasks for
the element with the specific id value.
 In CSS, to select an element with a specific id, write a hash (#) character,
followed by the id of the element:

<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

.........................www.my-infotech.online................... 26
Example of Id
<!DOCTYPE html> O/P :
<html>
<head>
<style>
#myHeader {
 background-color: lightblue;
 color: black;
 padding: 40px;
 text-align: center;
}
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">www.my-infotech.online</h1>

</body>
</html>

.........................www.my-infotech.online................... 27
HTML Head Elements
 The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
 HTML metadata is data about the HTML document. Metadata is not displayed.
 Metadata typically define the document title, character set, styles, scripts, and other
meta information.
 The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>,
and <base>.

 The HTML <title> Element

 The <title> element defines the title of the document, and is required in all HTML
documents.
 The <title> element:
 defines a title in the browser tab
 provides a title for the page when it is added to favorites
 displays a title for the page in search engine results
 A simple HTML document:
.........................www.my-infotech.online................... 28
<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
</head>

<body>
The content of the document......
</body>
</html>
The HTML <link> Element
<link rel="stylesheet" href="mystyle.css">
The HTML <meta> Element
 The <meta> element is used to specify which character set is used, page description,
keywords, author, and other metadata.
 Metadata is used by browsers (how to display content), by search engines
(keywords), and other web services.
 Define the character set used:
<meta charset="UTF-8">

.........................www.my-infotech.online................... 29
 Define a description of your web page:
<meta name="description" content="Free Web tutorials">
 Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
 Define the author of a page:
<meta name="author" content="John Doe">
 Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
Defines a default address or a default target
<base>
for all links on a page
Defines the relationship between a document
<link>
and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

.........................www.my-infotech.online................... 30
HTML Layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the header */
header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; }

/* Create two columns/boxes that floats next to each other */

nav { float: left; width: 30%; height: 300px; background: #ccc; padding: 20px; }

/* Style the list inside the menu */

nav ul { list-style-type: none; padding: 0; }

article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be
removed */}

/* Clear floats after the columns */

section:after { content: ""; display: table; clear: both; }

/* Style the footer */

footer { background-color: #777; padding: 10px; text-align: center; color: white; }

.........................www.my-infotech.online................... 31
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
 nav, article {
 width: 100%;
 height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example,</p>
<header>
 <h2>Cities</h2>
</header>
<section>
 <nav>
 <ul>
 <li><a href="#">London</a></li>
 <li><a href="#">Paris</a></li>
 <li><a href="#">Tokyo</a></li>
 </ul>
 </nav>
 <article>
 <h1>London</h1>
 <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
 <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
 </article>
</section>
<footer>
 <p>Footer</p>
</footer>
</body>
</html>

.........................www.my-infotech.online................... 32
.........................www.my-infotech.online................... 33
HTML5 Introduction
The DOCTYPE declaration for HTML5 is very simple:
O/P :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Removed Element
<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset>
<noframes> <strike> <strike>

.........................www.my-infotech.online................... 34
New Elements in HTML5
HTML5 offers new elements for better document structure:
Tag Description <meter> Defines a scalar measurement within a known
range (a gauge)
<article> Defines an article in a document
<nav> Defines navigation links
<aside> Defines content aside from the page content <progress> Represents the progress of a task
<bdi> Isolates a part of text that might be formatted in a
different direction from other text outside it
<rp> Defines what to show in browsers that do not
<details> Defines additional details that the user can view or support ruby annotations
hide

<dialog> Defines a dialog box or window <rt> Defines an explanation/pronunciation of

characters (for East Asian typography)
<figcaption> Defines a caption for a <figure> element

<figure> Defines self-contained content <ruby> Defines a ruby annotation (for East Asian
typography)
<footer> Defines a footer for a document or section
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<header> Defines a header for a document or section

<main> Defines the main content of a document <time> Defines a date/time

<mark> Defines marked/highlighted text <wbr> Defines a possible line-break

.........................www.my-infotech.online................... 35
HTML Video/ Audio
To show a video in HTML, use the <video> element:

<!DOCTYPE html> O/P :

<html>
<body>

<video width="320" height="240" controls>

<source src="new_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

The HTML <audio> Element O/P :

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
.........................www.my-infotech.online................... 36
Playing a YouTube Video in HTML
To play your video on a web page, do the following:
Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)

url= https://www.youtube.com/watch?v=Bey4XXJAqS8
take id of the video = Bey4XXJAqS8
<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345“

src="https://www.youtube.com/embed/Bey4XXJAqS8 ">
</iframe>

</body>
</html>

.........................www.my-infotech.online................... 37
HTML all tags
Tag Tag Tag Tag Tag Tag
<!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address>
<applet> <area> <article> <aside> <audio> <b>
<base> <basefont> <bdi> <body> <br> <button>
<canvas> <caption> <center> <cite> <code> <col>
<colgroup> <data> <datalist> <dd> <del> <details>
<dfn> <dialog> <dir> <div> <dl> <dt>
<em> <embed> <fieldset> <figcaption> <figure> <font>
<footer> <form> <frame> <frameset> <h1> to <h6> <head>
<header> <hr> <html> <i> <iframe> <img>
<input> <ins> <kbd> <label> <legend> <li>, <ul>
<link> <main> <map> <mark> <meta> <meter>
<nav> <noframes> <noscript> <object> <ol> <optgroup>
<option> <output> <output> <param> <p> <picture>
<pre> <progress> <q> <rp> <rt> <small>
<ruby> <s> <samp> <script> <section> <select>
<source> <span> <strike> <strong> <style> <sub>
<summary> <sup> <svg> <table> <tbody> <td>, <th>, <tr>
<template> <textarea> <tfoot> <track> <thead> <time>
<title> <tt> <u> <var> <video> <wbr>

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

Why Use CSS?

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

.........................www.my-infotech.online................... 39
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
.........................www.my-infotech.online................... 40
CSS Selectors
CSS selectors are used to "find" (or select) the HTML
elements you want to style.

We can divide CSS selectors into four categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific
relationship between them)
Pseudo-class selectors (select elements based on a certain
state)
Pseudo-elements selectors (select and style a part of an
element)

.........................www.my-infotech.online................... 41
The element selector selects HTML elements based on the element name.
p{
text-align: center;
color: red;
}

CSS id Selector
#para1 {
  text-align: center;
  color: red;
}

CSS class Selector

.center {
  text-align: center;
  color: red;
}

.........................www.my-infotech.online................... 42
Combinator selectors Pseudo-class selectors
div p {
/* unvisited link */
  background-color: yellow; a:link {
}   color: red;
}

/* visited link */
a:visited {
Pseudo-elements selectors   color: blue;
}
p::first-line {
/* mouse over link */
  color: #ff0000;
a:hover {
  font-variant: small-caps;
  color: green;
}it Yourself »
}

/* selected link */
a:active {
  color: black;
}

.........................www.my-infotech.online................... 43
How To Add CSS
 Three Ways to Insert CSS
 External CSS
 Internal CSS
 Inline CSS
Example External CSS
External styles are defined within the <link> element, inside the <head> section
of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
"mystyle.css"
<body>
body {
  background-color: lightblue;
<h1>This is a heading</h1>
}
<p>This is a paragraph.</p>
h1 {
</body>
  color: navy;
</html>
  margin-left: 20px;
}
.........................www.my-infotech.online................... 44
Internal CSS
Example : Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
.........................www.my-infotech.online................... 45
Inline CSS
An inline style may be used to apply a unique style for a single element.

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

Example : Inline styles are defined within the "style" attribute of the
relevant element:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

.........................www.my-infotech.online................... 46
CSS Border
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
O/P :
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style></head><body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body></html>
.........................www.my-infotech.online................... 47
CSS Margins O/P :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin
of 100px, a right margin of 150px,
a bottom margin of 100px, and a left margin
of 80px.</div>
</body>
</html>
.........................www.my-infotech.online................... 48
CSS Padding O/P :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of
50px, a right padding of 30px, a bottom padding
of 50px, and a left padding of 80px.</div>
</body>
</html>

.........................www.my-infotech.online................... 49
CSS Gradients
<!DOCTYPE html>
<html>
<head>
<style> O/P :
#grad1 {
height: 200px;
/* For browsers that do not support gradients */
background-color: red;
/* Standard syntax (must be last) */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts at the top. It starts red,
transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier
versions do not support gradients.</p>
</body>
</html>
.........................www.my-infotech.online................... 50
CSS Shadows O/P :
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
</style>
</head>
<body>
<h2>Cards</h2>
<div class="card">
<h1>1</h1>
<p>January 1, 2016</p>
</div>
</body>
</html>

.........................www.my-infotech.online................... 51
CSS Button
<!DOCTYPE html>
<html><head><style>
.button {
background-color: red;
border: none; O/P :
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style></head><body>
<h2>CSS Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">
</body></html>

.........................www.my-infotech.online................... 52
 Thank You
See you all on tomorrow
20th- Nov
With : core php and DBMS Topics

.........................www.my-infotech.online................... 53