Scribd
Upload
2 views10 pages

Lab 02 PDF

The document is a lab manual for CSE 416: Web Engineering, focusing on understanding CSS through various methods including inline, in-file, and external CSS. It covers key concepts such as CSS selectors, specificity, box model, animations, and responsive design with media queries. The manual includes practical exercises and code examples to enhance learning and application of CSS techniques.

Uploaded by

Rakibul Islam Khan 221-15-5980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views10 pages

Lab 02 PDF

The document is a lab manual for CSE 416: Web Engineering, focusing on understanding CSS through various methods including inline, in-file, and external CSS. It covers key concepts such as CSS selectors, specificity, box model, animations, and responsive design with media queries. The manual includes practical exercises and code examples to enhance learning and application of CSS techniques.

Uploaded by

Rakibul Islam Khan 221-15-5980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CSE 416: Web Engineering Lab Lab Manual

2
Goal: To understand CSS
 Inline Vs in-file Vs external CSS
 Selectors and specificity rules
 Box Model, Animation
 Responsiveness, media queries

Inline CSS
Create a file as follows. Tinker with different values of the styles and observe their effects. You may use the browser’s
built in development tool to speed up.

File name:my_inline.html

<!DOCTYPE html> <html> <head> </head> <body


style="background-color: lightblue;">

<h1 style="color:white;text-align: center;">My First CSS at CSE482</h1> <p


style ="font-family: verdana; font-size: 20px;">This is the 1st para.</p> <p
style ="font-family: verdana; font-size: 20px;">This is the 2nd para.</p>
</body>
</html>

On every line style information is added inside the style attribute of the html element. This is hard to manage for a
large html file. Therefore, a better and more manageable approach becomes necessary. In-file CSS is better. Why is it a
better approach? Is it more efficient? Does the browser treat these two approaches differently? You may now save the
above file as the following one. (Given in next page)

Authors: [email protected], [email protected] Lab-2-Page-1


In-File CSS
File name: my_infile.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS at CSE482</h1>
<p>This is the 1st para.</p>
<p>This is the 2nd para.</p>
</body>
</html>
Try adding more html elements like <h1> and tags.
<p> Do you see any advantage while coding?

External CSS
Now split the file above into two files as follows. Make sure you save them in the same folder.
File name: style.css
body {

background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}

Authors: [email protected], [email protected] Lab-2-Page-2


File name:external.html

<!DOCTYPE html>
<html> <head>

<link rel="stylesheet" href="style.css">


</head>
<body>
<h1>My First CSS at CSE482</h1>
<p>This is the 1st para.</p>
<p>This is the 2nd para.</p>

</body> </html>
Now browse to this html file (external.html). Do you see any difference? Your code surely looks more
organized.
What is the purpose of this new line <link rel="stylesheet" href="style.css"> inside
the <head>?
Using external CSS file has other advantages. These external files get cached by default at the browser. If any other

html
page from your website uses the same set of styles by linking to these same CSS files your browser will use them from
its cache. This is a great advantage. This enhances performance web applications.
style.css and external.html
CSS Selectors
Now let’s play with the following files to understand CSS selector better. Modify the
files as follows

File name: style1.css


body {background-color: lightblue;}
h1 {color: white; text-align: center; }
p {font-family: verdana; font-size: 20px;}
#myID{
border-style: solid;
border-width: 5px;
border-color: tomato;
color: black;
}
.class1{color: orange;}
.class2{color: blue;}
Authors: [email protected], [email protected] Lab-2-Page-3
File name: external.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>My First CSS at CSE482</h1>
<h1 id="myID">My First CSS at CSE482</h1>
<p>This is the 1st para.</p>
<p class="class1">This is the 2nd para with class1.</p>
<p class="class2">This is the 2nd para with class2.</p>
</body>
</html>

Now, browse to external.html file. What differences do you see? Why the <h1> tags differ? Why do the tags
<p>
nd
differ in looks? Why did the style on the 2 <h1> tag <h1 id="myID">My First CSS at CSE482</h1> not
display white color text? Why was the first rule h1{color: white; text-align: center;} overridden?

CSS Specificity
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will
a
"win", and its style declaration will be applied to that HTML element. Find this rule at W3schools / MDN.

File name: speficity.html

<!DOCTYPE html>
<html> <head>

<style>
#demo { color: blue; }
.test { color: green; }
p { color: red; }
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Ki ache duniay?</p>

</body> </html>
Why does it show pink? If you remove the inline style which style will
apply?
Authors: [email protected], [email protected] Lab-2-Page-4
Padding, Margin, Border, and Dimension Units
File name: box.html

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 30rem;
border: 15px solid green;
border-radius: 2rem;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Padding, margin, border and border radius</h2>
<div>
This is box’s content. 50px padding, 20px margin, 15px green border
and a border radius of 2rem.
</div>
</body>
</html>
b
px to rem, em and percentage? Google or search W3schools.com / MDN
Try changing the parameter of the styles from
to find what do rem , em mean.

Authors: [email protected], [email protected] Lab-2-Page-5


Animation
File name: mystyle.css
div {
background-color: red;
width: 10rem;
height: 10rem;
text-align: center;
position: relative;
animation-name: my_animation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes my_animation {
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;
}
}
Authors: [email protected], [email protected] Lab-2-Page-6
File name: animation.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h2>Animation Test Lab</h2>
<div>I am animated!</div>
</body>
</html>

Change animation parameters and try to understand. Can you make this box spin? What changes does it need to spin?

Responsiveness and Media Queries

File name: responsive.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">

Authors: [email protected], [email protected] Lab-2-Page-7


<h1>The City</h1>
<p>This example is taken from w3schools.</p>
</div>

<div class="col-3 right">


<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content responds.</p>
</div>
</body>
</html>

File name: responsive.css


* {box-sizing: border-box;}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
Authors: [email protected], [email protected] Lab-2-Page-8
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}

/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

@media only screen and (max-width: 768px) {


/* For mobile phones: */
[class*="col-"] { width: 100%; }
}

Authors: [email protected], [email protected] Lab-2-Page-9


Practice to Learn
1) Explore examples at W3schools as much as possible. However, run examples from the following URLs and
then make changes in the code, then bring all codes in the next class in a pen drive or google drive.

A. https://www.w3schools.com/css/css_rwd_grid.asp
B. https://www.w3schools.com/css/css_rwd_mediaqueries.asp
C. https://www.w3schools.com/css/css_rwd_images.asp
D. https://www.w3schools.com/css/css_rwd_videos.asp
E. https://www.w3schools.com/css/css_rwd_frameworks.asp

2) Watch this YouTube video https://youtu.be/zBPHBnSIzfk?si=ZQPyg_OUGjj78Fyw

a
W3Schools: https://www.w3schools.com/
b
MDN: Mozilla Developers Network. https://developer.mozilla.org/en-US/

Authors: [email protected], [email protected] Lab-2-Page-10

You might also like