09+ CSS Tricks to Enhance Your Web Development Skills

Cascading Style Sheets (CSS) offer powerful capabilities to style and enhance the appearance of your web pages. This article covers 18+ practical CSS tricks, including smooth scrolling, styling inputs, and advanced selectors. Each example includes code and explanations, and wherever possible, code output to help you visualize these techniques in action.

01. Scroll Behavior: Smooth

The scroll-behavior property allows you to enable smooth scrolling when navigating to anchors on a page.

html {
  scroll-behavior: smooth;
}

Usage: Click on a link to smoothly scroll to the corresponding section of the page.

02. Textarea Resize Restriction

The resize property controls the resizing behavior of a <textarea> element.

textarea {
  resize: none;
}

Usage: This ensures users cannot resize the textarea element, preserving your layout.

03. Drop Cap with ::first-letter

The ::first-letter pseudo-element styles the first letter of a block of text, often used to create a "drop cap" effect.

p::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  margin-right: 10px;
}

Usage: Add a dramatic effect to the opening paragraph of your content.

04. Input:in-range

The :in-range pseudo-class styles input elements with values within a defined range.

input:in-range {
  border: 2px solid green;
}

Usage: Use this to visually indicate valid input values.

<input type="number" min="1" max="10" />

05. Input:out-of-range

The :out-of-range pseudo-class styles input elements with values outside a defined range.

input:out-of-range {
  border: 2px solid red;
}

Usage: This can highlight invalid input values.


<input type="number" min="1" max="10" />

06. Required Attribute in Input Tag

The required attribute ensures that users cannot submit the form without filling in the input field.

<form>
  <input type="text" required placeholder="Required field" />
  <button type="submit">Submit</button>
</form>

Usage: Display a message prompting users to fill in the required fields.

07. Hidden Attribute in Input Tag

The hidden attribute hides an input element from the user.

<input type="hidden" value="hidden value" />

Usage: Use this for storing data you don't want users to see but need to include in form submissions.

08. Center Content with Flexbox

Flexbox makes it easy to center content horizontally and vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Usage: Quickly align elements in the center of a container.

09. Custom Checkbox and Radio Buttons

Enhance the appearance of checkboxes and radio buttons using custom styles.

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: #4caf50;
}

Usage: Make your forms more visually appealing.

<input type="checkbox" />
<input type="radio" name="group" />

10. Custom Scrollbar

Style the browser's scrollbar for a modern look.

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

Usage: Improve the user experience of scrollable areas.

<div style="height: 100px; overflow-y: scroll;">
  Content that overflows.
</div>

Conclusion

These CSS tricks provide simple yet effective ways to enhance your web design and improve user interactions. By combining these techniques, you can create responsive, accessible, and visually appealing web pages. Experiment with these tricks and integrate them into your projects to see their impact in action!