CSS Tricks That Every Web Developer Should Know

Cascading style sheet… If you’re a Full-stack developer or a frontend engineer then surely you might have been using CSS in your application. CSS plays an important role in making your site beautiful and attractive. A beautiful user interface always attracts the user and that becomes a good reason for users to stay on the site for a long time. 

It’s easy to learn CSS, and it’s fun to use and play with its properties in your web application….but very few people master it. It becomes irritating for developers when things or styling in their application doesn’t behave in the way they want it to behave. Writing CSS for your application is similar to solving puzzles. You try different properties, and you check how your application looks like after applying your own styling.

You don’t need to write the styling for each and every HTML element. Your CSS makes your HTML code smaller. You will find that it’s easy to create a beautiful design for your website. It’s not easy to write the perfect CSS but if you’re a master in it then surely you will save a lot of time. Also, you won’t have to discuss the thing with the designers.

In this blog, we will discuss some tricks of CSS that will help you in writing good CSS for your project. Following these tricks will make you a better developer…

Trick 1: Make Your Button Perfect 

Buttons are the common elements of every web application. Whether you need to submit a form, redirect to a different page, buy an item, or send an email, in most cases, you will be using buttons to achieve these tasks. No matter what buttons grab the attention of users, and it is important to make your button perfect. Different programmers follow different approaches to get the same result. A similar thing happens in CSS. Below are some tips to make your button perfect…

• Size: Area should be at least 40×40 px to make your button clickable on mobile devices.
• Box-shadow: Add box-shadow to create a depth effect for your button.
• Min-width: When you see the text is too short in your button, add the min-width for the minimum size of the button. To align your text in the center use text-align: center property in CSS.
• Hover: You hover the property of CSS to make your button interactive. This will grab the user’s attention. Hover change the color of the button when you hover your mouse on it. It grabs the attention of the user easily. 
• Transitions: Adding a transition of colors, add an extra touch.
• Round Corners: It is optional, but rounded corner buttons also grab the attention of users.
• Line-height: To vertically center the text in a button with padding use line-height. Line height sets the space between the lines in case of a single line and the element with a display. An example is given below…

//CSS
button {
 margin: 30px;
 line-height: 60px;
 min-width: 160px;
 font-family: Arial, sans-serif;
 background-color: #FD310F;
 border-radius: 4px;
 text-align: center;
 border: 0;
 cursor: pointer;
 color: #fff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 transition: background-color 0.3s ease-in-out;
}

button:hover {
 background-color: #0000ff;
}

Trick 2: Button Bars

You group the buttons with different actions in the button bar. In this group of buttons, the total number of buttons or the size of the buttons becomes confusing for developers. For different buttons you may need different designs, here writing the CSS becomes difficult for you. You can’t be flexible in this case. To solve this issue you can write the code given below…

HTML

<div class="button-bar"> <button>Add to Cart</button> <button>Buy Now</button> </div>

//CSS
.button-bar {
background-color: #00FF00;
padding: 0 7px;
text-align: right;
}
.button-bar button {
margin: 20px 12px;
display: inline-block;
}

Trick 3: Resize Image

Resizing images is also a challenging task. In your web application, you don’t want your images to scale up. A lot of times it happens that images get blurred the image resolution is low. Images should be small to avoid these kinds of issues. Most often we represent images in pixels. Define a specific size for images. The idea is to make the original size of the image maximum size. If the size of the image is 200px then keep the maximum width 200px.

The best trick you can try is to define the size of images in percentage. A ratio you can find between the maximum width and screen width, and then you can set the maximum width to a certain percentage of the screen width. 

You can consider a scenario where the image is 400px wide and the width is set 100%. Now two things can happen which are given below. 

• If the size of the screen will be 800px wide then the maximum width will turn out to be 800px. Here the width of the image is only 400px. SO this is actually going to display as 400px.
• If the image is bigger than your screen then for example screen is 300px and the maximum width is set 100% then the image will scale to the size 300px wide.

<div class="content">
<img src="..."/>
</div>

.content{
/* Min space between image and window */
padding: 30px;
}
.content img{
display: block;
margin: 0 auto;
max-width: 100%;
}

Trick 4: Fixed Header

We all use headers in our application at the top. Headers look good, but it is difficult to make a perfect header. You might have observed on every website that headers are sticky. This property is achieved by using the position: fixed for headers. But here you will be facing an empty space at the beginning of the page. 

You will be facing the problem when you will have to resize the page. The height of the header will be changed whenever you will have to adjust the space. You will also face a problem with the scrollbars. A part of it will be covered by the header. To overcome this issue, use the flex property of CSS.

HTML

<div class="page"> <div class="header">Logo</div> <div class="content">    </div> </div>

//CSS
.page{
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page .header{
background-color: #000;
line-height: 30px;
color: #fff;
text-align: center;
}
.page .content{
flex: 1;
overflow: auto;
}

Tricks 5: Center Content

None of the websites works without content. It is important for UI developers to be careful while placing the content on different pages and giving style to them. Content on any website should be placed properly, and it should look good on multiple devices with multiple resolutions. This is also a challenging task. 

Most of the developers use media queries to resolve this issue. Adding media queries in content make things complex because you may have to add various media queries code for different resolution. 

To solve this issue you can resize the content of the page depending on the size of the browser. Here you need to consider that the content inside div is a text. Here It will be difficult to read when each line will be approx 1300px-1500px. You need to limit the width of the content. Center that horizontally because it’s not going to cover entire width on higher resolution. 

Below is the solution to resolve this issue…

• Max-width: You need to limit the page size to the maximum width
• Margin: “0- Auto”- This property is going to set the same left and right margin, that will center the div horizontally with “class=page”
• Padding: To create some space between the screen and the content.

HTML

<div class="page">    <p></p>    </div>

// CSS
body{
padding: 30px;
font-family: Arial, sans-serif;
}
.page{
background-color: #0000FF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 4px;
margin: 0 auto;
max-width: 600px;
padding: 30px;
}

Conclusion

As you will start with your career, you will be using CSS and you will learn a lot but writing perfect CSS is not easy. It comes with the practice and seeing the code of other people. Play around with your code and check how it affects your web application. You will understand a lot of things while doing this.

Adblock test (Why?)

Original page link

Best Cool Tech Gadgets

Top favorite technology gadgets