Scribd
Upload
4 views7 pages

Web Assignment

The document provides a brief overview of various CSS properties such as float, height, width, position, padding, margin, background, transform, display, color, and list-style-type. It includes a sample HTML code demonstrating the application of these properties in a simple webpage layout. The example features a header, navigation menu, two floating information boxes, and a footer.

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 PDF, TXT or read online on Scribd
4 views7 pages

Web Assignment

The document provides a brief overview of various CSS properties such as float, height, width, position, padding, margin, background, transform, display, color, and list-style-type. It includes a sample HTML code demonstrating the application of these properties in a simple webpage layout. The example features a header, navigation menu, two floating information boxes, and a footer.

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 PDF, TXT or read online on Scribd
You are on page 1/ 7

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>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>

You might also like