Scribd
Upload
2 views

Web Database Assignment

This document is an assignment submission for a web database programming course at Bangladesh University of Business and Technology. It includes a brief description of CSS properties, a sample HTML code demonstrating these properties, and a final page output layout. The assignment is submitted by Shifat Hasan Nahid to Assistant Professor Sadah Anjum Shanto, with a due date of March 5, 2024.

Uploaded by

Abir Shah
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
2 views

Web Database Assignment

This document is an assignment submission for a web database programming course at Bangladesh University of Business and Technology. It includes a brief description of CSS properties, a sample HTML code demonstrating these properties, and a final page output layout. The assignment is submitted by Shifat Hasan Nahid to Assistant Professor Sadah Anjum Shanto, with a due date of March 5, 2024.

Uploaded by

Abir Shah
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/ 7

Bangladesh University of Business and Technology

Department of CSE
CSE -457
Web database Programming

Assignment : 01
Submission Date : 05 Mar 2024

Submitted By Submitted To
Name:Shifat Hasan Nahid Sadah Anjum Shanto
ID: 21225103393 Assistant professor
Intake: 49 Department of CSE
Section: 09

_______________
Signature

Short Descripton of CSS Propertes:


foat: Positons elements to the lef or right.
height: Defnes the vertcal size of an element.

width: Defnes the horizontal size of an element.

positon: Specifes how an element is positoned.


statc
relatve
absolute
fxed
padding: Space between the content and the border of an element.

margin: Space outside the border of an element.

background: Sets the background color, image, gradient, etc., of an element.

transform: Applies 2D/3D transformatons.


scale
transform: scale(0.5);

rotate
transform: rotate(5deg):

display: Controls the display behavior

block
inline
flex
grid
none etc.

color: Changes the text color of an element.

list-style-type: Defines the style of list item markers

disc

circle

square

none
Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>CSS Properties Example</title>
<style>
body {
margin: 0;
padding: 0;
background: #89b9d4;
}
header {
background: #3fa5a5;
width: 100%;
color: white;
padding: 20px;
text-align: center;
}
nav {
background: aquamarine;
width: 100%;
color: white;
padding: 15px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: circle;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: red;
text-decoration: none;
}
.container {
width: 80%;
height: 220px;
margin: 20px auto;
padding: 20px;
background: white;
position: static;
}

.Info1 {
float: left;
width: 40%;
height: 100px;
margin: 3%;
padding: 20px;
background: #abd8f0;
color: #333;
transform: rotate(5deg);
}
.Info2 {
float: right;
width: 40%;
height: 100px;
margin: 3%;
padding: 20px;
background: #b9e8f3;
color: #333;
transform: skewY(10deg);
}

.footer {
clear: both;
padding: 10px;
position: static;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(44, 97, 95);
color: white;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Shifat Hasan Nahid Protfolio Design</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>
<div class="container">
<div class="Info1">
<h2>Info1</h2>
<p>This is an example of a floating box with padding and
margin.</p>
</div>

<div class="Info2">
<h2>Info2</h2>
<p>This is another floating box with different
styling.</p>
</div>
</div>
</body>
</html>
Final page Output:

You might also like