Scribd
Upload
3 views

web assignment (1)

The document provides a brief description of various CSS properties, including float, height, width, position, padding, margin, background, transform, display, color, and list-style-type. It also includes an HTML code example demonstrating the use of these properties in a simple webpage layout. The final output showcases a portfolio design with a header, navigation, and two floating information boxes.

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

web assignment (1)

The document provides a brief description of various CSS properties, including float, height, width, position, padding, margin, background, transform, display, color, and list-style-type. It also includes an HTML code example demonstrating the use of these properties in a simple webpage layout. The final output showcases a portfolio design with a header, navigation, and two floating information boxes.

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>
</body>
</html>
Final page Output:

You might also like