Scribd
Upload
4 views7 pages

Web Assign

The document provides a brief overview of various CSS properties including float, height, width, position, padding, margin, background, transform, display, color, and list-style-type. It also includes an HTML example demonstrating the use of these properties in a simple webpage layout with a header, navigation, content boxes, and a footer. The CSS styles define the visual presentation of the elements on the page.

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 Assign

The document provides a brief overview of various CSS properties including float, height, width, position, padding, margin, background, transform, display, color, and list-style-type. It also includes an HTML example demonstrating the use of these properties in a simple webpage layout with a header, navigation, content boxes, and a footer. The CSS styles define the visual presentation of the elements on the page.

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 Description of CSS Properties:

float: Positions elements to the left or right.

height: Defines the vertical size of an element.

width: Defines the horizontal size of an element.

position: Specifies how an element is positioned.

→static

→relative

→absolute

→fixed

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

→scale

transform: scale(0.5);

→rotate

transform: rotate(-2deg);
→skew

transform: skew(10deg, 10deg);

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: #f0f0f0;

header {

background: #4CAF50;

color: white;

padding: 20px;

text-align: center;

nav {

background: #333;

color: white;

padding: 10px;

nav ul {

margin: 0;
padding: 0;

list-style-type: none;

display: flex;

justify-content: center;

nav ul li {

margin: 0 15px;

nav ul li a {

color: white;

text-decoration: none;

.container {

width: 80%;

margin: 20px auto;

padding: 20px;

background: white;

position: static;

.box1 {

float: left;

width: 40%;

height: 100px;

margin: 3%;

padding: 20px;
background: #ffcccb;

color: #333;

transform: rotate(-2deg);

.box2 {

float: right;

width: 40%;

height: 100px;

margin: 3%;

padding: 20px;

background: #ffcccb;

color: #333;

transform: rotate(2deg);

footer {

clear: both;

background: #222;

color: white;

padding: 20px;

text-align: center;

position: fixed;

width: 100%;

</style>

</head>

<body>
<header>

<h1>Montasir Demo Page</h1>

</header>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<div class="container">

<div class="box1">

<h2>Box 1</h2>

<p>This is an example of a floating box with padding and margin.</p>

</div>

<div class="box2">

<h2>Box 2</h2>

<p>This is another floating box with different styling.</p>

</div>

</div>

<footer>

2025 My Website

</footer>

</body>

</html>
Output:

You might also like