CSS Tricks Frontend Developer Should Know

1.Absolute Positioning 

If you want control over where an element  lives on our website at all time, absolute positioning is the key to making this happen Example:-

				
					.absolute{
    position:absolute;
    top:20px;
    right:20px
]
				
			

 

2.Overriding all styles

use important after the style in your CSS. For example, if I wanted the H2 headers in a specific section of my site to be red instead of blue. I would use the following CSS.

				
					.section h2 { color:red !important; }
				
			

 

3.Centering anything

A div(or any other element) can be centered by adding the block property to it and then using auto margin. The CSS would look like this example. 

				
					.center{
    display:flex;
    justify-content:center;
    align-items:center;
}

				
			

 

4.Vertical Alignment(for one line of text)

The key is to make the height of the menu and the line height of the text the same. I see this technique a lot when I go back and edit existing websites for clients. Here’s an example.

				
					.nav li{
    line-height: 50px;
    height:50px;
}
				
			

 

5.Hover

A CSS hover animation occurs when a user hovers over an element, and the element responds with motion or another transition effect.

				
					.entry h2{
    font-size : 30px;
    color : #000;
    font-weight : 800;
}

.entry h2:hover{
    color : #f00;
}
				
			

 

6.Transition

For hover effects, like with menus or on images in your website, you don’t want colors snapping too quickly to the end result. You ideally want to ease the change gradually.

				
					.entry h2:hover{
    color : #foo;
    transition : all 0.3s ease;
}
				
			

 

7.Link states

The link pseudo-class controls all links that haven’t clicked on yet. The: visited pseudo-class handles the styling of all of the links you’ve already visited example

				
					a:link{
    color : blue;
}
a:visited{
    color : purple;
}
				
			

 

8.Easily resize images to fit

Sometimes you get in a pinch where images need to fit a certain width while scaling proportionally. An easy way to do this is to use max-width to handle this example.

				
					img {
    max-width : 100%;
    height : auto;
}
				
			

 

9.Smoothing Scrolling

Add scroll behavior: smooth to the <html> element to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container)

				
					html {
    scroll-behavior : smooth;
}
				
			

 

10.Apply CSS to multiple classes or selectors

Let’s say you wanted to add an identical border around all images, the blog section, and the sidebar. Just list those items out, separated by commas. Here is an example

				
					.blog,img.sidebar{
    border:1px solid #000;
}
				
			

 

11.Set image as a cursor

when your mouse hovers over the header, it will show an image instead of your cursor.

				
					header {
    cursor : url(image.png), auto;
}
				
			

 

12.Force text to be all caps, all lowercase or capitalized

The text-transform property in CSS controls text case and capitalization.

				
					h2 {
    text-transform: uppercase;
}
h2 {
    text-transform: lowercase;
}
h2 {
    text-transform: capitalize;
}
				
			

 

13.Direct children

I wish I’d known this when I first started out using CSS. This would have saved me so much time to Use>to select the direct children of an element.  For example:

				
					#footer>a
				
			
 
14. Specific child element

You just need to count how many items down the element is that you want to style and then apply that style.

				
					li:nth-child(2){
    font-weight : 800;
    color : blue;
    text-decoration : underline;
}
				
			

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.