HTML Layouts

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in
responsive form or we can say that HTML layout specifies a way in which the web pages can
be arranged. Web-page layout works with arrangement of visual elements of an HTML
document. Web page layout is the most important part to keep in mind while creating a website
so that our website can appear professional with the great look. You can also use CSS and
JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website
designing.

o <header>: It is used to define a header for a document or a section.

o <nav>: It is used to define a container for navigation links
o <section>: It is used to define a section in a document
o <article>: It is used to define an independent self-contained article
o <aside>: It is used to define content aside from the content (like a sidebar)
o <footer>: It is used to define a footer for a document or a section

HTML Layout Techniques

Creating layouts are the most important things while designing a website, as it will ensure that
your website looks in a well-arranged way and the content appears easy to understand. There
are various techniques, and frameworks available for creating layouts, but here we will learn
about simple techniques. You can use the following methods to create multicolumn layouts:

o HTML tables (Try not to use)

o CSS float property
o CSS framework
o CSS flexbox
o Layout using div

Cascading Style Sheet (css).

CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology. Our
CSS tutorial is developed for beginners and professionals. The major points of CSS are given
below:

o CSS stands for Cascading Style Sheet.

o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.
o A CSS rule consists of a selector and a declaration block.
o CSS Syntax

CSS Syntax
A CSS rule set contains a selector and a declaration block.

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

CSS Backgrounds
CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

CSS background-color

The background-color property is used to specify the background color of the element.

CSS background-image

The background-image property is used to set an image as a background of an element. By

default the image covers the entire element. You can set the background image for a page like
this.
<style>
body {
background-image: url("[Link]");
}
</style>

CSS background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like
this:
If the image above is repeated only horizontally (background-repeat: repeat-x;)
If the image above is repeated only Virtical (background-repeat: repeat-y;)
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; (horizontally)
}
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y; (vertical)
}
CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat
property:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

CSS background-position
The background-position property is used to specify the position of the background image.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or
scroll with the rest of the page in browser window. If you set fixed the background image then
the image will not move during scrolling in the browser. Let
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

if scroll the image in web page then use background-attachment:- scroll.

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below
• border-style
• border-color
• border-width
• border-radius

CSS Border Style

The border-style property specifies what kind of border to display.
The following values are allowed:
• dotted - Defines a dotted border

• dashed - Defines a dashed border

• solid - Defines a solid border

• double - Defines a double border

• groove - Defines a 3D grooved border. The effect depends on the border-color value

• ridge - Defines a 3D ridged border. The effect depends on the border-color value

• inset - Defines a 3D inset border. The effect depends on the border-color value

• outset - Defines a 3D outset border. The effect depends on the border-color value

• none - Defines no border

• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).
<style>
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
</style>
<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>

CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined
borders. With CSS, you have full control over the margins. There are properties for setting the
margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:

• auto - the browser calculates the margin

• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example :-
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

CSS Padding
Padding is used to create space around an element's content, inside of any defined borders.

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside
of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

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

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.

• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

<!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>

CSS Height, Width

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values

The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

Example :-
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>

CSS Box Model

All HTML elements can be considered as boxes.
The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below illustrates the box
model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between
elements.

<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px
green border.</div>

CSS Outline
CSS outline is just like CSS border property. It facilitates you to draw an extra border around
an element to get visual attention

CSS has the following outline properties:

• outline-style
• outline-color
• outline-width

<style>
p{
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
 padding: 20px;
}
</style>
</head>
<body>
<h2>CSS Outline</h2>
<p>welcome outline.</p>
</body>

CSS Icons
Icons can easily be added to your HTML page, by using an icon library. Icons can be defined
as the images or symbols used in any computer interface refer to an element. It is a graphical
representation of a file or program that helps the user to identify about the type of file
[Link] the icon library is the easiest way to add icons to our HTML page. It is possible
to format the library icons by using CSS.

Font Awesome Icons

To use the Font Awesome icons, go to [Link], sign in, and get a code to add in the
<head> section of your HTML page:

<script src="[Link]
crossorigin="anonymous"></script>

<script src="[Link] crossorigin="anonymous"></script>

<style>
.fas
{
font-size : 40px;
}
</style>
</head>
<body>
<h1>Font Awesome icon library</h1>
<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>

CSS Layout - The display Property

The display property is the most important CSS property for controlling layout.
The display Property
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The
default display value for most elements is block or inline
Block-level 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).
The <div> element is a block-level element.
Examples of block-level elements:
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
Examples of inline elements:
• <span>
• <a>
• <img>

A common example is making inline <li> elements for horizontal menus:

Example
<style>
li {
display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
<li><a href="/html/[Link]" target="_blank">HTML</a></li>
 <li><a href="/css/[Link]" target="_blank">CSS</a></li>
<li><a href="/js/[Link]" target="_blank">JavaScript</a></li>
</ul>
</body>
The following example displays <span> elements as block elements:
<style>
span {
display: block;
}
</style>
</head>
<body>
<h1>Display span elements as block elements</h1>
<span>A display property with</span> <span>a value of "block" results in</span> <span>a line
break between each span elements.</span>
</body>

The following example displays <a> elements as block elements:

<style>
a{
display: block;
}
</style>
</head>
<body>
<h1>Display links as block elements</h1>
<a href="/html/[Link]" target="_blank">HTML</a>
<a href="/css/[Link]" target="_blank">CSS</a>
<a href="/js/[Link]" target="_blank">JavaScript</a>
</body>
Hide an Element - display:none or visibility:hidden
Hiding an element can be done by setting the display property to none. The element will be
hidden, and the page will be displayed as if the element is not there:
Example
[Link] {
display: none;
}

visibility:hidden; also hides an element.

[Link] {
visibility: hidden;
}

CSS Layout - Horizontal & Vertical Align

Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;
Note: Center aligning has no effect if the width property is not set (or set to 100%).
<style>
.center {
margin: auto;
width: 50%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>Hello World!</p>
</div>
Center Align Text
To just center the text inside an element, use text-align: center;
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
Center an Image
To center an image, set left and right margin to auto and make it into a block element:
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block
element.</p>
<img src="[Link]" alt="Paris" style="width:40%">
</body>

CSS Layout - The position Property

The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an element.
There are five different position values:
• static
• relative
• fixed
• absolute
• sticky
Note :- Elements are then positioned using the top, bottom, left, and right properties. However,
these properties will not work unless the position property is set first. They also work
differently depending on the position value.
position: static;
All HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
<style>
.static {
border: 3px solid green;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>

position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
<style>
.fixed {
position: fixed;
top: 0;
left: 0;
width: 300px;
border: 3px solid #73AD21;
background-color:yellow;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays
in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>

position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.
<style>
.sticky {
position: sticky;
top: 0px;
padding: 5px;
background-color: #cae8ca;
 border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach
its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
</div>
</body>

CSS Layout - The z-index Property

The z-index Property
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be
placed in front of, or behind, the others).
An element can have a positive or negative stack order:

z-index Example
Here we see that an element with greater stack order is always above an element with a lower
stack order:

<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 11;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box
{
position: absolute;
z-index:13 ;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box
{
position: absolute;
z-index:12;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<h1>Z-index Example</h1>
<p>An element with greater stack order is always above an element with a lower stack order.</p>
<div class="container">
<div class="black-box">Black box (z-index: 1)</div>
<div class="gray-box">Gray box (z-index: 3)</div>
<div class="green-box">Green box (z-index: 2)</div>
</div>
</body>

CSS Layout - Overflow

The CSS overflow property controls what happens to content that is too big to fit into an area.
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.
The overflow property has the following values:
• visible - Default. The overflow is not clipped. The content renders outside the element's
box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified height.

overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the
element's box:
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the
box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need
it):
overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when necessary:
overflow-x and overflow-y
The overflow-x and overflow-y properties specifies whether to change the overflow of
content just horizontally or vertically (or both):
All Example :-
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
<style type="text/css" media="screen">
div
{
background-color: gray;
height: 100px;
width: 450px;
overflow: visible;
}
.one
{
background-color: gray;
height: 100px;
width: 165px;
overflow: hidden;
}
.two
{
background-color: gray;
height: 100px;
width: 165px;
overflow: scroll;
 }
.three
{
background-color: gray;
height: 100px;
width: 165px;
overflow: auto;
}
.four
{
background-color: gray;
height: 100px;
width: 165px;
overflow-y: scroll;
overflow-x: scroll;
}
</style>
</head>
<body>
<div>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br><br><br>
<hr>
<div class="one">
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 <br>
<hr>
<div class="two">
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br>
<hr>
<div class="three">
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br>
<hr>
<div class="four">
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>

CSS Layout - float and clear

The CSS float property specifies how an element should float.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left
to the text in a container.
The float property can have one of the following values:
• left - The element floats to the left of its container
• right - The element floats to the right of its container
Example :-
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
width:170px;
height:170px;
margin-left:15px;
}
.ab
{
float: left;
width:170px;
height:170px;
margin-left: 0;
}
.ab
{
float: left;
width:170px;
height:170px;
margin-left: 0;
}
</style>
</head>
<body>
<h2>Float Right</h2>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will
wrap around the image.</p>
<p><img src="[Link]" alt="Pineapple">
<img class="ab" src="[Link]" alt="Pineapple">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>

CSS Layout - The z-index Property

The z-index property specifies the stack order of an element.
The z-index Property
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be
placed in front of, or behind, the others).
An element can have a positive or negative stack order:
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
CSS Website Layout
Website Layout
A website is often divided into headers, menus, content and a footer:
There are tons of different layout designs to choose from. However, the structure above, is
one of the most common, and we will take a closer look at it in this tutorial.

CSS Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list
items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements as inline,
in addition to the "standard" code from the previous page:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Floating List Items

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a
layout for the navigation links:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
 overflow: hidden;
}

li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and change the
background color of the links when the user moves the mouse over them:
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on:
.active {
background-color: #04AA6D;
}

Right-Align Links
Right-align links by floating the list items to the right (float:right;):
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #04AA6D;
}
.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
 <li style="float:right"><a class="active"
href="#about">About</a></li></ul></body>

Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls
the page:

Fixed Top
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
}
.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
 <p>Some text some text some text some text..</p></div>
Fixed Bottom
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
Sticky Navbar
Add position: sticky; to <ul> to create a sticky navbar.
A sticky element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in place
(like position:fixed).
<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:#4CAF50;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari
requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
</body>
Image Gallery
CSS can be used to create an image gallery.
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
[Link]:hover {
border: 1px solid red;
}
[Link] img {
width:100%;
height: auto;
}
[Link] {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" >
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights">
</a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

CSS Tables
The look of an HTML table can be greatly improved with CSS:

Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:
<style>
table, th, td {
border: 1px solid;
}
</style>

Full-Width Table
The table above might seem small in some cases. If you need a table that should span the
entire screen (full-width), add width: 100% to the <table> element:
<style>
table, th, td {
border: 1px solid;
}
table {
width: 100%;
}
</style>

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a
single border:

<style>
table, td, th {
border: 1px solid;
}

table {
width: 100%;
border-collapse: collapse;
}
</style>

CSS Table Size

Table Width and Height

The width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements
to 70px:

<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
}
td {
height: 70px;
text-align:center;
}
</style>

CSS Table Style

Table Padding

To control the space between the border and the content in a table, use the padding property
on <td> and <th> elements:

<style>
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
}
th, td {
padding: 15px;
}
</style>
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>raj</td>
<td>patil</td>
<td>100</td>
</tr>
<tr>
<td>raj</td>
<td>patil</td>
<td>150</td>
</tr>
<tr>
<td>raj</td>
<td>patil</td>
<td>300</td>
</tr>
<tr>
 <td>raj</td>
<td>patil</td>
<td>250</td>
</tr>
</table>

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
tr:hover
{
background-color: coral;
}
Table Color
The example below specifies the background color and text color of <th> elements:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #04AA6D;
color: white;
}
td
{
background-color: red;
}
</style>

CSS Links
With CSS, links can be styled in many different ways.

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
<style>
a{
color: hotpink;}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
<a href="[Link]" target="_blank">This is a link</a>

Background Color
The background-color property can be used to specify a background color for
links:
<style>
a:link {
background-color: yellow;}
a:visited {
background-color: cyan;}
a:hover {
background-color: lightgreen;}
a:active {
background-color: hotpink;}
</style>
<a href="[Link]" target="_blank">This is a link</a>
Link Buttons
This example demonstrates a more advanced example where we combine several CSS
properties to display links as boxes/buttons:
<!DOCTYPE html>
<html>
<head>
<style>
a{
border: 2px solid green;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover{
background-color: green;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<a href="[Link]" target="_blank">This is a link</a>
</body>
</html>
 CSS Shadow Effects
CSS box-shadow Property
The CSS box-shadow property is used to apply one or more shadows to an element.
CSS box-shadow Property
The CSS box-shadow property is used to apply one or more shadows to an element.
Example:-

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>

Specify a Color for the Shadow

The color parameter defines the color of the shadow.

<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>

Add a Blur Effect to the Shadow

The blur parameter defines the blur radius. The higher the number, the more blurred the
shadow will be.
<style>
div {
 width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
Add Multiple Shadows
An element can also have multiple shadows:
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>
<h1>Multiple Shadows</h1>
<div id="example1">
<h2>Multiple shadows</h2>
</div>
<div id="example2">
<h2>Multiple shadows with blur effect</h2>
</div>
</body>

CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element.

Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower the value,
the more transparent:
img {
opacity: 0.5;
}
mouse move the opacity less hover effect
img:hover {
opacity: 0.5;
}

CSS Dropdowns
Create a hoverable dropdown with CSS.

Demo: Dropdown Examples

Move the mouse over the examples below:

Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over
an element.

.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding: 12px 12px;
}

.dropdonw:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
 <div class="dropdonw">
<p>mouse over me</p>
<div class="dropdown-content">
<p>Hello Word</p>
</div>
</div>
</body>

Example Explained
HTML) Use any element to open the dropdown content, e.g. a <span>, or a
<button> element.

Use a container element (like <div>) to create the dropdown content and add
whatever you want inside of it.

Wrap a <div> element around the elements to position the dropdown content
correctly with CSS.

CSS) The .dropdown class uses position:relative, which is needed when we want
the dropdown content to be placed right below the dropdown button
(using position:absolute).

The .dropdown-content class holds the actual dropdown content. It is hidden by

default, and will be displayed on hover (see below). Note the min-width is set
to 160px. Feel free to change this. Tip: If you want the width of the dropdown
content to be as wide as the dropdown button, set the width to 100%
(and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the CSS box-shadow property to make
the dropdown menu look like a "card".

The :hover selector is used to show the dropdown menu when the user moves
the mouse over the dropdown button.

Dropdown Menu
Create a dropdown menu that allows the user to choose an option from a
list:

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div></div>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

CSS Forms
Styling Input Fields
Use the width property to determine the width of the input field:

First Name textbox

input {
width: 100%;
}
The example above applies to all <input> elements. If you only want to style
a specific input type, you can use attribute selectors:

• input[type=text] - will only select text fields

• input[type=password] - will only select password fields
• input[type=number] - will only select number fields
• etc..

Padded Inputs
Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to
add some margin, to add more space outside of them:

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

Bordered Inputs
Use the border property to change the border size and color, and use
the border-radius property to add rounded corners:

input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

If you only want a bottom border, use the border-bottom property:

input[type=text] {
border: none;
border-bottom: 2px solid red;
}

Colored Inputs
Use the background-color property to add a background color to the input, and
the color property to change the text color:
input[type=text] {
background-color: #3CBC8D;
color: white;
}

Focused Inputs
By default, some browsers will add a blue outline around the input when it
gets focus (clicked on). You can remove this behavior by adding outline:
none; to the input.

Use the :focus selector to do something with the input field when it gets
focus:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}
input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Input fields with color on :focus</h2>
<p>Here, the input field gets a color when it gets focus (clicked on):</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Example 2:-
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>
<h2>Input fields with black border on :focus</h2>
<p>Here, the input field gets a black border color when it gets focus (clicked on). We have also
added the CSS transition property to animate the border color (takes 0.5 seconds to change the
color on focus):</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>

Animated Search Input

In this example we use the CSS transition property to animate the width of
the search input when it gets focus. You will learn more about
the transition property later, in our CSS Transitions chapter.

<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
 border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('[Link]');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<h2>Animate width of search input</h2>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

Styling Select Menus

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

Form Example with user registration

<!DOCTYPE html>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top
of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the
two columns stack on top of each other instead of next to each other.</p>

<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
 </form>
</div>
</body>
</html>
CSS Animations
CSS allows animation of HTML elements without using JavaScript or Flash!

In this chapter you will learn about the following properties:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

What are CSS Animations?

An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must first specify some keyframes for the animation.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually
change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element
Example
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body></html>
Note: The animation-duration property defines how long an animation should take to complete.
If the animation-duration property is not specified, no animation will occur, because the default
value is 0s (0 seconds).

<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>

Example 2
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>
Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following
example has a 2 seconds delay before starting the animation:</p>

<div></div>

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation

should run.

The following example will run the animation 3 times before it stops:

<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
 animation-iteration-count: 3;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run.
The following example will run the animation 3 times before it stops:</p>

<div></div>

Imp Note: - animation-iteration-count: infinite; this is continues animation in web page

************* Sample Website***************

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IT Professional Institute</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header
{
height: 100px;
}
h1
{
position: absolute;
top: 8px;
right: 16px;
}
img
{
height: 100px;
width: 100%;
}
ul
{
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(50, 50, 50);
overflow: hidden;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-decoration: none;
padding: 14px 16px;
}
li a:hover
{
background-color: green;
}
.leftcolom
{
float: left;
width: 15%;
background-color: #47433e;
height: 100vh;
}
.row
{
height: 100vh;
}
.rightcolom
{
float: right;
width: 85%;
background-color: #2d89f3;
height: 100vh;
}
.row:after
{
 content: "";
display: table;
clear: both;
}
.vul
{
margin: 0;
padding: 0;
color: white;
}
.vli a
{
display: block;
padding: 12px 14px;
text-decoration: none;
color: white;
}
.vli a:hover
{
background-color: green;
}
.maincon
{
padding: 15px;
}
footer
{
bottom: 0;
padding: 10px;
background-color: gray;
}
</style>
</head>
<body>
<header>
<img src="[Link]" alt="img1">
<h1>IT Computer Institute</h1>
</header><!-- /header -->
<ul>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Course">Course</a></li>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Course">Course</a></li>
 </ul>
<section>
<div class="row">
<div class="leftcolom">
<div class="vul">
<div class="vli">
<a href="#" title="home">Home</a>
<a href="#" title="home">Computer-
Course</a>
<a href="#" title="home">Home</a>
<a href="#" title="home">Home</a>
</div>
</div>
</div>
<div class="rightcolom">
<div class="maincon">
sadfsadfsdfsdf
</div>
</div>
</div>
</section>
<footer>
<p>copyright@itprofessional</p>
</footer>
</body>
</html>
Responsive Web Design - Media Queries
What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example
If the browser window is 600px or smaller, the background color will be lightblue:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>welocome css media query</p>
</body>
</html>
----------------------------------------------------- Example ----------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.main
{
margin-left: 54px;
}
.leftsidebar
{
float: none;
width: auto;
}
.menulist
{
margin: 0;
padding: 0;
}
.menuitem
{
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 500px)
{
.leftsidebar
{
width: 200px;
float: left;
}
.main
{
margin-left:216px;
}
}
</style>
</head>
<body>
<div>
<div class="leftsidebar">
<ul class="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div class="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480
pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the
content.</p>
</div>
</div>

</body>
</html>
------------------- Four Equal Coloumn Screen Adjust ment size coloumn ---------------------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
 <p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>
 CSS Animation
Animation

Animation is the process of creating motion effects and change the [Link] does
supported different animation effects to change the event motion.

Bounce
Bounce Animation effect is used to move the element quick up, back, or away from a
surface after hitting it.

Syntax
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}