CSS is used to add styling to a webpage after you've set up the HTML skeleton. Moreover, you can create slick designs in CSS with just a few lines of code.

Every developer should know these CSS tricks to develop their projects quickly and efficiently. They're sure to increase your productivity to the next level—let's get started.

1. Hover Effects

You can add a hover effect to an HTML element using the :hover selector.

Example: Adding hover effect to a button element.

HTML Code:

        <button>Hover Over Me</button>
    

CSS Code:

        button:hover {
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

You can play around with this code and add effects like fade-in, grow-in, skew, and so on. Make it your own!

CSS Fade-in Effect on Hover

        button{
opacity:0.5;
}
button:hover{
opacity:1;
}

CSS Grow-in Effect on Hover

        button:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

2. Resize Images to Fit a div Container

You can resize an image to fit a div container using the height, width, and object-fit properties.

HTML Code:

        <img class="random-image" src="https://picsum.photos/200/300" />
    

CSS Code:

        .random-image {
                height: 100%;
                width: 100%;
                object-fit: contain;
            }

3. Overriding all the Styles

You can override all other style declarations of an attribute (including inline styles) using the !important directive at the end of a value.

HTML Code:

        <p class="className" id="idName" style="background-color: orange;">
            Hello World!
        </p>

CSS Code:

        p {
                background-color: yellow;
            }
            .className {
                background-color: blue !important;
            }
            #idName {
                background-color: green;
            }

In this example, the !important rule overrides all other background-color declarations and ensures the background color will be set to blue rather than green.

4. Truncate Text With Ellipsis

You can truncate overflowing text with an ellipsis (...) using the text-overflow CSS property.

HTML Code:

        <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
        </p>

CSS Code:

        .text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 200px;
            }

Related: The CSS Box Model Explained With Examples

5. Using text-transform

You can force text to be uppercased, lowercased, or capitalized using the text-transform CSS property.

Uppercase

HTML Code:

        <p class="uppercase">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>

CSS Code:

        .uppercase {
                text-transform: uppercase;
            }

Lowercase

HTML Code:

        <p class="lowercase">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>

CSS Code:

        .lowercase {
                text-transform: lowercase;
            }

Capitalize

HTML Code:

        <p class="capitalize">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>

CSS Code:

        .capitalize {
                text-transform: capitalize;
            }

6. Using Single-Line Property Declaration

You can use the shorthand properties in CSS to make your code concise and easily readable.

For example, CSS background is a shorthand property that allows you to define the values of background-color, background-image, background-repeat, and background-position. Similarly, you can define properties for font, border, margin, and padding.

Single-Line Background Property Declaration

        background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;

You can simplify the above declaration to a single line:

        background: black url(images/xyz.png) no-repeat left top;
    

The shorthand properties are very convenient to use, but you need to consider some tricky edge cases (as outlined on MDN Web Docs) while using them.

7. Tooltips

Tooltips are a way to provide more information about an element when the user moves the mouse pointer over the element.

Right Tooltip

HTML Code:

        <div class="tooltip_div">Right Tooltip
          <span class="tooltip">This is the Tooltip text</span>
</div>

CSS Code:

        body {
                text-align: center;
            }
            .tooltip_div {
              position: relative;
              display: inline-block;
            }

            .tooltip_div .tooltip {
              visibility: hidden;
              width: 170px;
              background-color: blue;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;

              /* Positioning the tooltip */
              position: absolute;
              z-index: 1;
              top: -5px;
              left: 105%;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Left Tooltip

HTML Code:

        <div class="tooltip_div">Left Tooltip
          <span class="tooltip">This is the Tooltip text</span>
        </div>

CSS Code:

        body {
                text-align: center;
            }
            .tooltip_div {
            position: relative;
            display: inline-block;
            }

            .tooltip_div .tooltip {
              visibility: hidden;
              width: 170px;
              background-color: blue;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;

              /* Positioning the tooltip */
              position: absolute;
              z-index: 1;
              top: -5px;
              right: 105%;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Top Tooltip

HTML Code:

        <div class="tooltip_div">Top Tooltip
          <span class="tooltip">This is the Tooltip text</span>
        </div>

CSS Code:

        body {
                text-align: center;
            }
            .tooltip_div {
            margin-top: 100px;
            position: relative;
            display: inline-block;
            }

            .tooltip_div .tooltip {
                visibility: hidden;
                width: 170px;
                background-color: blue;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;

                /* Positioning the tooltip */
                position: absolute;
                z-index: 1;
                bottom: 100%;
                left: 50%;
                margin-left: -60px;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

Bottom Tooltip

HTML Code:

        <div class="tooltip_div">Bottom Tooltip
          <span class="tooltip">This is the Tooltip text</span>
        </div>

CSS Code:

        body {
                text-align: center;
            }
            .tooltip_div {
            margin-top: 100px;
            position: relative;
            display: inline-block;
            }

            .tooltip_div .tooltip {
              visibility: hidden;
              width: 170px;
              background-color: blue;
              color: #fff;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;

              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              top: 100%;
              left: 50%;
              margin-left: -60px;
            }

            .tooltip_div:hover .tooltip {
              visibility: visible;
            }

You can also use the Bootstrap library to create custom Bootstrap tooltips.

8. Add Shadow Effects

You can add CSS shadow effects to texts and elements using the text-shadow and the box-shadow CSS properties respectively.

CSS Text Shadow

The text-shadow CSS property adds shadows and layers to the text. The text-shadow property accepts a comma-separated list of shadows to be applied to the text.

Syntax of the text-shadow CSS Property:

        /* You can use 4 arguments with the text-shadow CSS property:
offset-x, offset-y, blur-radius, and color */
/* offset-x | offset-y | blur-radius | color */
text-shadow: 2px 2px 4px red;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #18fa3e 1px 2px 10px;

Note: The color and blur-radius arguments are optional.

Related: How to Use CSS text-shadow: Tricks and Examples

For example:

        background: #e74c3c;
color: #fff;
font-family: lato;
text-shadow: 1px 1px rgba(123, 25, 15, 0.5), 2px 2px rgba(129, 28, 18, 0.51), 3px 3px rgba(135, 31, 20, 0.52), 4px 4px rgba(140, 33, 22, 0.53), 5px 5px rgba(145, 36, 24, 0.54), 6px 6px rgba(150, 38, 26, 0.55), 7px 7px rgba(154, 40, 28, 0.56), 8px 8px rgba(158, 42, 30, 0.57), 9px 9px rgba(162, 44, 31, 0.58), 10px 10px rgba(166, 45, 33, 0.59), 11px 11px rgba(169, 47, 34, 0.6), 12px 12px rgba(173, 48, 36, 0.61), 13px 13px rgba(176, 50, 37, 0.62), 14px 14px rgba(178, 51, 38, 0.63), 15px 15px rgba(181, 52, 39, 0.64), 16px 16px rgba(184, 54, 40, 0.65), 17px 17px rgba(186, 55, 41, 0.66), 18px 18px rgba(189, 56, 42, 0.67), 19px 19px rgba(191, 57, 43, 0.68), 20px 20px rgba(193, 58, 44, 0.69), 21px 21px rgba(195, 59, 45, 0.7), 22px 22px rgba(197, 60, 46, 0.71), 23px 23px rgba(199, 61, 47, 0.72), 24px 24px rgba(201, 62, 47, 0.73), 25px 25px rgba(202, 62, 48, 0.74), 26px 26px rgba(204, 63, 49, 0.75), 27px 27px rgba(206, 64, 49, 0.76), 28px 28px rgba(207, 65, 50, 0.77), 29px 29px rgba(209, 65, 51, 0.78), 30px 30px rgba(210, 66, 51, 0.79), 31px 31px rgba(211, 67, 52, 0.8), 32px 32px rgba(213, 67, 52, 0.81), 33px 33px rgba(214, 68, 53, 0.82), 34px 34px rgba(215, 69, 53, 0.83), 35px 35px rgba(216, 69, 54, 0.84), 36px 36px rgba(218, 70, 54, 0.85), 37px 37px rgba(219, 70, 55, 0.86), 38px 38px rgba(220, 71, 55, 0.87), 39px 39px rgba(221, 71, 56, 0.88), 40px 40px rgba(222, 72, 56, 0.89), 41px 41px rgba(223, 72, 57, 0.9), 42px 42px rgba(224, 73, 57, 0.91), 43px 43px rgba(225, 73, 57, 0.92), 44px 44px rgba(225, 73, 58, 0.93), 45px 45px rgba(226, 74, 58, 0.94), 46px 46px rgba(227, 74, 58, 0.95), 47px 47px rgba(228, 75, 59, 0.96), 48px 48px rgba(229, 75, 59, 0.97), 49px 49px rgba(230, 75, 59, 0.98), 50px 50px rgba(230, 76, 60, 0.99);

CSS Box Shadow

The box-shadow property is used to apply a shadow to HTML elements.

Syntax of the box-shadow CSS property

        box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
    

Note: The blur, spread, and color parameters are optional.

Related: How to Use CSS box-shadow: Tricks and Examples

For example:

        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    

If you want to have a look at the complete source code used in this article, here's the GitHub repository.

Style Your Website Using Modern CSS Tricks

Adding CSS text shadows to a website is a great way to draw the attention of the users. It can give the website a certain elegance and a unique feel. Get creative and experiment with some text-shadow examples that may align with the theme of your website.