Dhanush N

Posted on Sep 26, 2020 • Edited on Jan 15, 2022

Rarely known CSS Tips

#css #html #webdev #design

💡 CSS Tip 1️⃣

The CSS 𝗳𝗼𝗻𝘁-𝗸𝗲𝗿𝗻𝗶𝗻𝗴 property defines the way specific pairs of letters are spaced.

💡 CSS Tip 2️⃣

The 𝗰𝘂𝗿𝗿𝗲𝗻𝘁𝗖𝗼𝗹𝗼𝗿 keyword represents the calculated value of the elements color property.

💡 CSS Tip 3️⃣

𝗥𝗚𝗕𝗮 is used to define the color of an object. The advantage of using RGBa method is the ability to take advantage of the last element of the equation, which is a (𝗮𝗹𝗽𝗵𝗮 𝘁𝗿𝗮𝗻𝘀𝗽𝗮𝗿𝗲𝗻𝗰𝘆)

💡 CSS Tip 4️⃣

Css comes with some filter effects. Similar to image editing the filter 𝗴𝗿𝗮𝘆𝘀𝗰𝗮𝗹𝗲 helps converting image to grayscale. The value 1 denotes 100%

💡 CSS Tip 5️⃣

The 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 shorthand property has the following longhand values

➡️background-color
➡️background-image
➡️background-repeat
➡️background-attachment
➡️background-position
➡️background-size
➡️background-origin
➡️background-clip

💡 CSS Tip 6️⃣

The 𝗰𝗹𝗶𝗽 property works only on absolutely positioned elements

💡 CSS Tip 7️⃣

The 𝘄𝗼𝗿𝗱-𝘄𝗿𝗮𝗽 property is similar to 𝗼𝘃𝗲𝗿𝗳𝗹𝗼𝘄-𝘄𝗿𝗮𝗽.

The only difference is only few new browsers support overflow-wrap

💡CSS Tips 8️⃣

Enable 𝗚𝘇𝗶𝗽 𝗰𝗼𝗺𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻 server-side whenever possible, it shrinks the size of files such as CSS without removing any of the content.

💡CSS Tips 9️⃣

To vertically center contents of div

If one line of text set 𝗹𝗶𝗻𝗲-𝗵𝗲𝗶𝗴𝗵𝘁 to height of container. If non-text contents wrap the DIV in a 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝘁𝗮𝗯𝗹𝗲 DIV & set inner DIV to 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝘁𝗮𝗯𝗹𝗲-𝗰𝗲𝗹𝗹

💡CSS Tips 1️⃣0️⃣

𝗟𝗼𝗯𝗼𝘁𝗼𝗺𝗶𝘇𝗲𝗱 𝗼𝘄𝗹 𝘀𝗲𝗹𝗲𝗰𝘁𝗼𝗿

* + *

Useful for situations when you have multiple elements of the same kind that need some spacing.

💡CSS Tips 1️⃣1️⃣

𝘀𝗵𝗮𝗽𝗲-𝗼𝘂𝘁𝘀𝗶𝗱𝗲 property

To get to know more technical stuff, connect with me via Twitter

Top comments (8)

Aleksandr Hovhannisyan • Sep 27 '20

To vertically center contents of div
If one line of text set 𝗹𝗶𝗻𝗲-𝗵𝗲𝗶𝗴𝗵𝘁 to height of container. If non-text contents wrap the DIV in a 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝘁𝗮𝗯𝗹𝗲 DIV & set inner DIV to 𝗱𝗶𝘀𝗽𝗹𝗮𝘆: 𝘁𝗮𝗯𝗹𝗲-𝗰𝗲𝗹𝗹

This is outdated. Just use flexbox or CSS grid. Don't use table formatting.

codedgar • Sep 28 '20

I always use

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

Sirajul Muneer • Dec 2 '20

place-items: center
Voila!

Dhanush N • Sep 27 '20

Yes you are right. This can be useful to beginners who are in the process of learning the css properties before they get into flex box or css grid

bronxsystem • Nov 1 '20

This tip took me HOURS to find i share it so you dont have to.

Old IE absolute positioning table cels does not behave how you expect it includes padding!!!!! or something like that have to double check but keep padding inmind even though its absolute positioned yes weird.

Bill Raymond • Sep 26 '20 • Edited

So that’s what rgba is! Thank you! That’s one of those things that I see frequently and keep forgetting to lookup. Great article!

Charanjit Chana • Sep 26 '20

currentColor is one I forget about all the time! I’m going to look into font-kerning tomorrow though, pretty sure I can fix some very annoying spacing issues I’ve noticed recently with it.