DEV Community

Cover image for Rarely known CSS Tips
Dhanush N
Dhanush N

Posted on • Updated on

Rarely known CSS Tips

๐Ÿ’ก 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.

Alt Text

๐Ÿ’ก 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 (๐—ฎ๐—น๐—ฝ๐—ต๐—ฎ ๐˜๐—ฟ๐—ฎ๐—ป๐˜€๐—ฝ๐—ฎ๐—ฟ๐—ฒ๐—ป๐—ฐ๐˜†)

Alt Text

๐Ÿ’ก 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%

Alt Text

Alt Text

๐Ÿ’ก 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

Alt Text

Alt Text

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

Top comments (8)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

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.

Collapse
 
codedgar profile image
codedgar

I always use

.elm{
display:flex;
align-items:center;
justify-content:center;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sirajulm profile image
Sirajul Muneer

place-items: center
Voila!

Collapse
 
dhanushnehru profile image
Dhanush N

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

Collapse
 
bronxsystem profile image
bronxsystem

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.

Collapse
 
billraymond profile image
Bill Raymond • 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!

Collapse
 
cchana profile image
Charanjit Chana

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.

Collapse
 
bilalprofile profile image
Bilal M Rizwaan

{
display : grid ;
place-items : center ;
}