16 CSS Properties Every UI Developer Must Know

4 min read

16 CSS Properties Every UI Developer Must Know

In the beginning, when I started as a UI Developer, I suffered more from designing pages properly, as I don’t have proper knowledge of all CSS properties. Even some of them were unknown to me. I am writing this blog, so a beginner can start well and improve himself soon.

1. Hover with Transition

The hover property allows us to change the CSS property of the hovered element, but it’s good to use hover property always with “transition”.
For Example 1.1, when we hover on an element, and then the color will be changed from white to black with transition 0.5s.

Example 1.1
a {
  transition: background 0.5s ease;
  background: #fff;
}
a:hover {
  background: #000;
}
Try This

2. nth-child

We can select any specific element using this property corresponding to its parent and can apply CSS to that element.
For Example 2.1, we have applied color on the 3rd child of “ul.

Example 2.1
<ul>
  <li>first-child</li>
  <li>second-child</li>
  <li>third-child</li> 
  <li>fourth-child</li>
  <li>fifth-child</li>
</ul>
ul li{ color: black; } ul li:nth-child(3){ color: blue; } Try This

3. Overriding Style

We can force to change the style of any element. It can be achieved using “!important” or make it more specific.

Example 3.1
p {
  color:#fff;
}
Overriding above element-
#parent-id p or .parent-class p {
  color:#000; (more specific)
}
p {
  color:#808080 !important; (more strong)
}
Try This

4. Border Use

The border has multiple uses. You can create Triangle, Circle using borders.

Example 4.1
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 20px 15px;
  border-color: transparent transparent #363762 transparent;
}
 
Example 4.2 .circle { width: 200px; height: 200px; background-color: #000; border-radius: 50%; border: 2px solid red; }
 
Example 4.3 .arrow { transform: rotate(45deg); position: relative; display: inline-block; padding: 10px; box-shadow: 3px -3px 0 0 tomato inset; } Try This

5. Position

The CSS position property also has an important role in the UI. Some designs can only achieve using position property.
Position Absolute is fully dependent on its any parent element whoever contains relative position, and the fixed property totally depends on the viewport. It means a fixed element never moves even if the page scrolled.

Example 5.1
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 20px;
  right: 20px;
}
Try This

6. Transform

Transform contains multiple properties like rotate, scale, translate. You can make any element double size using scale property. Just set its value two, as given for example.

Example 6.1
.rotate div {
  transform: rotate(20deg);
}
.skew div {
  transform: skew(20deg);
}
.scale div {
  transform: scale(2);
}
Try This

7. Z-index

Many people make mistakes using z-index because they don’t have actual knowledge of z-index. The first thing, z-index, is not working without positioning property. z-index defines the stack order of an element, which means which layer will be at the top, it can be decided by giving a z-index value of that element.

Example 7.1
div.a {
  z-index: 1;
  position: relative;
}
div.b {
  z-index: 2;
  position: relative;
}
Try This

div.b will be at the top order.

8. * + > selector

The * selector allows you to apply CSS for all. We can make it specific, like using parents, we can apply CSS for all its child elements.
For Example 8.1, the color property will apply to every child (even the child of a child) of ul.

Example 8.1
<ul>
  <li>first-child</li>
  <li>second-child</li>
  <li>third-child</li>
  <li>fourth-child</li>
  <li>fifth-child</li>
</ul>
ul * { color: #000; } Try This

The + selector allows you to apply CSS to the corresponding sibling of any element.

Example 8.2
ul li + li {
  color: #000;
}
Try This

The >  is used for the direct child selector. If any element child and that child again have a child, then we can use > selector to specify which element CSS will be applied.

Example 8.3
ul > li {
  color: #000;
}
Try This

9. Object-fit

Using object-fit property, we can keep our image in the proper way. The image will not be getting stretched. But in a responsive nature, some image parts can be cut off, so use it wisely.

Example 9.1
img {
  object-fit: cover/content;
  object-position: center/left/right;
}
Try This

10. :after, :before

There is no website where I have not used pseudo-elements. It always has a big role in designing. We can do different styling using pseudo-elements.

Example 10.1
.container{
  position: relative;
}
.container::before { 
  content:""; 
  display: block; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1; 
  background-color: rgba(255, 255, 255, .8); 
}
Try This

11. vw, vh

This unit has been used many times in my projects. Sometimes you will find out that % is not working properly for your project, in that situation, you can use vw, vh the unit, and for making font-size responsive, I always preferred to the use of a vw unit using calc. It works according to windows viewport width if you have a screen resolution 1600px wide then 1vw = 16px, if 1920px then 1vw = 19.2px.

Example 11.1
div.abc {
  position: absolute;
  left: 20vw;
}
h2 {
  font-size: 36px;
  font-size: calc(20px + 1vw);
}
Try This

12. Flex

I have remembered that critical situation whenever I saw a design with a center-aligned title, or say some icons which needed to maintain in the center with a rounded corner background border. It was very difficult to manage that before three years. But after coming into the full existence of flex property, it becomes very simple. Now you need to apply just three properties for that.

Example 12.1
div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
Try This

Again, you can easily maintain the order of your child element using order with the flex property.

Example 12.2
div.parent {
  display: flex;
}
div.parent div.child-a {
  order: 2;
}
div.parent div.child-b {
  order: 1;
}
Try This

13. Pointer-events

This is a tricky property. Be careful before using it. Using this property means the element cannot be selected by anyone. Even if it is a link, then it becomes not clickable.

Example 13.1
div.a {
  pointer-events: none;
}
Try This

14. Line-height

People make mistakes when giving value in line-height. Let’s take an example when you apply default font-size 20px in your p element with line-height 27px, and in responsive nature default font-size if changed like16px, then you again need to change in line-height. That’s why I always prefer to give line-height in such a manner.

Example 14.1
p {
  line-height: 1.3;
}
Try This

15. Overflow

Using overflow property as hidden is not a good idea. If you are applying it to the body, then it is not fair. It means you are hiding your mistakes. But there are some situations where you have to apply such property. But sometimes it creates lots of problems when you have multiple child and you are not sure where you have applied overflow hidden property. So, I suggest you avoid the use of it, and if you use it, then always remember where you have applied it otherwise it can create problems for you in responsive nature.

Example 15.1
div.parent {
  overflow: hidden;
}
Try This

16. Filter

Filter contains multiple properties. Using grayscale (1) we can make the image colorless. Using brightness (2) we can change color, but not exactly what we need. Using blur (1px) we can make text or image blurry. Using drop-shadow (2px 4px 6px black) we can make a shadow of any.png image.

Example 16.1
.grayscale img{
  filter: grayscale(1);
}
.brightness img{
  filter: brightness(2);
}
.blur img{
  filter: blur(1px);
}
.drop-shadow img{
  filter: drop-shadow(2px 4px 6px black);
}
Try This

I hope that the CSS properties described above will somehow help you. If you have any questions about this feel free to ask/write to me.

4 Replies to “16 CSS Properties Every UI Developer Must Know”

  1. Nicely written and well explained, got to learn so much from it.
    Blogs like these always help me to understand the design perspectives better and create new understanding.
    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *