I have compiled a few CSS tips and tricks below that will help you improve your design. These CSS properties will make building projects more straightforward and efficient if you know how to use them.

1. Responsive Images in CSS

The following simple hack will ensure that your images fit any visitor's device, no matter how large or small their screen is.

CSS Code:

img {
     width: 100%;
     height: 800px; 
     object-fit: cover;
     object-position: bottom;
}
/* The 'object-fit: contain' can also be used instead of the 'object-fit: cover' option */

2. Fix an Element Position

Elements with aposition: fixed are positioned relative to the viewport, so they remain fixed even if the page is scrolled.

CSS Code:

#navbar{
     position: fixed;
     height: 100%;
     min-width: 300px;
     top: 0px;
     left: 0px;
     color: black;
     background-color: #eee;
     padding: 75px 0px;  
}

3. Align Items Center

You can use the following CSS code to center the items within the container:

CSS Code:

.center {
     display: grid;
     place-items: center;
}

/* or */
.center {
     align-items: center;
     display: flex;
     justify-content: center;
}

4. Style Visited Link

This selector is used to select links that have been visited. You can style visited links using simple CSS code.

CSS Code:

a:link {
     color: #ff0000; /* the unvisited link is red */
}
a:visited {
     color: #ee82ee; /* the visited link turns violet */
}

5. Style First Letter

Use the ::first-letter pseudo-element to add a style to the first letter of the <p> element.

CSS Code:

p::first-letter {
       display: block;
       float: left;
       margin: 5px;
       color: #000000;
       font-size: 60px;
}

6. Hover Effects

Using the :hover selector, you can add a hover effect to an HTML element.

HTML Code:

<button>Hover Over Me</button>

CSS Code:

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

7. Using text-transform

Using the text-transform CSS property, you can transform text to be in uppercase, lowercase, or capitalized.

Use the code given below to transform text to uppercase.

HTML Code:

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

CSS Code:

.uppercase {
      text-transform: uppercase;
 }

8. Tooltips

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

Right Tooltip Example

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;
 }

9. Add Shadow Effects

You can add CSS shadow effects to texts and elements using the text-shadow and box-shadow CSS properties. Using the text-shadow property, a comma-separated list of shadows can be applied to text.

You can use the following CSS code to create a text shadow:

CSS Code:

.heading{
       text-align: center;
       background: #e74c3c;
       color: #fff;
       font-family: Poppins;
       text-shadow: 5px 5px rgba(823, 205, 105, 0.5);
}

For more cool CSS tips, read 14 Awesome CSS Properties You Need to Know on Medium.com.

Conclusion:

I appreciate you taking the time to read this! Hopefully, it will be helpful to you. Are you interested in learning more about web development? You can follow Ishrat for daily content on web development.