DEV Community

Cover image for CSS learnings!
Ellaine Tolentino
Ellaine Tolentino

Posted on • Updated on

CSS learnings!

I recently learned CSS things this week! It revolves around CSS due to certification exercises I have been taking. These are just a few but I hope someone can learn from this like how I did! So, here are some CSS attributes I've learned recently that you can try on you projects!


If you're familiar with overflow, this does the same principle but specifically for text elements.

Text-overflow can be set into these values:

  • ellipsis

    • In order for ellipsis to take effect, you need to set the text element's width, white-space: hidden and overflow: hidden. Sample ellipsis
  • clip

    • This is basically the same way as how the overflow : hidden works. Only thing is, text-overflow would only occur if overflow has been set.
      Comparison of ellipsis & clip
      Above: Ellipsis - Bottom: Clip


I learned how to crop an image! More common solution to this is to use the photo as a background-image and apply adjustments from there but object-fit was said to be something more modern so I gave it a try.

Object-fit values can be as follows:

  • fill
  • cover
  • contain
  • none
  • scale-down

Check out this CodePen for examples!

*object-position - Another attribute in line with object-fit. Since using object-fit will crop the image, this will help you adjust to change the point of focus of the element.
Values can be positions (top, bottom, left & right) or length/percentages.

Sample with using position value;

#img1 {
  width: 200px;
  height: 300px;
  object-fit: cover; // Object position will be more evident with object fit set to cover
  object-position: left;
Enter fullscreen mode Exit fullscreen mode

object-position left

Sample using percentage value;

#img2 {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 100%;
Enter fullscreen mode Exit fullscreen mode

object-position at 100%

Same photo different results! Neat right?


For this one to work, the elements we need aligned need to be set as display: inline or display: inline-block. Then we align the elements altogether with vertical-align.

Common values can be as follows:

  • middle
  • baseline/bottom
  • top
  • length - length from it's parent's baseline.
    baseline or bottom
    Baseline or Bottom
    Length (10px)

There are also, text-top, text-bottom, super & sub but it's quite similar to the ones above it just follows it's parent's text element's alignment.

I hope this blog got you curious to use these CSS attributes on your next project!

Until the next!!


Top comments (0)