CSS Snippets: 10 useful one liners!

Ok! Not all samples in this post are literally one-liners, but the idea is to compile some short and concise pieces of code that would be commonly used when styling a website.

Center HTML elements Horizontally

This is one of the first code lines you’ll come across when learning web development: margin:auto. Basically it allows you to center an html block element horizontally while taking into account the size of its direct parent. This code won’t work for inline elements like img tags, unless you use display: block;

Text Vertical Align

Vertical aligns are always tricky with CSS, but this snippet will allow you to do it easily for a single line of text. Basically we use the line-height property to put an equidistant space at the top and bottom of the text. To make this work, the line height value needs to be the same as the height of the html element containing the text.

CSS Triangles

Here is very neat code snippet. Basically it uses the intrinsic shape of the borders of an html element to create a triangle. All four borders have a diagonal intersection in which they all sit. If we get rid of the width and height of the html element, all borders will intersect with each other. The final touch is to give a color to the border that will be the base of the triangle, and set the borders that correspond to the sides of the triangle to transparent and voila!

Chris Coyier, from CSS Tricks has a great visual explanation of how this snippet works: https://css-tricks.com/snippets/css/css-triangle/

Clear text from below a floated image

Floating an image in your website will cause the content immediately below to wrap around it, which is very obvious when dealing with text. But what if we don’t want the text to wrap below the image? If we apply overflow: auto; to the text, it will clear the space below the image. Short and sweet.

Clear floats like the cool kids

Disclosure: With the arrival of flexbox, floats will be soon deprecated, but still is good to know how to deal with them

When floating elements, unexpected results can occur, mostly because the parent of the element that is floated collapses, which open a pandora’s box of bugs and restrictions. The clearfix method will keep the parent’s height even when any of its children are floated, keeping your layout intact.

Copy this code and try deleting the clearfix class from the div and see how the parent’s height collapses.

Chris Coyier, from CSS Tricks, also explains this trick in more details and offers alternative solutions: https://css-tricks.com/all-about-floats/

CSS Circles

This is another fine one liner to create perfect circles with CSS. All you need is an html element with the same height and width, plus the rule border-radius: 50%; and it’s done.

Disable input’s glow

When working with input elements, browsers will apply their own styles to them when they are focused (aka the user clicks on them) which can be annoying. To disable this just add outline: none; and the glow from the focused input will disappear.

Center html element vertically and horizontally

Here is a little trick to vertically and horizontally center an html element to its parent (if the parent is not the body tag, add position: relative; to it). If we give an absolute position of top: 50%; and left: 50%;, the upper left corner of the html element will be immediately in the center point of the parent. From there we just need to add negative margins to it, being the values half of the width and height of the html element. Short and sweet again.

Truncate Text

Not long ago truncated strings where the result of some PHP or JavaScript magic. Not anymore, with the text-overflow: ellipsis; rule CSS can now achieve the same result for one liners. However by default your browser wraps the text when necessary, so you need to disable this using the white-space: nowrap; and hide the text that is going to go over the div with overflow: hidden;

Style Selected Text

The last snippet is an obscure one. The ::selection pseudo-element was drafted for CSS Selectors Level 3, but removed before the Recommendation status. So, at the moment, the ::selection pseudo-element is not in any specification (source: w3schools). However it works! You can style selected text in your website.

And that is it!… Have fun and if you have another snippet leave it in the comments!

Share on Facebook3Tweet about this on TwitterShare on LinkedIn7

Leave a Comment

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