Scribd
Upload
88 views

Inline CSS:: CSS: Cascading Style Sheet

This document provides information about CSS (Cascading Style Sheets) including how to link HTML and CSS documents, apply styles using inline CSS, internal CSS and external CSS, and descriptions of CSS properties like padding, borders, margins, selectors, positions and box model.

Uploaded by

tech.encyclopaedia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
88 views

Inline CSS:: CSS: Cascading Style Sheet

This document provides information about CSS (Cascading Style Sheets) including how to link HTML and CSS documents, apply styles using inline CSS, internal CSS and external CSS, and descriptions of CSS properties like padding, borders, margins, selectors, positions and box model.

Uploaded by

tech.encyclopaedia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 44

CSS

CSS: Cascading Style Sheet


Linking HTML and CSS documents.
Which is used to apply the colors as well as style properties to the HTML
document to make the output look attractive.
Current version is CSS.3
File is saved with “.css” extension
There are ways how we can apply styles to the HTML document.
Three Types:
Inline CSS
Internal CSS
External CSS

INLINE CSS:
It is used to apply the styles by taking style as the attribute inside the opening tag.
CSS properties should be represented inside the “ ” of the style attribute.
SYNTAX:
< Tag name style=” css property: value;”> content </tag name>
Example:
<!DOCTYPE html>

<html lang="en">
<head>
<title>inline.cs</title>
</head>
<body>
<h1 style="color:orange" align="right">
hello good afternoon folks
</h1>
<h1 style="background-color: lightgreen;" align="center">
we have started something that we don't know what to do
</h1>
<h1 style="background-color:pink;color: yellow;">
22nd is something we dont know what is going to happen so lets wait and see
</h1>
</body>
</html>

Disadvantages:
The major drawback of inline css is mixing of html code with css styles.
When we use inline css duplicate code for the styles will be generated.
Error finding is very difficult In this inline css.

Internal css:
This is designed to overcome the drawbacks of inline css.
The styles will be applied by taking style as the tag inside head tag.
Syntax:
<head>
<style>
Tag name{css property: value;}
</style>
</head>
2.
<body>
<tag name> content </tag name>
</body>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>internal css</title>
<style>
h1{
background-color: chocolate;
color: aquamarine;
text-align: center;
font-size: 25px;
font-style: oblique;
}
h2{
background-color: palevioletred;
color: red;
text-align: center;
font-size: 30px;
font-style: italic;
}
h3{
background-color:red;
color: black;
text-align:center ;
font-size: 45px;
font-style: inherit;
}
h4{
background-color: brown;
color: yellowgreen;
text-align: left;
font-size: 50px;
font-style: italic;
}
</style>
</head>
<body>
<h1> christmas is on sunday</h1>
<h2>new year is on sunday</h2>
<h3>pongal is also on sunday</h3>
<h4>NOTE: 1.so keep holidays from two days before and enjoy the weekend with
family !enjoy pandagoo.
2.If not done as per above guidelines serious action will be taken. </h4>
</body>
</html>

External css:
External css is used to separate HTML content and css styles.
All the css properties which are required for the HTML content will be written
inside a new document by saving a file with “.CSS” extension.
One external sheet of css can be linked with multiple HTML documents.
Example:
Html….
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>25th is christmas</h1>
<h2>but its sunday</h2>
<h3>holiday on sunday.....! take it easy :)</h3>

</body>
</html>
Css
body{
background-color: red;
}
h1{
color: rgb(255, 255, 255);
}
h2{
color: rgb(0, 95, 0);
}
h3{
color: greenyellow;
}

Link css file in htlm with href tag as shown in above html example
In css body is used to apply same effect for entire screen

Css -box model


Css box model consist of basic properties which are given to the content which
will be displayed on the browser.
the values given to this properties are In the form of clockwise direction.

CSS Padding
It is the property which provides spacing around the content.
The spacing can be specified by providing different values for each direction
around the content.
Syntax:
1. Padding: value ; { single value represents all 4 directions will have same spacing }
2. Padding: value1 value2;{value1 for top and bottom spacing value 2 for left and right spacing}
3. Padding: value1{top} value2{right and left} value3{bottom};
4. Padding: top right bottom left;
5. Padding-left: value
6. Padding-top: value
7. Padding-right: value
8. Padding-bottom: value;

example
<!DOCTYPE html>
<html lang="en">
<head>
<title>css padding properties</title>
<style>
body{
font-size: 25px;
font-style: italic;
}
h1{
background: linear-
gradient(45deg,violet,indigo,blue,green,yellow,orange,red);
color: azure;
padding: 50px;
}
</style>
</head>
<body>
<h1>hero honda splendor</h1>
<h2>balayya babu thunder</h2>
</body>
</html>

Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<title>css padding properties</title>
<style>
body{
font-size: 25px;
font-style: italic;
}
h1{
background: linear-
gradient(45deg,violet,indigo,blue,green,yellow,orange,red);
color: azure;
/*padding: 50px;*/
/*padding: 50px 30px;*/
/*padding: 50px 30px 20px;*/
/*padding: 50px 40px 30px 50px;*/
/*padding-left: 30px;*/
/*padding-top: 40px;*/
/*padding-right: 20px;*/
/*padding-bottom: 25px;*/
}
</style>
</head>
<body>
<h1>hero honda splendor</h1>
<h2>balayya babu thunder</h2>
</body>
</html>

In above html the padding properties are commented we can use any type of
padding as per need

CSS Borders
There are three elements
1 border-width=====>thickness of the border
2 border-style====>solid,double,dashed,dotted,groove,ridge,inset,outset,hidden,none
3 border-color====>color of the border

It is a property which is used to provide boundaries for the content.


CSS border property can be explained by taking width,style and color of the
borders. Width indicates the thickness of the border lines.
Style indicates the design for the border lines {solid, double, dashed, dotted, groove,
ridge, inset, outset, hidden, none}

Color indicates the type of color that need to be given for the border lines.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>borders</title>
<style>
h1{
background-color: aqua;

color: black;
text-align: center;
padding:50px;
border-width: 5px;
border-style: dotted;
border-color: brown;
}
</style>
</head>
<body>
<h1>hello all</h1>

</body>
</html>

We can write borders syntax in one line.


Syntax
<h1 style=”border: width style color;”>content</h1>
Example
<h1 style=”border: 50px dotted red;”>content</h1>
Without any content we can design pages using css
Ex
<!DOCTYPE html>
<html lang="en">
<head>
<title>borders 2</title>
<style>
h1{
background-color : gray;
width: 200px;
height: 300px;
padding: 30px;
border-radius: 50%;
border-top: 5px solid blue;
border-bottom: 5px dotted green;
border-left: 5px double red;
border-right: 5px dashed lavender;
}
h2{
width: 300px;
height: 300px;
border: 2px solid black;
border-top-left-radius: 180px;
border-bottom-right-radius: 220px;

}
</style>
</head>
<body>
<h1></h1>
<h2></h2>
</body>
</html>

CSS margins
Margin is a property which provide spacing around borders and also provides
alignments for the content.
Syntax:
Margin:value(all directions same)
Margin: value1(top&bottom) value2(up&down)
Margin: value1(top) value2(left &right) value2(bottom)
Margin: top right bottom left
Margin-left: value
Margin-right: value
Margin-top: value
Margin-bottom:value

Ex
<!DOCTYPE html>
<html lang="en">
<head>
<title>border3</title>
<style>
body{
font-size: 30px;
font-style: italic;
}
h1{
color: aqua;
padding: 30px;
border: 2px solid pink;
margin: 10px;
}
h2{
color: blue;
padding: 50px;
border: 3px dashed yellow;
margin: 10px 20px 30px 50px;
}
h3{
color: violet;
padding: 20px;
border: 3px dashed greenyellow;
margin: 30px 50px;
}
</style>
</head>
<body>
<h1>ABC</h1>
<h2>abc</h2>
<h3>123</h3>
</body>
</html>

CSS Selectors:
Selector is a property which is used to select the tags and apply styles individually
There are 7 selectors which are used in CSS and there are combinators which are
used in Java script to get the element from HTML document.
They are: -
 Tag name selector/default selector
 ID selector
 Class selector
 Attribute selector
 Group selector
 Universal selector
 Pseudo selector
Combinators:-
 Descendent selector
 Child selector
 General sibling selector
 Adjacent sibling selector
Tag name selector/default selector:-
It is a selector which takes tag name as a reference to provide CSS properties for
the content.
Using this selector we cant provide individual styles for each and every tag.
Syntax:-
<style>
Tag name {
CSS property: value;
}
</style>

CSS Positions
Static and relative
<!DOCTYPE html>
<html lang="en">
<head>
<title>static&relative</title>
<style>
div{
width: 100px;
height: 100px;
box-shadow: 0 0 15px black;
margin: 5px;
}
#static:hover{
background-color: greenyellow;
position: static;
left: 100px;
}
#relative:hover{
background-color: blueviolet;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div id="static"></div>
<div id="relative"></div>
</body>
</html>

Absolute:
It is a property which is dependent on parent element and its position
Absolute value always starts from origin of parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>absolute</title>
<style>
#parent{
width: 700px;
height: 400px;
background-color: aquamarine;
position: relative;
left: 300px;
}
.child1{
background-color: azure;
width: 50px;
height: 50px;
position: absolute;
}
.child2{
background-color: black;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
}
</style>
</head>
<body>
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
Fixed
It is a value which moves from the origin of the webpage to the required position
and gets fixed in the position

Sticky

It is a value which will stick the element from the current position to required
position
This value is used in navigation bars
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fixed_sticky</title>
<style>
div{
width: 150px;
height: 100px;
box-shadow: 0 0 15px red;
margin: 2px;
}
#fixed{
background-color: yellow;
position: fixed;
left: 300px;
top: 200px;
}
#sticky{
background-color: yellow;
position: sticky;
left: 300px;
top: 0px;
}
</style>
</head>
<body>
<p>lorem*100</p>
<div id="fixed"></div>
<div id="sticky"></div>
<p>lorem*100</p>
</body>
</html>

CSS Transforms

It is a property which is used to change the position, shape, size& alignment of


the elements by taking transform values.
Transforms are classified into 2 types.
1. 3D transforms this transformation is used by the designing people
2. 2D transforms  this transform is used by developers to change elements

Translate:
It is a property which is used to move the element on horizontal axis or
vertical axis or both axis
The representation of values are done using pixel(px) or percentage(%)
Transform: translate (x, y)
Transform: translateX (x-value)
Transform: translateY (y-value)

<!DOCTYPE html>
<html lang="en">
<head>
<title>translate</title>
<style>
div{
width: 100px;
height: 100px;
box-shadow: 0 0 15px yellow;
position: relative;
}
div:hover{
background-color: orangered;
transform: translate(200px,200px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Rotate:
It is a value which is used to rotate the elements with a particular angle that
ranges between(0 degree to 360 degree)
Syntax:
Transform: rotate (degree(eg:120deg));
Transform: rotateX (degree(eg:120deg));
Transform: rotateY (degree(eg:120deg));

<!DOCTYPE html>
<html lang="en">
<head>
<title>rotate</title>
<style>
div{
position: relative;
left: 200px;
top: 300px;
width: 100px;
height: 100px;
background: linear-gradient(to top,/*to bottom,to left,to
right*/,black,blue,lightblue);
}
div:hover{
font-size: 30px;
/*transform: rotate(220deg);
transform: rotateX(220deg);*/
transform: rotateY(220deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Scale:
It is a value which is used to increase or decrease the size of the element by
providing the numbers of the scale value.
Transform: scale (value of width, value of height)
Transform: scaleX (value of width)
Transform: scaleY (value of height)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Scale</title>
<style>
h1{
color: blueviolet;
position: relative;
left: 50%;
top: 230px;
width: 200px;
height: 200px;
}
h1:hover{
color: burlywood;
transform: scale(2,2);
}
</style>
</head>
<body>
<h1>Jai balayya.....!</h1>
</body>
</html>

SKEW:

Skew is a value which is used to align the contents in a slant manner


Transform: skew (deg)
Transform: skewX (deg)
Transform: skewY (deg)

<!DOCTYPE html>
<html lang="en">
<head>
<title>skew</title>
<style>
h1{
width: 300px;
height: 150px;
margin: 0% 30%;

}
h1:hover{
background-color: red;
color: goldenrod;
transform: skew(45deg);
}
</style>
</head>
<body>
<h1>Coco-Cola pepsi...........!</h1>
</body>
</html>

Transform-origin,float
Transitions:
Transition-duration
Transition-delay
Transition-property
Transition-timing-function
<!DOCTYPE html>
<html lang="en">
<head>
<title>door</title>
<style>
.parent{
width: 600px;
height: 250px;
border: 2px solid black;
position: relative;
left: 300px;
top: 200px;
display: inline-block;
}
.child1{
background-color: orangered;
width: inherit;
height: inherit;
}
.child1:hover{
background-color: aquamarine;
transform: perspective(800px) rotateY(45deg);
transition-duration: 2s;
transform-origin: left;
}

.child2{
background-color: orangered;
width: inherit;
height: inherit;
}
.child2:hover{
background-color: aquamarine;
transform: perspective(800px) rotateY(-45deg);
transition-duration: 2s;
transform-origin: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>

It is a property which is used to provide timing functionalities for the transforms


for smoother and perfect transformation
There are 4 properties which are used to add timing functions listed above

Transition duration
It is a property which defines the duration of transformation for a element
Its value is represented in sec(s) or milli seconds(ms)

Transition delay
It is a property which defines how much late the transformation should start
Its value is represented in sec(s) or milli seconds(ms)

Transition property
It is a property which is used to represent a particular property to get transform

Transition timing function


It is a property which represents the speed nature of the transform for a
particular element.
The values used for timing function are:-
Linear
ease
ease-in
ease-out & ease-in-out

CSS Animations
animation-name
animation-durations, ms
animation-delays, ms
animation-timing-functionlinear, ease, ease-in, ease-out, ease-in-out
animation-iteration-function1,2,3,n+1
animation-directionnormal, alternate, reverse, alternate-reverse
animation-fill-mode
@keyframes animationname {
From {

}
To {

}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>animations</title>
<style>
div{
margin: 300px 0 0 500px;
border: 2px solid black;
width: 300px;
height: 300px;
background: repeating-conic-gradient(red 20%,green 30%,yellow 40%);
animation-name: anime;
animation-duration: 5s;
animation-delay: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;

}
@keyframes anime {
from{
transform: scale(1,1);
filter: hue-rotate(1deg);
}
to{
transform: scale(2,2);
filter: hue-rotate(360deg);
}

}
</style>
</head>
<body>
<div>

</div>
</body>
</html>
Display Flex: -

Flex is a value which is used to arrange the content either in row direction or
column direction.
There are different properties which are associated with flex value and they are
listed below
 Flex-direction
 Flex-wrap
 Flex-flow
 Justify-content
 Align-items
FLEX DIRECTION
it is a property which is used to arrange the content in a specified direction
the default value of the direction is row
the values that are used for the flex direction are row, row-reverse, column,
column-reverse

<!DOCTYPE html>
<html lang="en">
<head>
<title>flex-direction</title>
<style>
body{
margin: 0px;
}
.parent{
height: 300px;
background-color: blueviolet;
display: flex;
flex-direction: row;
/*flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;*/
}
.child{
background-color: yellowgreen;
width: 50px;
height: 50px;
margin: 5px;
border: 2px solid rgb(0, 0, 0);
text-align: center;
}
</style>

</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

</body>
</html>

Flex-wrap

It is a property which is used to arrange the content within the boundary line
The values which are used to wrap the data are listed below
Wrap, nowrap & wrap-reverse
.parent{
height: 300px;
background-color: blueviolet;
display: flex;
flex-direction: row;
/*flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;*/
flex-wrap: wrap;

}
.child{
background-color: yellowgreen;
width: 50px;
height: 50px;
margin: 5px;
border: 2px solid rgb(0, 0, 0);
text-align: center;
font-size: 25px;
}

Flex-flow
It is a property which combines flex direction and flex wrap as a single unit.
the values used for flex flow are listed below.
 Row wrap
 Row nowrap
 Row wrap-reverse
 Row-reverse wrap
 Row-reverse nowrap
 Row-reverse wrap-reverse
 Column wrap
 Column nowrap
 Column wrap-reverse
 Column-reverse wrap
 Column-reverse nowrap
 Column-reverse wrap-reverse

.parent{
height: 300px;
background-color: blueviolet;
display: flex;
flex-flow: column wrap-reverse;

}
Justify-content
It is a property which is used to align the content only in row direction or
horizontal direction.
When we use display value as flex then only, we can use justify-content property.
There are 6 values which are used for justify-content are listed below.
 Center
 Start
 End
 Space-between
 Space-evenly
 Space-around

.parent{
height: 300px;
background-color: blueviolet;
display: flex;
justify-content: space-around;

Align Items

Align items is a property which is used to arrange the content in the column
direction or vertical direction in the web page.
The values used to arrange the content are flex-start, flex-end & center
.parent{
height: 300px;
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;

}
HTML Layouts.

header

Navigation bar

Section & Article

Aside

Figure & Figure


caption

Details & Summary

Footer

HTML Layouts:
Layout is defined as the design or the blue-print which is used to construct a
webpage or a website using schematic tags.
Schematic tags other tags which have proper naming and definition for
constructing the layouts
Schematic tags acts as containers
Aside tag:
It is a tag which is used to display the content either on right side or left side or on
both sides
Float is the property which is used to arrange the content to the particular side
Syntax:
<aside>…</aside>

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<title>aside</title>
<style>
body{
margin: 0;
padding: 0;

}
aside{
float: left;
background: linear-gradient(45deg,lightblue,lightgreen);
display: flex;
flex-direction: column;
height: 100vh;
}
a{
font-style: italic;
font-size: 25px;
text-decoration: none;
color: black;
padding: 15px;
margin: 15px;

}
a:hover{
background: linear-gradient(45deg,darkblue,darkgreen);
color: snow;
border: 2px solid black;
border-radius: 50px;
text-align: center;
}
img{
width: 100px;
height: 100px;
position: relative;
left: 25%;
border: 0px solid black;
border-radius: 50%;
}
</style>
</head>
<body>
<aside class="animate__animated animate__slideInLeft">
<img
src="https://static.vecteezy.com/system/resources/previews/007/033/146/original/
profile-icon-login-head-icon-vector.jpg" alt="">
<a href="https://www.google.com">Google</a>
<a href="www.facebook.com">Facebook</a>
<a href="www.youtube.com">Youtube</a>
<a href="web.whatsapp.com">whatsapp</a>
<a href="www.instagram.com">instagram</a>
</aside>
</body>
</html>

Section & article tag:

Section is a tag which is used to divide the webpage into different division
Article tag is a individual tag which is used to display the content like text ,images,
audio files and video files.
Syntax:
<section>
<article>……</article>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<title>scale & article</title>
<style>
body{
margin: 0;
padding: 0;
height: ;

}
section{
background-color: bisque;
display: flex;
justify-content: center;
height: 100vh;
}
article{
width: 300px;
height: fit-content;
border: 2px solid black;
margin: 15px;
text-align: center;
font-style: italic;
padding: 5px;
border-radius: 15px;
}
img{
width: 100px;
height: 150px;
border-radius: 15px;
}
article:nth-child(1){
background-color: rgb(0, 105, 253);
color: ghostwhite;
}
article:nth-child(2){
background: linear-gradient(45deg,rgb(172, 85, 85),red,white);

}
article:nth-child(3){
background:linear-gradient(45deg,blue,gold,red);
color: ghostwhite;
}
h1{
font-size: 30px;
}
</style>
</head>
<body>
<section>
<article>
<h1>CRICKET</h1>
<img
src="https://st2.cricketcountry.com/wp-content/uploads/cricket/image_201310151310
36.jpg" alt="">
<p>Cricket is a bat-and-ball game played between two teams of eleven
players on a field at the centre of which is a 22-yard (20-metre) pitch with a
wicket at each end, each comprising two bails balanced on three stumps. The
batting side scores runs by striking the ball bowled at one of the wickets with
the bat and then running between the wickets, while the bowling and fielding side
tries to prevent this (by preventing the ball from leaving the field,
information.</p>
</article>
<article>
<h1>WWE</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/WWE_
%282014%29_logo.svg/350px-WWE_%282014%29_logo.svg.png" alt="">
<p>World Wrestling Entertainment, Inc., doing business as WWE, is an
American professional wrestling promotion. A global integrated media and
entertainment company, WWE has also branched out into other fields, including
film, American football, and various other business ventures. The company is
additionally involved in licensing its intellectual property to companies to
produce video games and action figures ashaga ajsygdiyw yasgdiaj yadgfia aygfia
ajdygf.</p>
</article>
<article>
<h1>PISTON CUP</h1>
<img
src="https://static.wikia.nocookie.net/piston-cup/images/4/4e/Piston_Cup_present_
logo.png/revision/latest?cb=20211112012502" alt="">
<p>Welcome to the Piston Cup Wiki, we are an unofficial, fanonical,
and alternate World of Cars universe centering on the racing competitions and
making parodies of NASCAR tracks and many fictional new elements. A list of
racing competitions, as well as our other wikis are below. a few of them are
outside of this wiki. Our main racing competition universe is the Piston Cup
Racing Series. The Piston Cup is based off the real-life NASCAR racing
competition.</p>
</article>
</section>

</body>
</html>

Header & Footer tag:


Header is a tag which is used to display the name of the webpage along with the
logo of the title.
Syntax:
<header></header>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Header and Footer</title>
<style>
body
{
margin: 0;
padding: 0;
}
span:nth-child(1)
{
color: orange;
}
span:nth-child(2)
{
color: ghostwhite;
}
header{
padding: 1px 0;
background-image: url();
font-size: 15px;
}
footer{
text-align: center;
color: ghostwhite;
padding: 1px 0;
background-image: url();
font-size: 20px;
}
section
{
background: linear-gradient(45deg,greenyellow,orangered);
display: flex;
justify-content: center;
}
img{
height: 200px;
width: 300px;
}
article{
margin: 5px;
padding: 10px;
border: 2px solid black;
border-radius: 15px;
}
h2
{
text-align: center;
}
a
{
text-decoration: none;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<header>
<h1 id="home"><span>J</span><span>Spiders</span></h1>
</header>
<section>
<article>
<img src="" alt="">
<h2>Java Full Stack</h2>
<ul>
<li>core java</li>
<li>Adavance Java</li>
<li>Springs and Hibernate</li>
<li>Sql</li>
<li>Web-Tech</li>
<li>Aptitude</li>
</ul>
</article>
<article>
<img src="" alt="">
<h2>Python Full Stack</h2>
<ul>
<li>Core Python</li>
<li>Adavance Python</li>
<li>Django and Framework</li>
<li>Sql</li>
<li>Web-Tech</li>
<li>Aptitude</li>
</ul>
</article>
<article>
<img src="" alt="">
<h2>MERN Full Stack</h2>
<ul>
<li>Mongo Db</li>
<li>Express Js</li>
<li>React Js</li>
<li>Node Js</li>
<li>Web-Tech</li>
<li>Aptitude</li>
</ul>
</article>
</section>
<footer>
<h3>CopyRights &copy 2023 Jspiders</h3>
<p>Address:marthahalli,bangalore</p>
<button>
<a href="#home">Home</a>
</button>
</footer>
</body>
</html>

Footer is a tag which is used to display the copyrights, the address of the
webpage, feedback info and home button which is used to navigate from bottom
to top
Syntax:
<footer></footer>

Nav Bar:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.2.1/css/all.min.css" integrity="sha512-
MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/
9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<style>
body{
margin: 0;
padding: 0;
}
nav{
background: linear-gradient(45deg, rgb(186, 0, 171),green,blue);
background-size: cover;
display: flex;
justify-content: space-around;
padding: 20px;

}
a{
text-decoration: none;
color: azure;
font-size: 30px;
font-style: oblique;
}
a:hover{
background: linear-gradient(45deg,darkblue,darkgreen,red);
padding: 10px;
border-radius: 30px;
}
</style>
</head>
<body>
<nav>
<a href=""><i class="fa-sharp fa-solid fa-house"> HOME</i></a>
<a href=""><i class="fa-sharp fa-solid fa-rotate-right"> Reload</i></a>
<a href=""><i class="fa-sharp fa-solid fa-headphones"> Listen</i></a>
<a href=""><i class="fa-sharp fa-solid fa-camera"> Camera</i></a>
<a href=""><i class="fa-sharp fa-solid fa-comments"> Chat with
us</i></a>
</nav>
</body>
</html>

Details & summary:

Details and summary tag are used to display the information related to a
particular term or particular image related to the webpage.
Syntax:-
<details>
<summary>Term</summary>
<p></p>
</details>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
details{
margin: 20px;
display: inline-flex;
}
</style>
</head>
<body>
<details>
<summary>Java</summary>
<ul>
<li>core java</li>
<li>Adavance Java</li>
<li>Springs and Hibernate</li>
<li>Sql</li>
<li>Web-Tech</li>
<li>Aptitude</li>
</ul>
</details>
<details>
<summary>Python</summary>
<ul>
<li>Core Python</li>
<li>Adavance Python</li>
<li>Django and Framework</li>
<li>Sql</li>
<li>Web-Tech</li>
<li>Aptitude</li>
</ul>
</details>
<details>
<summary>MERN</summary>
<ul>
<li>Mongo Db</li>
<li>Express Js</li>
<li>React Js</li>
<li>Node Js</li>
<li>Web-Tech</li>
<li>Aptitude</li>
</ul>
</details>
</body>
</html>
Figure & Fig caption:
Figure and fig caption are used to display the images on the browser with titles
Syntax
<figure>
<img src=”” alt=””>
<figcaption>
Content
</figcation>
</figure>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
text-align: center;
}
figure{
width: 300px;
height: 350px;
border: 2px solid black;
text-align: center;
display: inline-block;
}
img{
height: inherit;
width: inherit;
}
figcaption{
font-size: 20px;
font-style: oblique;
}
</style>
</head>
<body>
<figure>
<img src="https://www.loudegg.com/wp-content/uploads/2020/10/Mickey-
Mouse.jpg" alt="">
<figcaption>Micky mouse</figcaption>
</figure>
<figure>
<img
src="https://static.vecteezy.com/system/resources/previews/004/226/762/original/
panda-cartoon-cute-say-hello-panda-animals-illustration-vector.jpg" alt="">
<figcaption>Panda</figcaption>
</figure>
<figure>
<img
src="https://i.pinimg.com/564x/9b/a2/57/9ba25796112cad616be27e473ae1e149--kids-
cartoon-characters-childhood-characters.jpg" alt="">
<figcaption>Jerry</figcaption>
</figure>
</body>
</html>

Iframe-tag:
Iframe is a tag which is used to display the media files like images,audio files&
video files by copying the embed links of the media files
Syntax
<iframe src="" frameborder="0"></iframe>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<iframe src="./wallpaperflare.com_wallpaper.jpg" frameborder="0"
height="350px" width="300px"></iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/MGX400LDfVU" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VFBtatQRE8w" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>

Media Queries: -

Media queries is a property which is used to provide the responsiveness for a


particular element or for the entire web-page

@media media type and (expression){


Body { Minimum and maximum
width of the device
//css properties
} Screen, TV, Mobile, laptop, etc.

}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width:500px){
body{
background-color: rgb(210, 60, 14);
color: antiquewhite;
}
#tab,#laptop,#tv{
display: none;
}

}
@media (min-width:501px) and (max-width:750px){
body{
background-color: rgb(53, 0, 186);
color: antiquewhite;
}
#mobile,#laptop,#tv{
display: none;
}

}
@media (min-width:751px) and (max-width:1250px){
body{
background-color: rgb(3, 156, 158);
color: antiquewhite;
}
#mobile,#tab,#tv{
display: none;
}

}
@media (min-width:1251px){
body{
background-color: rgb(0, 186, 50);
color: antiquewhite;
}
#mobile,#laptop,#tab{
display: none;
}

}
</style>
</head>
<body>
<h1 id="mobile">mobile screen from 0-500px</h1>
<h1 id="tab"> tab screen from 501px-750px</h1>
<h1 id="laptop"> Laptop screen from 751px-1250px</h1>
<h1 id="tv">Tv screen from > 1251px</h1>
</body>
</html>
CSS Grid:
It is a property which is used to display the content in rows and columns
It consist of different properties which are used to arrange the content.
Display:grid
Grid-template-columns:
Grid-template-rows:
Grid-template-area:

<!DOCTYPE html>
<html lang="en">
<head>
<title>grid</title>
<style>
#main{
background-color: black;
color: antiquewhite;
width: 100%;
display: grid;
/*grid-template-columns: 100px 200px 300px;*/
grid-template-columns: 10% 20% 30%;
grid-template-rows: 200px 100px 300px;
grid-gap: 10px 30px;
}
.child{
border: 2px solid black;
font-size: 25px;
}
.child1{
background-color: royalblue;
}
.child2{
background-color: yellow;
}
.child3{
background-color: chartreuse;
}
</style>
</head>
<body>
<div id="main">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
</div>
</body>
</html>

You might also like