Five CSS Tricks With Codepen Examples

CSS which stands for Cascading Style Sheets 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.

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 !important keyword is used in CSS to override previous CSS rules inherited from the parent element.

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.

transform: translate(-50%, -50%)

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.

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 four break-points at 500px, 700px, 950px and 1200px.

5. THE HOVER PROPERTY

The 

:hover

 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.

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.