HtmlCssMonk

15 Important CSS Properties Every Developer Should Know

By – HtmlCssMonk

CSS stands for Cascading Style Sheet. It is responsible for making web pages more presentable.  

CSS is a MUST for students and professionals who are working in Web Development Domain.

It handles the look and feel of a web page. It helps a developer to take control over the color of the text , background as image , how columns are laid etc.

Today we are going to see 15 Important CSS Properties Every Developer Should Know about.

We are not going to include FONT and COLOR properties, they are too common and you already know their importance.

Let’s check out those 15 CSS properties

1. Display

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.

4 most commonly used display values are –

div { 
       display: block; 
       display: inline-block; 
       display: inline; 
       display: none;
 }
  • block : They include <div><ul> and text blocks like <p>. Block level elements by default take up as much space as they can, and they cannot be placed on the same horizontal line with any other display modes, include other block elements. (Exception: unless they are floated).
  • inline : The inline mode wraps many HTML elements tightly around them and is the defaults for all elements that are not specified with any other display values. Elements can be placed side by side on the same line as inline elements. You will not be able to change an inline element’s width and height.
  • inline-block : This is one display value that combines the properties of both block elements and inline elements. You get the ability to set a height and width, and the element can appear on the same horizontal line as other elements.
  • none : Display none hides the element from the website and it will not be shown visually.

2. Margin and Padding

Margins and Paddings dictate the spaces between elements on your website. They are very similar and have the same units. The only difference between margins and paddings is the area the exert control over. Margins affect the area outside of borders whereas paddings affect areas inside the border.

Margin and Padding are generally used in this manner-

div{
   margin-top: 20px;
   margin-bottom: 20px;
   padding-right: 10px;
   padding-left: 10px;
}

Learn more About Margins and Paddings in CSS.


3. Border

Border properties simply allows you to specify how the border of your content should look like.

There are three properties of a border you can change −

  • The border-color specifies the color of a border.
  • The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
  • The border-width specifies the width of a border.
div{
   border: 1px solid black;
   /* border width, style and color */
}

If you are only interested in applying borders to 1 or 2 sides, I generally prefer to stick by border-top, border-bottom, border-left or border-right.

Learn more about Border in CSS.


4. Background

CSS background property allows us to specify background effects on an element.

There are 5 background properties that affects an HTML element –

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
   h2 {  
         background-color: #b0d4de;  
         background-image: url("blur.jpg");
         background-repeat: repeat-x;
         background-attachment: fixed;
         background-position: center;
          } 

Learn more about Background property of CSS


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.

Position property can have 7 values –

  • static
  • absolute
  • fixed
  • relative
  • sticky
  • initial
  • inherit
.relative {
  position: relative;
}
.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
}
.fixed {
  position: fixed;
  top: 20px;
  right: 20px;
}

Learn more about Position in CSS.


6. Transform

Transform contains multiple properties like rotate, scale, translate. You can make any element double size using scale property.

.rotate div {
  transform: rotate(20deg);
}
.skew div {
  transform: skew(20deg);
}
.scale div {
  transform: scale(2);
}

7. Hover

One of the most Exciting properties of CSS is Hover property.

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”.

a {
  transition: background 0.5s ease;
  background: #fff;
}
a:hover {
  background: #000;
}

8. nth-child property

We can select any specific element using this property corresponding to its parent and can apply CSS to that element. This property comes really handy when it’s needed.

<ul>
  <li>first-child</li>
  <li>second-child</li>
  <li>third-child</li> /*3rd child*/
  <li>fourth-child</li>
  <li>fifth-child</li>
</ul>

ul li{
   color: black;
  }
ul li:nth-child(3){
   color: blue;  //third-child will become blue.
  }

9. Z-index

 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. It doesn’t work without Position property.

div.a {
  z-index: 1;
  position: relative;
}
div.b {
  z-index: 2;
  position: relative;
}

div.b will be at the top order because it has higher z-index value.


10. Object-fit

Using object-fit property, we can keep our image in the proper way. The image will not be getting stretched.

In a responsive nature, some image parts can be cut off, so use it wisely.

img {
  object-fit: cover/content;
  object-position: center/left/right;
}

11. * + > selectors

CSS selectors are used to select the content you want to style.

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.

<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;
}

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

<ul>
<li>first-child</li>
<li>second-child</li>
<li>third-child</li>
<li>fourth-child</li>
<li>fifth-child</li>
</ul>

ul li + li {
  color: #000;
}

The > selector is used for the direct child selector.

<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: #000;
 }

Learn more about Selectors in CSS


12. :after, :before

A CSS pseudo-element is used to style specified parts of an element. It always has a big role in designing. We can do different styling using pseudo-elements.

.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); 
}

13. Overflow

The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.

div.container {
  overflow: hidden;
}

14. vw, vh

Sometimes you will find out that % is not working properly for your project, in that situation, you can use vw, vh the unit.

A value of 1vh/vw is equal to 1% of the viewport height/width.

h2 {
  position: absolute;
  left: 20vw;
}

15. Filter

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

.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);
}

Alrighty !! So these are the 15 CSS properties you must always remember.

Tell us in the comments if you know some more interesting properties of CSS.

Wanna learn more Html , Css or JavaScript .

Check out our tutorials and Amazing quizzes.

Happy Learning 🙂

Namaste !

4 thoughts on “15 important CSS properties every Developer should Know”

  1. Wonderful resource;

    Pls. note where hyperlinks reads “Learn more about Borders in CSS” is linked incorrectly to the page “Background in CSS….”

Leave a Comment

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