Scribd
Upload
2 views

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

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