Some Rememberable Common And Basic Rules Of CSS

In this article, we will learn some important common and basic rules of CSS for easy coding and save time.

1. While using floats. You have to clear floats, just you need to add the following CSS.

   .clearfix:after {
       content: "";
       display: table;
       clear: both;
   }

   For more information regarding clear float review this article Div Is Not Covering The Full Area.

2. Use common CSS properties for the image and not apply fix width and height of the image.
   Extremely useful properties such as maximum width, minimum width, maximum height, and minimum height are used when you create responsive websites.

   img {
     display: block;
     max-width: 100%;
     max-height: 100%;
     width: auto;
     height: auto;
     margin: 0 auto;
   }

3. Do not use unless needed !important.
4. Always use external CSS stylesheets.

   <link href="style.css" rel="stylesheet" type="text/css">

5. Do not use inline styles.

   <h1 style="color:green;margin-left:30px;">Today’s Update</h1>

6. Use the CSS box-sizing Property
   The box-sizing property allows us to include the padding and border in an element’s total width and height.

   *, ::before, ::after {
       box-sizing: border-box;
   }

7. Always place Media Queries at last.