Complete CSS Properties Cheat Sheet: Master Web Design with Code Snippets

Leave a Comment / CheatSheets / By / August 4, 2023

CSS (Cascading Style Sheets) is a fundamental language in web development that enables us to control the appearance and layout of HTML elements.

Mastering CSS properties is crucial for creating visually appealing and responsive web pages. This tutorial will provide you with a comprehensive CSS Properties Cheat Sheet, complete with explanations and code snippets, to empower you with the knowledge needed to enhance your web design skills.

1)- Basic Syntax and Structure

In CSS, we use selectors to target HTML elements and apply styles to them. The basic syntax of CSS is as follows:

CSS
selector {

  property: value;
  
}

2)- Text Properties

In CSS text properties enhance your typography and text layout. Below are some properties used for this purpose:

ezoic-pub-ad-placeholder-117" data-inserter-version="2">

a. font-family

Specifies the font used for text.

Ezoic - wp_incontent_7 - incontent_7 -->
CSS
body {

  font-family: "Arial", sans-serif;
  
}

b. font-size

Sets the size of the text.

wp_incontent_8 - incontent_8 -->
CSS
h1 {

  font-size: 24px;
  
}

c. font-weight

Sets the weight of the text.

CSS
p {

  font-weight: bold;
  
}

d. font-style

Sets the style of the text.

CSS
h2 {

  font-style: italic;
  
}


/*****OR****/


h2 {

  font-style: normal;
  
}


/*****OR****/


h2 {

  font-style: oblic;
  
}

e. text-decoration

Allows to underline, strike or overline a text.

CSS
p{
        text-decoration: underline ;
        
      }
      
      
      
      /*****OR****/
      
      
p{
        text-decoration: overline ;
        
      }
      
      
      
       /*****OR****/
      
  p{
        text-decoration: line-through ;
        
      }

f. color

Sets the color of the text

CSS
p {

  color: #333;
  
}

g. background-color

Defines the background-color of a text.

CSS
p{
        background-color:aqua ;
        
      }

3)- Box Model Properties

Understand the box model to control element sizing and spacing:

a. width and height

Adjust the width and height of an element.

CSS
img {

  width: 100px;
  
  height: 100px;
  
}

b. margin

Set the space around an element.

CSS
div {

  margin: 10px;
  
}

c. padding

Define the space inside an element.

CSS
section {

  padding: 20px;
  
}

4)- Background Properties

Create appealing backgrounds for your elements.

a. background-color

Set the background color of an element.

CSS
header {

  background-color: #f2f2f2;
  
}

b. background-image

Add an image as the background.

CSS
div {

  background-image: url("path/to/image.jpg");
  
}

5)- Display Properties

Control the layout and positioning of elements.

a. display:

Specify how an element should be displayed.

CSS
nav {

  display: flex;
  
}


/****OR****/


nav {

  display: block;
  
}



/****OR****/


nav {

  display: inline;
  
}



/****OR****/


nav {

  display: inline-block;
  
}

b. position

Set the positioning method for an element.

CSS
aside {

  position: absolute;
  
  top: 20px;
  
  right: 10px;
  
}


/****OR****/



aside {

  position: relative;
  
  top: 20px;
  
  right: 10px;
  
}

To know more about the difference between relative and absolute positions check the following tutorial:

What is the difference between relative and absolute position?

6)- Box Properties

Modify the visual appearance of an element:

a. border

Add a border around an element.

CSS
button {

  border: 1px solid #ccc;
  
}

b. border-radius

Create rounded corners for an element.

CSS
div {

  border-radius: 5px;
  
}

    c. box-shadow

    Create a shadow effect around an element.

    CSS
    div {

  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  
}

    In the example above, the box-shadow property takes four values:

    • Horizontal offset: The shadow’s horizontal position (positive value moves right, negative value moves left).
    • Vertical offset: The shadow’s vertical position (positive value moves down, negative value moves up).
    • Blur radius: The blur amount for the shadow (larger values create a more spread-out shadow).
    • Color: The color of the shadow (you can use RGBA values for transparency).

    By utilizing the box-shadow property creatively, you can add depth and dimensionality to your design, making elements stand out and creating an overall polished look.

    7)- Animation Properties

    Bring your web pages to life with animations:

    a. animation

    Apply keyframe animations to an element.

    CSS
    @keyframes slideIn {

  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
  
}





img {
  animation: slideIn 1s ease-in-out;
}

    Conclusion

    This cheatsheet contains a wide range of essential CSS properties and how to utilize them in your web development projects. This CSS Properties Cheat Sheet will serve as a valuable resource for both beginners and experienced developers, enabling you to create stunning and interactive web pages. Keep experimenting and practicing to become a proficient web designer!

    Remember to explore other advanced CSS properties to further elevate your web design skills. Happy coding!

    Read More

    What’s the difference between relative and absolute position?

    Javascript Promise: A Beginner’s Guide to Asynchronous Programming

    How to Use Callback Functions in JavaScript: A Complete Guide with Examples and Best Practices

    Object constructor functions: How does the Javascript constructor work?

    Send form data received in the backend to the database (MongoDB)

    Send form data to the back-end (Node JS)

    Get the data back from the database (MongoDB) and display it on the front-end

    How to send data from back-end(Node JS) to MongoDB database?

    Inline vs Inline-Block vs Block CSS properties

    Leave a Reply

    %d bloggers like this: