Scribd
Upload
3 views6 pages

Assignment FSP I

The document presents two case studies focusing on CSS styling methods and responsive design. Case Study 1 covers inline, embedded, and external styles, while Case Study 2 emphasizes animations, transitions, and media queries. Each case study is linked to specific course and program outcomes related to web page design and engineering knowledge.

Uploaded by

Karthikeyini S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views6 pages

Assignment FSP I

The document presents two case studies focusing on CSS styling methods and responsive design. Case Study 1 covers inline, embedded, and external styles, while Case Study 2 emphasizes animations, transitions, and media queries. Each case study is linked to specific course and program outcomes related to web page design and engineering knowledge.

Uploaded by

Karthikeyini S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Assignment-I

Case Study 1 - Demonstrates different styling methods (inline, embedded, and


external styles), text-shadow, and color usage.

CO1: Understand various CSS styling methods.


CO2: Apply text formatting techniques, including text-shadow and colors.

PO1: Engineering Knowledge – Apply CSS concepts to structure web pages.


PO2: Problem Analysis – Identify and implement the best styling approach for
different scenarios.

Case Study 2 - Focuses on animations, transitions, media queries for


responsiveness, and a gradient background.

CO3: Implement animations and transitions effectively.


CO4: Design responsive web pages using media queries.

PO3: Design/Development of Solutions – Create interactive and visually


appealing web pages.
PO5: Modern Tool Usage – Utilize CSS3 properties for styling and
responsiveness.
Sample code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Case Studies in HTML & CSS</title>

<link rel="stylesheet" href="styles.css"> <!-- External CSS Linking -->

<style>

/* Embedded Styles */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}
.container {

width: 80%;

margin: auto;

.case-study {

background: white;

padding: 20px;

margin: 20px 0;

border-radius: 10px;

box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

.highlight {

color: blue;

text-shadow: 2px 2px 5px gray;

.animated-box {

width: 100px;

height: 100px;

background: linear-gradient(to right, red, yellow);

border-radius: 10px;

transition: transform 0.5s;

.animated-box:hover {

transform: scale(1.2) rotate(10deg);

@media (max-width: 600px) {


.container {

width: 100%;

padding: 10px;

</style>

</head>

<body>

<div class="container">

<div class="case-study">

<h2>Case Study 1: Styling a Web Page</h2>

<p>This case study explores different styling methods.</p>

<p style="color: red; font-weight: bold;">This text uses inline styles.</p>

<p class="highlight">This text has text-shadow and embedded styles.</p>

</div>

<div class="case-study">

<h2>Case Study 2: Animation and Responsive Design</h2>

<p>This case study demonstrates animations, transitions, and media queries.</p>

<div class="animated-box"></div>

</div>

<div class="case-study">

<h2>CO PO Mapping</h2>

<table border="1" cellpadding="10" cellspacing="0">

<tr>
<th>Case Study</th>

<th>Course Outcomes (CO)</th>

<th>Program Outcomes (PO)</th>

</tr>

<tr>

<td>Case Study 1</td>

<td>CO1: Understand different CSS styling methods.<br>CO2: Apply text


formatting techniques.</td>

<td>PO1: Engineering Knowledge<br>PO2: Problem Analysis</td>

</tr>

<tr>

<td>Case Study 2</td>

<td>CO3: Implement animations and transitions.<br>CO4: Design responsive


web pages.</td>

<td>PO3: Design/Development of Solutions<br>PO5: Modern Tool Usage</td>

</tr>

</table>

</div>

</div>

</body>

</html>

You might also like