CSS Tricks That Every Web Developer Should Know
CSS (Cascading Style Sheets) is the magic ingredient that breathes life into the raw structure of HTML, transforming it into visually captivating and user-friendly interfaces. While the core concepts of CSS are relatively easy to grasp, mastering its nuances takes dedication and practice. But the rewards are substantial.
With CSS proficiency, you gain the power to craft websites that not only boast stunning aesthetics but also prioritize user experience by ensuring intuitive navigation, clear information hierarchy, and overall visual coherence. This not only enhances the user's journey through your website but also fosters trust and engagement, ultimately contributing to your website's success.
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, 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: The area should be at least 40×40 px to make your button clickable on mobile devices.
- Box-shadow: Add a 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 the 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 over 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 the 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 the 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 of 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 to 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 to 100% then the image will scale to the size 300px wide.
HTML
<div class="content">
<img src="..."/>
</div>
CSS
.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">
<!-- Content Page -->
</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 the div is 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 the 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, which will center the div horizontally with “class=page”
- Padding: To create some space between the screen and the content.
HTML
<div class="page">
<p><!-- Content Page --></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 your career, you will be using CSS and you will learn a lot but writing perfect CSS is not easy. It comes with 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.