Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

CSS background color and background image to html element

Following are some CSS background properties

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

The background-color property specifies the background color of an element.

Code snippet

.details-section {

    background-color: #fff;

    color: #444;

}

The background-image CSS property sets one or more background images on an element.

Code snippet

.header-section {
    visibility: visible !important;
    position: relative;
    background: url("../images/header-img.gif");
}


Set background color and background image together to element 
/*background color and image shorthand CSS*/ 
.loading {
    position: relative;
    background: rgba(211,211,211) url("../images/progress.gif");
}

 

Set background color and background image to element with background position and background repeat
/*background color and
image shorthand color, image, position, and repeat CSS*/ 
.loading-bar {
    position: relative;
    background: rgb(211,211,211) url("../images/in-progress.gif") center no-repeat;
}

 

/*right side top
profile icon with shorthand color, image, position, and repeat CSS*/ 
.profile-section {
    background: #ffffff url("profile-us.png") no-repeat right top;

Good practices in CSS

When you are implementing CSS, then you must do it the right way, it should be readable, clean, reusable, and simple.

 As mentioned, there are some rules for writing clean CSS that you should try your best to avoid breaking.

In this article I will share some good practices or rules to write clean CSS, if I forgot some please share your suggestion in comment section.

1. DRY 

DRY stands for "Don't Repeat Yourself". This is a general software development principle and can be applied in any programming language, as well as in CSS.

Bad practice:

.success-button {
            background: green;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
        }
 
    .cancel-button {
            background: red;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
        }

 

Good practice:

.button {
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
        }
 
        .cancel-button {
            background: red;
        }
 
        .success-button {
            background: green;
        }

 

Note: avoid creating duplicate CSS classes first verify common CSS rules are available for your new requirement.

2. Naming

Avoid conflicting class names, in page specific CSS if you write conflicting names your page specific CSS may override existing common template CSS

Bad:

.table .p
{
           /* CSS rules */
        }

Good practice:

.sub-table //(specific subscriber table css)
    {
            /* CSS rules */
     }

 

  .table-border //(common table border css for all template or all website pages )
     {
        /* CSS rules */
     }

3. Don't Use Inline-Styles

Well, there are arguments it can be useful in some cases, but for better readability and code maintenance avoid it.

Avoid:

<div style="font-size: 16px; color: red;">Xyz Text</div>

4. Avoid the !important tag

The! important tag has the highest specificity of all CSS selectors, always using !important to make CSS working not suggested.

Better understand order of execution of CSS styles and apply rules with proper selectors, otherwise soon our project code will be full of! important tags, which makes your CSS code much harder to maintain.

Note: The only way to override an important tag is to use another important tag.

5. Avoid complete code copy paste 

Please avoid complete copy paste CSS from third party components, complete copy pest impacts existing UI recommended to customize required code only.

6. Page/controller specific CSS

a. Don't use HTML elements as selectors in page/control/partial control specific CSS, html or DOM elements higher-specificity selectors (these types of CSS is applied in common file)

//BAD reason CSS rules applicable for all website not for specific page or control

table {
           /* CSS rules */
      }

//Recommended or good practice

.sub-table //subscriber table rules specific to control
 {
            /* CSS rules */
   }

b. Avoid conflicting class selector in control specific CSS

Bad: These common and conflicting CSS class name might be available in common CSS

.table-title {
            /* CSS rules */
        }

Suggested or good practice:

.sub-table-title {
            /* CSS rules */
         }

 

c. Use proper CSS combinator selector to apply CSS for specific element

example: id and element combination(#id.elment)  i.e #subTable.div 

element and class combination (elment.class)  div.sub-table

7. Comments 

Add readable and meaningful comments when necessary or required only, reason good CSS doesn't need comments reason it should already be clear and self-descriptive.

Bad:

// Comments for all classes

.example-class {
/* CSS rules */ 
}

Good or recommended: (add comments to logical code section or common control)

 //User control comment

 .use-class-one {
/* CSS rules */
}

 .use-class-two {

  /* CSS rules */

}

8. Shorthand CSS

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously.

Using a shorthand property, you can save time and energy.

Bad practice

/*normal css*/
img {
    margin-top: 5px;
    margin-right: 4px;
    margin-bottom: 5px;
    margin-left: 4px;
}

 

Good practice

 

/*shorthand CSS as follows*/
img {
    margin: 5px 4px;
}

 

9. Minify CSS file size with CSS Compressors

Minifying a CSS file implies the removal of unnecessary characters in the source code to reduce the file size and facilitate faster loading of the site

Following are some tools to compress CSS file

  • CSS Minify
  • Topcoat
  • Code Beautifier
  • CSS Nano
  • csscompressor.net
  • cssminifie.com

Note: Minified file is saved with “. min.css” extension for example xyzsite.min.css

10. Create cross-Browser Compatible CSS

When you use an external stylesheet (where we can use browser engine prefix like -moz-, -webkit-, -o- and -ms-) for layout and valid markup (XHTML, HTML5), then your web pages work well on all browsers such as IE, Opera, Chrome, Mozilla, and Safari.

Some browser prefix descriptions

  • -moz- /* this is use for Firefox browser*/
  • -webkit- /*this is use for chrome and safari browsers*/
  • -o- /*this is use for opera browser*/
  • -ms- /*this is use for Internet Explorer (but not always it's depends on CSS3 browser support)*/

 

Code snippet

.stop-break-out-long-text {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
     /* for IE browser*/
    -ms-word-break: break-all;
   
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
     /* This is for Firefox browser */
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

CSS relative lengths measurement units

The CSS relative length units specify a length relative to another length property.

The relative length units are defined as em , ex , ch, rem , vw, vh , vmin,vmax,%

Code snippets

.nav-bar {
    font-size: 12px;
    /*Relative to the font-size of the element (2em means 2 times the size of the current element font) */
    line-height:2em;/*here line height is 24 px;*/
}

 

.left-section {
    /*rem is relative to font-size of the root element*/
    /*1rem equals the font size of the html element (which for most browsers has a default value of 16px).*/
     font-size:1rem;
    /*Relative to the parent element*/
    /*minimum width 25% of parent size*/
    min-width: 25%;
}


p {
    /*the x-height is determined by the height of the font's lowercase letter x.*/
    font-size: 16px;
    line-height: 3ex;

For more code samples and other unit details explanation please visit following tutorial post

https://www.w3schools.com/cssref/css_units.asp