Learning CSS is the way to go to build good-looking web pages. However, in the process of learning it, we tend to confine ourselves (most of the time) to always use the same properties over and over. We are a creature of habit after all, we use what we're comfortable with.
So, in this article, I'll try to introduce you to 7 CSS properties that by the end of this post you should feel comfortable using.
Text and Numbers
Let's start with the text-related properties:
1. vertical-align
The first property on this list is vertical-align. According to MDN this CSS property sets the vertical alignment of an inline, inline-block or table-cell box.
Well, like the definition said, this property lets you align the text vertically. It's particularly useful for ordinal indicators (st, nd, etc), required inputs asterisk (*) or icons that are not correctly centered. It takes one of these values: super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom, or a length (px, %, em, rem, etc.) from the baseline.
Note that for ordinal indicators you could also use the
<sup>HTML element.
Resource: MDN.
2. writing-mode
Let's continue with the second property. writing-mode sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. It takes one of these values horizontal-tb (default) | vertical-rl | vertical-lr.
Resource: MDN.
3. font-variant-numeric
The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
It takes one of these values normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions.
This property is useful to style numbers. depending on the situation you might want to display an old-style of numbers or with a slashed zero or you have a counter and you don't want the rest of the string (that comes after the number) to giggle while the numbers changes. For these situations font-feature-settings is useful.
Note that the
font-variant-numericis part of thefont-feature-settingsgroup of properties. Properties likefont-variant-capsorfont-variant-ligaturesare part of that group too.
Note also that like allfont-feature-settingsproperties your font needs to implement those said features to work properly. The font I'm using is Fira Sans.
Resource: MDN.
4. user-select
The user-select property is useful whenever you have a text you don't want the user to be able to select, or on the contrary, you want all the text to be selected if a double-click or context-click occurred.
This property takes one of these values: none | auto | text | all.
Notice how the coupon gets selected when click, and how the vertical text is not selected.
Resource: MDN.
Shapes
Let's talk now about some shapes-related properties:
5. clip-path
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
This property takes one of these values: circle() | ellipse() | polygon() | path() | url().
Since this is an introduction to this property, I won't dive deep into each of these values, but you could check the resource at the bottom of this section if you want to learn more.
The two values I use the most are circle and polygon. The circle(radius at pair) value takes two arguments, the first one is the radius of the circle, and the second one is a point representing the center of the circle.
The polygon(pair, pair, pair ...) value takes 3 or more points, representing a triangle, a rectangle and so on.
Resource: MDN.
6. shape-outside
The shape-outside CSS property provides a way to customize the wrapping of an HTML element, making it possible to wrap text around complex objects rather than simple boxes. It takes the same values as clip-path do.
Where clip-path defines how the users see your element, shape-outside defines how other HTML elements see it.
Notice how the text float around the shape of the dog picture in the figure above.
Resource: MDN.
7. background-clip
Last but not least, the background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
This property takes one of these values: border-box (default) | padding-box | content-box | text.
Note that you can set the background to be visible only behind text characters. For that, you have to set the font color to transparent and use the -webkit- prefix on chrome.
Resource: MDN.
Wrapping up
There you have it, these are the 7 properties I wanted to bring to your attention. Here's a sample using all the CSS properties mentioned in this post:
How much of these properties did you know about? And what are the properties you think should be added to this list? Tell me in the comments.
Hey, let's stay in touch!
If you liked this article, please share it with your friends and colleagues.
Connect with me on Twitter or LinkedIn to read more about HTML, CSS, JS and Angular!
Top comments (23)
what on earth....writing-mode, didn't even know that existed. thanks for this post!
Thx. Glad i could help!
This is helpful
Thank you
These are great!
such a great content thanks you!!!
Thank you for your feedback! I appreciate it
Nice one!
This is wonderful!
Thanks for the kind words
Great article, Mustapha. Thanks for sharing your knowledge.
Thanks 🙏
Very useful
Très sympa la présentation du post !
Hello, can I translate your article into Chinese and share it with Chinese developers? I will attach the original link address of the article.
Sure :)
Super article comme toujours, les examples concrets (avec le coupon de réduction), les liens vers la doc complete et la partie wrapping up sont vraiment top :)
Hey! Merci 🙏
this is soo helpful, thank you ❤️
Great article! I have opened a lot of new! THANKS!
Nice write-up Mustapha
Hi Joost!
Thank you 🙏
Love it! Super interesting and useful for future layouts :D Thanks!