Monday, 18 November 2024

Introduction to CSS Properties and Examples

 

CSS properties are the attributes used to control the presentation of elements on a webpage. Each property affects specific aspects of an element's appearance. Here’s a detailed look at some common CSS properties with examples.

 

1. Color Properties

color: Sets the text color.

p {
  color: blue;
}

 

background-color: Sets the background color of an element.

div {
  background-color: lightgray;
}

 

2. Typography

font-family: Specifies the font of the text.


h1 {
  font-family: 'Arial', sans-serif;
}

 

font-size: Sets the size of the font.

p {
  font-size: 16px;
}

 

font-weight: Defines the thickness of the font.

strong {
  font-weight: bold;
}

 

line-height: Sets the space between lines of text.

p {
  line-height: 1.5;
}

 

3. Text Alignment and Decoration

text-align: Aligns text horizontally within its container.

h2 {
  text-align: center;
}

 

text-decoration: Adds decoration to text, such as underline.

a {
  text-decoration: none; /* Removes underline from links */
}

 

4. Box Model Properties

width and height: Set the width and height of an element.


img {
  width: 100px;
  height: 100px;
}


padding: Sets space inside the element, between the content and the border.

div {
  padding: 20px;
}

 

margin: Sets space outside the element, between the border and other elements.

p {
  margin: 10px;
}

 

border: Sets the border around an element.

button {
  border: 2px solid black;
}

 

5. Layout and Positioning

display: Specifies how an element is displayed.

div {
  display: block; /* Makes the div a block-level element */
}

 

position: Specifies how an element is positioned.

.absolute {
  position: absolute;
  top: 10px;
  left: 10px;
}

 

flex: Defines a flexible box layout.

.container {
  display: flex;
  justify-content: space-between;
}

 

6. Background Properties

background-image: Sets an image as the background of an element.

body {
  background-image: url('background.jpg');
}

 

background-size: Specifies the size of the background image.

body {
  background-size: cover;
}

 

7. Borders and Radius

border-radius: Rounds the corners of an element.

.box {
  border-radius: 10px;
}

 

border-style: Defines the style of the border.

.box {
  border-style: dashed;
}

 

8. Transformations and Transitions

transform: Applies a 2D or 3D transformation to an element.

.rotate {
  transform: rotate(45deg);
}

transition: Specifies the transition effect when a property changes.

.fade {
  transition: opacity 0.5s ease;
}

 index.html

<!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 {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            justify-content: space-around;
            margin: 20px;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: darkgreen;
            border: 2px solid #000;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 1.2s ease;
        }
        .box:hover {
            transform: scale(1.5);
        }
        h1 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>CSS Properties Example</h1>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

 

Above snippet generate below screen.



Hover the mouse on any of the box, you can see the transition affect like below.

 


This example demonstrates how different CSS properties are used to style a webpage, including text styling, layout, and interactions. Each property plays a role in creating visually appealing and functional designs.

Previous                                                    Next                                                    Home

No comments:

Post a Comment