19IT011 - Part - 2 CSS
Uploaded by
jainam bhavsar19IT011 - Part - 2 CSS
Uploaded by
jainam bhavsarWT IT255 CSPIT 19IT011
Part - 2 CSS
Program 1:
AIM: Applying CSS to Webpage. Demonstrate Type of CSS (inline, embedded,
external) - Class vs ID Selector.
A. INLINE CSS
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#160a4b; font-size:50px;
font-style:italic; text-align:center;">
JAINAM BHAVSAR
</p>
<p style="color:#81090f; font-size:50px;
font-style:italic; text-align:center;">
BTECH-IT
</p>
<p style="color:#ecb70a; font-size:50px;
font-style:italic; text-align:center;">
CSPIT
</p>
<p style="color:#ba81c9; font-size:50px;
font-style:italic; text-align:center;">
CHARUSAT UNIVERSITY
</p>
</body>
</html>
1|Page
WT IT255 CSPIT 19IT011
OUTPUT:
B. Embedded CSS
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Embedded CSS</title>
<style>
.main {
text-align: center;
}
.s1 {
color: blue;
font-size: 50px;
font-weight: bold;
}
#s2 {
color: #035003;
2|Page
WT IT255 CSPIT 19IT011
font-size: 50px;
font-weight: bold;
}
#s3 {
color: #520404;
font-style: bold;
font-size: 40px;
}
#s4 {
color: #000000;
font-style: bold;
font-size: 40px;
}
</style>
</head>
<body>
<div class="main">
<div class="s1">
JAINAM BHAVSAR</div>
<div id="s2">
BTECH-IT
</div>
<div id="s3">
CSPIT
</div>
<div id="s4">
CHARUSAT UNIVERSITY
</div>
</div>
</body>
</html>
3|Page
WT IT255 CSPIT 19IT011
OUTPUT:
C. External CSS
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css_external.css" />
</head>
<body>
<div class="main">
<div class="name">JAINAM BHAVSAR</div>
<div class="inst">
BTECH-IT
</div>
<div class="inst">
CSPIT
4|Page
WT IT255 CSPIT 19IT011
</div>
<div id="uni">
CHARUSAT UNIVERSITY
</div>
</div>
</body>
</html>
CSS File:
body
{
background-color: rgb(81, 83, 85);
}
.main
{
text-align: center;
}
.name
{
color: #e77408;
font-size: 50px;
font-weight: bold;
}
.inst
{
color: #09d3b8;
font-size: 50px;
font-weight: bold;
}
#uni
{
color: #d393a1;
font-style: bold;
font-size: 50x;
}
5|Page
WT IT255 CSPIT 19IT011
OUTPUT:
6|Page
WT IT255 CSPIT 19IT011
Program 2:
AIM: Basic CSS Properties & CSS Units (Absolute vs Relative) text, fonts,
background, height, width, border, outline, margin, padding, position, list style,
Overflow, Display, Opacity, Float, Clear, Links, Position, Z-index etc...
CODE:
<html>
<head>
</head>
<body>
<p style="color:rgb(235, 147, 15);">
This text will be written in orange.
</p>
<p style="direction:rtl;">
This text will be rendered from right to left
</p>
<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
<p style="word-spacing:5px;">
This text is having space between words.
</p>
<p style="text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain
at
its actual position this is done by CSS text-indent property.
</p>
<p style="text-align:right;">
This will be right aligned.
</p>
<p style="text-align:center;">
This will be center aligned.
</p>
<p style="text-align:left;">
This will be left aligned.
</p>
<p style="text-decoration:underline;">
This will be underlined
</p>
7|Page
WT IT255 CSPIT 19IT011
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
</p>
<p style="text-transform:capitalize;">
This will be capitalized
</p>
<p style="text-transform:uppercase;">
This will be in uppercase
</p>
<p style="text-transform:lowercase;">
This will be in lowercase
</p>
<p style="white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
<p style="text-shadow:4px 4px 8px rgb(13, 209, 199);">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
8|Page
WT IT255 CSPIT 19IT011
OUTPUT:
A. Fonts:
CODE:
<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
9|Page
WT IT255 CSPIT 19IT011
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:500;">
This font is 500 weight.
</p>
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>
<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
<p style="font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>
10 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
B. Background:
CODE:
<html>
<head>
<style>
body {
background-
image: url("C:\Users\shach\Documents\SEM4\WT\Practical\snapshots\background.jpg")
;
background-color: #cccccc;
background-repeat: repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<p style="background-color:rgb(255, 238, 0);">
11 | P a g e
WT IT255 CSPIT 19IT011
This text has a yellow background color.
</p>
<P> Jainam </P>
<P> Jainam </P>
<P> Jainam </P>
<P> Jainam </P>
<P> Jainam </P>
<P> Jainam </P>
</body>
</html>
OUTPUT:
C. Height, Width, Border:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
#auto {
height: auto;
width: 275px;
border: 2px solid rgb(120, 8, 172);
}
12 | P a g e
WT IT255 CSPIT 19IT011
#px {
height: 220px;
width: 220px;
border: 2px solid rgb(120, 8, 172);
}
#em {
height: 11em;
width: 220px;
border: 2px solid rgb(120, 8, 172);
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h2> height: auto; </h2>
<div id="auto">
<p> Welcome to MY PAGE </p>
<p> The height this div element is set to auto. </p>
</div>
<h2> height: 320px; </h2>
<div id="px">
<p> Welcome to MY PAGE </p>
<p> The height this div element is set to 320px. </p>
</div><br>
<h2> height: 16em; </h2>
<div id="em">
<p> Welcome to MY PAGE </p>
<p> The height this div element is set to 16em. </p>
</div>
</body>
</html>
13 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
D. Outline:
CODE:
<html>
<head>
</head>
<body>
<p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style="outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
14 | P a g e
WT IT255 CSPIT 19IT011
<p style="outline-width:7px; outline-style:solid;">
This text is having 7px outline.
</p>
</body>
</html>
OUTPUT:
E. Margin-Padding:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: rgb(144, 180, 59);
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
15 | P a g e
WT IT255 CSPIT 19IT011
p.padding {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin, padding. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
OUTPUT:
16 | P a g e
WT IT255 CSPIT 19IT011
F. Position:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 50px;
right: 5px;
color: rgb(154, 20, 167);
}
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>
</head>
<body>
<p>Some text...</p>
<p>Some text...</p>
<p>........</p>
<p>........</p>
<p>........</p>
<p>........</p>
<p>........</p>
<p>Some text...</p>
<p>Some text...</p>
<p class="pos_fixed">This is the fix positioned text.</p>
17 | P a g e
WT IT255 CSPIT 19IT011
<h2 class="pos_left">This heading is positioned left according to its normal
position</h2>
<h2 class="pos_right">This heading is positioned right according to its norma
l position</h2>
<p>The style "left:-
30px" subtracts 30 pixels from the element's original left position.</p>
<p>The style "left:30px" adds 30 pixels to the element's original left positi
on.</p>
<h2>This heading has an absolute position</h2>
<p> The heading below is placed 150px from the left and 250px from the top of
the page.</p>
</body>
</html>
OUTPUT:
18 | P a g e
WT IT255 CSPIT 19IT011
G. List-Style:
CODE:
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
19 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
H. Overflow:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 50px;
background-color: rgb(255, 255, 255);
overflow: visible;
/* overflow: scroll;
overflow: hidden;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
*/
}
</style>
20 | P a g e
WT IT255 CSPIT 19IT011
</head>
<body>
<div>The overflow property specifies whether to clip the content or to add sc
rollbars 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 outsi
de the element's box
hidden - The overflow is clipped, and the rest of the content will be inv
isible
scroll - The overflow is clipped, and a scrollbar is added to see the res
t of the content
auto - Similar to scroll, but it adds scrollbars only when necessary</div
>
</body>
</html>
OUTPUT:
21 | P a g e
WT IT255 CSPIT 19IT011
I. Display:
CODE:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="display: inline-block;">19IT011</p>
<p style="display: inline-block;">19IT011</p>
<p style="display: inline-block;">19IT011</p>
<p style="display: block;">19IT011</p>
<p style="display: block;">19IT011</p>
<p style="display: block;">19IT011</p>
<p style="display: inline;">19IT011</p>
<p style="display: inline;">19IT011</p>
<p style="display: inline;">19IT011</p>
<p style="display: run-in;">19IT011</p>
<p style="display: run-in;">19IT011</p>
<p style="display: run-in;">19IT011</p>
<p style="display: none;">19IT011</p>
</body>
</html>
OUTPUT:
22 | P a g e
WT IT255 CSPIT 19IT011
J. Opacity:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #cbee6a;
padding: 10px;
}
div.second {
opacity: 0.3;
}
</style>
</head>
<body>
<h1>The opacity Property</h1>
<p>The opacity property adds transparency to the background of an element, an
d to all of its child elements as well.
This makes the text inside a transparent element hard to read:</p>
<div class="second">
<p>opacity 0.2</p>
</div>
<div>
<p>opacity 1 (default)</p>
</div>
</body>
</html>
23 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
K. Float, Clear, Links:
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel=
"stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Ubuntu', sans-serif;
}
.container {
width: 1300px;
border: 5px solid rgb(248, 141, 248);
padding: 20px 20px;
margin: auto;
}
24 | P a g e
WT IT255 CSPIT 19IT011
#fruits {
float: left;
width: 50%;
clear: both;
}
#computer {
float: left;
width: 70%;
clear: both;
margin: auto;
}
#veg {
clear: both;
width: 100%;
}
.item {
background-color: rgb(199, 229, 233);
width: 600px+600px;
border: 2px solid rgb(240, 204, 204);
padding: 50px 45px;
margin: 10px auto;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
a {
text-decoration: underline;
color: black;
}
a:hover {
color: rgb(5, 0, 0);
background-color: rgb(221, 166, 38);
}
25 | P a g e
WT IT255 CSPIT 19IT011
a:visited {
background-color: rgb(253, 209, 167);
}
a:active {
background-color: rgb(168, 202, 233);
}
.btn {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
background-color: rgb(239, 234, 241);
padding: 6px;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 15px;
}
.btn:hover {
color: rgb(179, 144, 58);
background-color: rgb(223, 245, 201);
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container">
<div id="fruits" class="item">
<h2>HTML</h2>
<p class="frutpara" id="para">
HTML (Hypertext Markup Language) is the code that is used to stru
cture a web page and its content. For
example, content could be structured within a set of paragraphs,
a list of bulleted points, or using
images and data tables. As the title suggests, this article will
give you a basic understanding of HTML
and its functions.
</p>
</div>
<div id="compter" class="item">
<h2>CSS</h2>
<p class="frutpara" id="para">
26 | P a g e
WT IT255 CSPIT 19IT011
CSS (Cascading Style Sheets) is a language for styling the webpag
e. We can change the appearance and the
layout of the webpage by using CSS. We can also define how a webs
ite's view changes in different screens
like desktops, tablets, and mobile devices. CSS is not a programm
ing language, like C++ or JavaScript.
</p>
</div>
<div id="veg" class="item">
<h2>JavaScript</h2>
<p class="frutpara" id="para">
JavaScript is a programming language that adds interactivity to y
our website. This happens in games, in
the behavior of responses when buttons are pressed or with data e
ntry on forms; with dynamic styling;
with animation, etc. This article helps you get started with Java
Script and furthers your understanding
of what is possible.
</p>
</div>
<a href="https://www.google.com" class="btn">View THIS</a>
<button class="btn">Contact Us</button>
</div>
</body>
</html>
27 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
28 | P a g e
WT IT255 CSPIT 19IT011
L. Z-Index:
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box-1 {
position: relative;
top: 49px;
z-index: -35;
background-color: rgb(255, 145, 0);
}
#box-2 {
position: relative;
top: 14px;
z-index: -165;
background-color: rgb(0, 174, 255);
}
#box-3 {
background-color: rgb(166, 255, 0);
}
#box-4 {
background-color: rgb(255, 0, 221);
}
</style>
</head>
<body>
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
</body>
29 | P a g e
WT IT255 CSPIT 19IT011
</html>
OUTPUT:
M. Absolute length:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
30 | P a g e
WT IT255 CSPIT 19IT011
<h1> Absolute units </h1>
<p style="font-size: 20px;"> It has a font-size: 20px; </p>
<p style="font-size: 1.2cm;"> It has a font-size: 1.2cm; </p>
<p style="font-size: .7in;"> It has a font-size: .7in; </p>
<p style="font-size: 18pt;"> It has a font-size: 18pt; </p>
<p style="font-size: 2pc;"> It has a font-size: 2pc; </p>
<p style="font-size: 10mm;"> It has a font-size: 10mm; </p>
</body>
</html>
OUTPUT:
31 | P a g e
WT IT255 CSPIT 19IT011
N. Relative Length:
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
p {
line-height: 0.1cm;
color: rgb(255, 230, 0);
}
</style>
</head>
<body>
<h1> Relative units </h1>
<p style="font-size: 2em;"> It has a font-size: 2em; </p>
<p style="font-size: 8ex;"> It has a font-size: 8ex; </p>
<p style="font-size: 6ch;"> It has a font-size: 6ch; </p>
<p style="font-size: 4rem;"> It has a font-size: 4rem; </p>
<p style="font-size: 4vw;"> It has a font-size: 4vw; </p>
<p style="font-size: 10vh;"> It has a font-size: 10vh; </p>
<p style="font-size: 10vmin;"> It has a font-size: 10vmin; </p>
<p style="font-size: 8vmax;"> It has a font-size: 8vmax; </p>
<p style="font-size: 400%;"> It has a font-size: 400%; </p>
</body>
</html>
32 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
33 | P a g e
WT IT255 CSPIT 19IT011
Program 3:
AIM: Understanding and Implementation of Box Model. (box-sizing).
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
{
box-sizing: border-box;
margin: 10px;
body {
border: 2px solid black;
display: block;
margin: auto;
padding-left: 50vh;
padding-top: 10vh;
}
input,
textarea {
width: 40vw;
}
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Name"><br>
Last name:<br>
<input type="text" name="lastname" value="Surname"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
34 | P a g e
WT IT255 CSPIT 19IT011
</html>
OUTPUT:
35 | P a g e
WT IT255 CSPIT 19IT011
Program 4:
AIM: Demonstrate CSS Selectors & Pseudo Classes/Pseudo Elements/Pseudo
Classes.
A. CSS Selectors:
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Selectors</title>
</head>
<style>
h1 {
background-color: rgb(202, 230, 236);
color: black;
font-weight: bold;
text-align: center;
}
/* if p is contained by any li which is contained by div */
div li p {
color: yellow;
background-color: rgb(180, 218, 180);
font-weight: bold;
}
/* if p is right inside div then this CSS will be applied */
div>p {
color: yellow;
background-color: rgb(180, 218, 180);
font-weight: bold;
}
/* if p is right after div i.e p is the next sibling of div*/
div+p {
color: white;
36 | P a g e
WT IT255 CSPIT 19IT011
background-color: rgb(238, 137, 137);
}
</style>
<body>
<h1>CSS Selectors</h1>
<div class="container">
<div class="row">
<ul>
<li class="item">
<p> this is another paragraph inside li</p>
</li>
<li>this will not get affected</li>
<p>this is a para inside ul</p>
</ul>
<p>This is a paragraph</p>
</div>
<p>This is another paragraph</p>
</div>
<p>this is outermost paragraph</p>
</body>
</html>
OUTPUT:
37 | P a g e
WT IT255 CSPIT 19IT011
B. Pseudo Classes:
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pseudo selector</title>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
}
header::before {
background: url('https://source.unsplash.com/user/erondu/1600x900') n
o-repeat center center/cover;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.3;
}
.navigation {
font-family: 'Bree Serif', serif;
font-size: 20px;
display: flex;
}
li {
list-style: none;
padding: 20px 23px;
}
38 | P a g e
WT IT255 CSPIT 19IT011
section {
height: 344px;
font-family: 'Bree Serif', serif;
margin: 3px 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 4rem;
}
p {
text-align: center;
}
/* section::after{
content:"this is a content"
} */
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>
<h1>Galaxy</h1>
<p>A galaxy is a gravitationally bound system of stars, stellar remnants,
interstellar gas, dust, and dark
matter. The word galaxy is derived from the Greek galaxias, literally
"milky", a reference to the Milky Way.
</p>
</section>
39 | P a g e
WT IT255 CSPIT 19IT011
</body>
</html>
OUTPUT:
40 | P a g e
WT IT255 CSPIT 19IT011
Program 5:
AIM: Build Web Page Layout Using Flex.
HTML CODE:
<html>
<head>
<title>leb6</title>
<link rel="stylesheet" href="leb6.css">
</head>
<body>
<div class="main">
<div class="top">
<div class="img">
<img src="pro.jpg">
</div>
<div class="login">
<h5>Login</h5>
<form><i>
<label for="firstname">Username: </label>
<input type="text" name="firstname"><br>
<label for="passweod">Password: </label>
<input type="text" name="password"><br><br>
<input type="button" value="Login"></i>
</form>
</div>
<div class="title">
<pre><strong><i><h1 class="t1">Computer Processor</h1></i></stron
g></pre>
</div>
</div>
<div class="bottom">
<div class="navigation">
<h4>Navigation</h4>
<ul>
<li><b>Home</b></li>
<li><b>Intel</b></li>
<li><b>Amd</b></li>
<li><b>Super Computer</b></li>
<li><b>About us</b></li>
</ul>
</div>
41 | P a g e
WT IT255 CSPIT 19IT011
<div class="text">
<pre><h2 ><i>History of computer processor</i></h2></pre>
<hr style="color: #C0C9A3;">
<div class="peregraph">
<img src="sidephoto.jpg">
Computers and electronics play an enormous role in today's so
ciety, impacting everything from
communication and medicine to science.<br>In the early 1950s,
each computer design was unique. There
were no upward-
compatible machines or computer architectures with multiple, differing
implementations.<br><br>The design freedom of the time was ve
ry important because designers were
very constrained by the cost of electronics, and only startin
g to explore how a computer could best
be organized. Some of the basic features introduced during th
is period included index registers (on
the Ferranti Mark 1), a return address saving instruction (UN
IVAC I), immediate operands (IBM 704),
and detecting invalid operations (IBM 650).<br><br>
<span style="color: forestgreen; text-
align: right"><i>>> Further reading</i></span>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
body{
background-color: black;
}
.main{
width: 66%;
height: auto;
background-color:#fff;
margin-left: 17%;
padding: 10px;
}
.Navigation{
padding: 20px;
42 | P a g e
WT IT255 CSPIT 19IT011
width: 25%;
margin: 10px;
margin-top: 30px;
box-shadow: 4px -4px 3px #F0F0F0;
}
.Navigation h4{
padding: 5px;
background-color: cornflowerblue;
color: white;
border-top: dotted;
margin-top: 270px;
top: 50%;
border-bottom: dotted;
}
.img{
float: left;
}
.Navigation ul li{
padding: 11px;
margin-left: -40px;
color: white;
list-style-type: none;
background: linear-gradient(to bottom, cornflowerblue ,white );
}
.title{
width: 35%;
float: right;
left: 35%;
height: 27%;
padding-top: 50px;
text-align: center;
background: linear-gradient(to bottom, gray ,black );
box-shadow: 0px 4px 4px #F0F0F0;
}
.title pre h1{
display: inline;
font-family:serif;
}
.title h3{
color: #E3711D;
padding-left: 100px;
}
.t1{color: cornflowerblue;}
.t2{color: #540309;}
.login{
43 | P a g e
WT IT255 CSPIT 19IT011
float: right;
width: 25%;
margin-right: 20px;
height: 35%;
margin-left: 2px;
background: linear-gradient(to bottom, black ,gray );
box-shadow: 5px 4px 4px #F0F0F0;
}
.login h5{
color: cornflowerblue;
font-size: 20px;
text-align: center;
}
.login form{
color: cornflowerblue ;
padding-left: 20px;
}
.text{
float: right;
width: 63%;
margin-right: 20px;
margin-top: -370px;
box-shadow: 5px -4px 4px #F0F0F0;
}
.text h1{color: #853C04; background-color: #DD9B68; display: inline;}
.text h2{color: cornflowerblue; display: inline-block; font-family:serif;}
.peregraph img{float: right;}
44 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
45 | P a g e
WT IT255 CSPIT 19IT011
Program 6:
AIM: Implement and Demonstrate CSS Transition.
HTML CODE:
<!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">
<link rel="stylesheet" href="style.css">
<title>week6,7</title>
</head>
<body>
<div>
Touch me
</div>
<div>
hello
</div>
</body>
</html>
CSS CODE:
body {
background-color: aqua;
}
div {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
padding-top: 50px;
font-size: 40px;
border-radius: 10px;
transition-property: width, height, font;
46 | P a g e
WT IT255 CSPIT 19IT011
transition-duration: 2s;
animation: rotate;
}
div:hover {
width: 150px;
height: 120px;
background-color: cornflowerblue;
}
@keyframes rotate{
0% {background-color: blue;}
25% {}
50% {}
75% {}
100%{}
}
OUTPUT:
47 | P a g e
WT IT255 CSPIT 19IT011
48 | P a g e
WT IT255 CSPIT 19IT011
Program 7:
AIM: Implement and Demonstrate CSS Animation.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="ani.css">
<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>css_animation</title>
</head>
<body>
<h2>Css animation</h2>
<div class="col-container">
<div class="col">
<h3 id="part1">HELLO</h3>
</div>
</div>
</body>
</html>
CSS CODE:
body{
background-color: green;
margin: 0;
font-family: Arial;
}
div {
width: 100px;
height: 100px;
/* background-color: red; */
position: relative;
animation-name: example;
animation-duration: 4s;
animation-direction: normal;
animation-iteration-count: infinite;
49 | P a g e
WT IT255 CSPIT 19IT011
border-radius: 15%;
}
@keyframes example {
0% {background-color:#26b6c9; left:0px; top:0px;}
25% {background-color:#e9c80e; left:200px; top:0px;}
50% {background-color:#690c07; left:200px; top:100px;}
75% {background-color:#da1d72; left:0px; top:100px;}
100% {background-color:#549da7; left:0px; top:0px;}
}
h2{
font-size: 20px;
font-family: cursive;
border: 5px solid lightblue;
margin-top: 80px;
margin-right: 590px;
margin-left: 580px;
background-color: rgb(37, 172, 149);
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 100px;
}
.col-container{
display: table;
width: 70%;
margin: 100px;
margin-left: 230px;
}
.col{
width: 100px;
height: 100px;
display: table-cell;
position: relative;
animation: mymove 5s infinite;
}
#part1{
color: #faf3e0;
text-align: center;
margin-top: 30px;
}
#part2{
color:#222831;
text-align: center;
margin-top: 30px;
50 | P a g e
WT IT255 CSPIT 19IT011
OUTPUT:
51 | P a g e
WT IT255 CSPIT 19IT011
52 | P a g e
WT IT255 CSPIT 19IT011
Program 8:
AIM: Apply and Demonstrate CSS Media Queries on Web Page. Apply
Different Style to Print Media.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css8.css">
<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>css 8</title>
</head>
<body>
<h1>Magic of Media Queiry</h1>
<div class="to">
<h4>Are you want to see some magic?</h4>
<h4>Change the size of your browser</h4>
</div>
</body>
</html>
CSS CODE:
h1{
text-align: center;
margin-top: 70px;
}
.to{
margin: 100px;
border: 5px solid yellow;
text-align: center;
}
body {
background-color: darkblue;
color: yellow;
}
@media screen and (max-width: 1100px) {
53 | P a g e
WT IT255 CSPIT 19IT011
body {
background-color: blue;
color:rgb(243, 46, 46);
}
}
@media screen and (max-width: 900px) {
body {
background-color: cornflowerblue;
color: white;
}
@media screen and (max-width: 600px) {
body {
background-color: green;
color: white;
}
OUTPUT:
54 | P a g e
WT IT255 CSPIT 19IT011
55 | P a g e
You might also like
- Clevo c5100q, c5100q-c, c5105, c5105-c Service ManualNo ratings yetClevo c5100q, c5100q-c, c5105, c5105-c Service Manual93 pages
- Military Canteen Automation System: Project-ReportNo ratings yetMilitary Canteen Automation System: Project-Report77 pages
- ECSWI269ver020 Online Proctored Exams Candidate GuidelinesmacOsNo ratings yetECSWI269ver020 Online Proctored Exams Candidate GuidelinesmacOs14 pages
- HP Notebook 15-Bs105ne: Reliable Performance. Beautiful Design. Do MoreNo ratings yetHP Notebook 15-Bs105ne: Reliable Performance. Beautiful Design. Do More2 pages
- Web Engineering: Font, Text & BackgroundNo ratings yetWeb Engineering: Font, Text & Background38 pages
- Web Application Development: Cascading Style Sheet (CSS)No ratings yetWeb Application Development: Cascading Style Sheet (CSS)47 pages
- M. Fahmi Fachrozi: Career Summary Personal ProfileNo ratings yetM. Fahmi Fachrozi: Career Summary Personal Profile1 page
- Cascading Style Sheets, Level 1 Cascading Style Sheets, Level 1 Quick Reference Guide Quick Reference GuideNo ratings yetCascading Style Sheets, Level 1 Cascading Style Sheets, Level 1 Quick Reference Guide Quick Reference Guide7 pages
- TSOP 1836 Photo Diode + Pre Amplifier ApplicationNo ratings yetTSOP 1836 Photo Diode + Pre Amplifier Application3 pages
- Cascading Style Sheets (CSS) Working With TagsNo ratings yetCascading Style Sheets (CSS) Working With Tags32 pages
- Troubleshooting Guide IKE VPN Initialization Rev0No ratings yetTroubleshooting Guide IKE VPN Initialization Rev014 pages
- 508 Test Report NIST Mobile UFED4PC v4.2.6.5 January 2016No ratings yet508 Test Report NIST Mobile UFED4PC v4.2.6.5 January 201620 pages
- Lab Activity 9 CSS Boxes and Horizontal MenuNo ratings yetLab Activity 9 CSS Boxes and Horizontal Menu10 pages
- Inline CSS:: CSS: Cascading Style SheetNo ratings yetInline CSS:: CSS: Cascading Style Sheet44 pages
- UECS2094 2194 - Topic 3 - CSS - Jan 2025No ratings yetUECS2094 2194 - Topic 3 - CSS - Jan 202583 pages
- Common Application Server Redundancy Causes and TriggersNo ratings yetCommon Application Server Redundancy Causes and Triggers8 pages
- Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample CodesFrom EverandMaster Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample CodesNo ratings yet
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
