Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
7 CSS Hacks Every Developer Should Know
CSS is an abbreviation for Cascading Style Sheets. It is used to make visually appealing websites. Using it would make the process of producing effective web pages easier.
The design of a website is critical. It improves the aesthetics and overall quality of the website by promoting user interaction. While it is possible to create websites without CSS, styling is required since no user wants to interact with a boring, unattractive website. In this article, we have discussed 7 CSS hacks which every developer will need at some point of time during web designing.
1. Creating Responsive Images
Using a variety of techniques known as responsive images, the right image may be loaded regardless of the device's resolution, orientation, screen size, network connection, or page layout. The picture shouldn't be stretched by the browser to match the page layout, and downloading it shouldn't take too long or use too much internet.
Syntax
img {
max-width: 100%;
height: auto;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
border: 2px solid #ccc;
border-radius: 8px;
}
.container {
max-width: 300px;
margin: 20px;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<h3>Responsive Image</h3>
<img src="/css/images/logo.png" alt="Sample Image">
</div>
</body>
</html>
The image automatically resizes to fit its container while maintaining its aspect ratio.
2. Center Content Using Position
If you want to centrally align the content of any element, there are various methods. Here's the most effective approach using absolute positioning.
Syntax
element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-box">Perfectly Centered!</div>
</div>
</body>
</html>
A green box with white text appears perfectly centered both horizontally and vertically within the gray container.
3. Universal Selector
CSS asterisk (*) selector, also known as CSS universal selector, is used to select or match all the elements for the entire web page at one go. It's commonly used to reset default browser styles.
Syntax
* {
CSS declarations
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
h1, h2, p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>CSS Universal Selector</h1>
<h2>This is an example</h2>
<p>All elements have reset margins, padding, and consistent font family.</p>
</body>
</html>
All elements display with reset margins/padding and Arial font, creating a consistent baseline styling.
4. Overriding CSS Styles with !important
Usually, for overriding CSS styles, we use CSS classes. However, if you want to specify a particular style must be applied to an element, then use !important.
Syntax
element {
property: value !important;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
font-size: 18px;
}
.override {
color: red !important;
font-weight: bold;
}
</style>
</head>
<body>
<h2>This is blue text</h2>
<h2 class="override">This is red text (overridden)</h2>
<h2>This is blue text again</h2>
</body>
</html>
The first and third h2 elements appear in blue, while the second h2 appears in red and bold due to !important override.
5. Smooth Scroll Behavior
Fine and efficient user experience is the most crucial factor in web designing. The scroll-behavior property enables smooth scrolling animations when navigating between sections.
Syntax
html {
scroll-behavior: smooth;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
section {
height: 100vh;
padding: 50px;
margin: 20px 0;
}
.section1 { background-color: #ffcdd2; }
.section2 { background-color: #c8e6c9; }
.nav-link {
display: inline-block;
margin: 10px;
padding: 10px 20px;
background-color: #2196F3;
color: white;
text-decoration: none;
border-radius: 4px;
}
</style>
</head>
<body>
<nav>
<a href="#section1" class="nav-link">Go to Section 1</a>
<a href="#section2" class="nav-link">Go to Section 2</a>
</nav>
<section id="section1" class="section1">
<h2>Section 1</h2>
<p>This is the first section. Click the navigation links to see smooth scrolling in action.</p>
</section>
<section id="section2" class="section2">
<h2>Section 2</h2>
<p>This is the second section. Notice how smoothly the page scrolls when navigating.</p>
</section>
</body>
</html>
Two colored sections appear with navigation links. Clicking the links creates smooth animated scrolling between sections.
6. Responsive Typography with Media Queries
When a media type matches the type of device the document is being shown on, media queries are used to apply responsive styles. Use viewport units for scalable typography.
Syntax
@media (max-width: 768px) {
/* CSS rules for mobile devices */
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-text {
font-size: 4vw;
text-align: center;
padding: 20px;
background-color: #e1f5fe;
}
@media (max-width: 768px) {
.responsive-text {
font-size: 6vw;
background-color: #ffeb3b;
}
}
@media (min-width: 1200px) {
.responsive-text {
font-size: 2.5vw;
background-color: #c8e6c9;
}
}
</style>
</head>
<body>
<div class="responsive-text">
This text resizes based on viewport width!
</div>
<p>Resize your browser window to see the text and background color change.</p>
</body>
</html>
Text that automatically adjusts size and background color based on screen width. On mobile (yellow background), medium screens (blue background), and large screens (green background).
7. CSS Flexbox
A CSS Flexbox is a container that includes a number of flex elements. The flex elements can be arranged into rows or columns as necessary. display: flex helps developers make layouts responsive and align elements efficiently.
Syntax
.container {
display: flex;
justify-content: center;
align-items: center;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #2196F3;
padding: 20px;
min-height: 200px;
}
.flex-item {
background-color: #fff;
padding: 20px;
margin: 10px;
border-radius: 8px;
text-align: center;
flex: 1;
max-width: 150px;
}
</style>
</head>
<body>
<h2>Flexbox Layout Example</h2>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
A blue container with three white boxes evenly distributed and vertically centered, demonstrating flexible layout capabilities.
Conclusion
These 7 CSS hacks provide essential techniques for modern web development. From responsive images to flexbox layouts, mastering these concepts will significantly improve your CSS skills and help create better user experiences.
227 Views
