CSS which stands for is a style sheet language used to describe how HTML elements are to be displayed. CSS is one of the core languages of the web because it is used to style the web. With CSS, you can add fonts, colors, size and spacing. It's basically used to layout the web. Cascading Style Sheets CSS is very easy to use but can be very tricky. Below are few CSS tricks and techniques you might find useful. 1.   Use !important to Override Normal CSS Rules The keyword is used in CSS to override previous CSS rules inherited from the parent element. !important 2. Using CSS Box Shadow The CSS box-shadow property adds a shadow effect around an element. 3. CENTERING AN ELEMENT In Web Development, there are many times you'll get to a point where you need to center a particular element. There are many ways to center an element, but here, I'll be showing you how to do it using position absolute and transform. The transform property allows you to rotate, move and scale elements, hence applying a 2D or 3D transformation to the element. means that, relative to the original position of this element, we move it to the left by 50% of its width, and then move it up by 50% of its height. transform: translate(-50%, -50%) 4. USING MEDIA QUERIES The presence of media queries (denoted with @media) in your style sheet allows you tell the browser how to render the content of your web page depending on the device used (screen size) to access the web page. Media queries are very essential in Web Development and it's the brain behind responsive web pages. Below, I'll be changing the color of a web page depending on how wide the screen is. In the codepen editor above, I set the default background color to be cyan. I then went further to add media queries for different break-points. I set the at and four break-points 500px, 700px, 950px 1200px. 5. THE HOVER PROPERTY The selector in CSS is actually a pseudo-class. Using :hover, you can define how a particular element is styled when the user hovers their cursor over it without actually clicking on it. :hover In the codepen editor above, when we hover on the button, the color and background color changes. A transform property was also added on hover which moves the right side of the button by -15 degrees.

Five CSS Tricks With Codepen Examples

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

12 Best Basic HTML Snippets to Use Instead of Complex Libraries

Building a movie app interface with Vue.js

Codepen Embeds Now Supported in 3.0 Editor

CSS3 Animation Step by Step Guide

Debugging My Love Life

12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

12 Best Basic HTML Snippets to Use Instead of Complex Libraries

Building a movie app interface with Vue.js

Codepen Embeds Now Supported in 3.0 Editor

CSS3 Animation Step by Step Guide

Debugging My Love Life

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps