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.

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

HtmlCssMonk.com has Mind-blowing Web development Articles. We also have Amazing tutorials and Quizzes.