Scribd
Upload
0 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

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
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