DEV Community

Cover image for CSS Tips you won't see in most tutorials
Marko Denic
Marko Denic

Posted on • Updated on • Originally published at markodenic.com

CSS Tips you won't see in most tutorials

CSS tips and tricks you won’t see in most of tutorials.

If you're learning CSS, I'd suggest you to check this CSS Tutorial first.

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a main technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

Let's start with the tips!

* Cursors

Did you know that you can use your own image, or even emoji as a cursor?

* Smooth scrolling

Smooth scrolling without JavaScript, with just one line of CSS.

* Truncate text

Did you know that you can truncate text with plain CSS?

* Truncate the text to the specific number of lines.

You can use “-webkit-line-clamp” property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.

You can find more HTML/CSS/JS Tips here: github.com/MarkoDenic/awesome-html-css-js-tip

If you liked this article, be sure to ❤️ it.

This article is a repost from my blog. Find the original post here: CSS Tips.

A bonus: Read more about CSS line-height.

Let's keep in touch:
Blog
Twitter
Github
Codepen

Top comments (8)

Collapse
 
thomasledoux1 profile image
Thomas Ledoux

Good tips, maybe it's good to add that Smooth scrolling is not supported by Safari and IE (caniuse.com/#feat=css-scroll-behavior).
There is a good polyfill for this though: github.com/iamdustan/smoothscroll

Collapse
 
corentinbettiol profile image
Corentin Bettiol

Didn't know about webkit-line-clamp, but I don't really know a usecase where hiding content would be useful.

Collapse
 
denicmarko profile image
Marko Denic • Edited

Hey Corentin! Thanks for reading and taking time to comment.

I find -webkit-line-clamp awesome!

You can find the example from medium.com in attachments.

Example: dev-to-uploads.s3.amazonaws.com/i/...

Example code: dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
corentinbettiol profile image
Corentin Bettiol

Oooooow no more trimming in php or Python for short content!

Really cool!

Collapse
 
francescoxx profile image
Francesco Ciulla

Nice article Marko! Thanks!

Collapse
 
denicmarko profile image
Marko Denic

Hey Francesco, glad you liked it.

Collapse
 
denicmarko profile image
Marko Denic

Hey Michael! Thanks for reading! I really like your Github Projects. Awesome!

Collapse
 
filippofilip95 profile image
FilippoFilip

I knew all of them except Smooth scrolling it's nice when things can be done just via CSS.