DEV Community

Md. Mizanur Rahaman
Md. Mizanur Rahaman

Posted on

Important CSS Properties Must Know

Important CSS Properties Must Know

Flexbox

The main purpose of flexbox is to manage space, distribute space properly to show in a dynamic way. The flexbox is also known as flex layout. This is also used to align content in a container.

The main part of using flexbox is the best way to proper use of space. Where it will help to respond with devices sizes.

Before using flexbox we must have a clear concept about flexbox and its all properties.

There are two things available in flexbox which are-

  • Flex container
  • Flex items

To active flex functionality for inside items, we must use display: flex CSS property.

css flex

CSS Variable

CSS variable looks like other programming language variables. We can use CSS variables to make our style more dynamic and effective. We can set a color or font size or any other styles using CSS variables that will help us to change anytime with a few clicks. It actually used to set global style. Where one change affects all styles.

CSS Variable

Pseudo Elements

Pseudo-elements are used to provide extra functionality or affect to an element. In short, we can say that A CSS pseudo-element is used to style specified parts of an element.

Where we can use these Pseudo Elements:

  • To style the first letter of the word, first-line, or a specific word of a paragraph or title.
  • To set extra words of text before or after a word or a sentence.
.info-bar::before {
  content: url(smiley.gif);
}
Enter fullscreen mode Exit fullscreen mode

Image Sprites

Image Sprites is a collection of images where lots of images are put into a single image.

Why we should use Image Sprites

  • To reduce load time in a website.
  • To get all images in a single image
#something {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Enter fullscreen mode Exit fullscreen mode

CSS Box Model

While there is a question about design and layout the Box Model comes up. This is like a wrapper of HTML elements. CSS Box Model consists of Margin, Border, Padding, and Content.

A short explanation of different parts:

  • Content: Where text, images, videos appear.
  • Padding: It creates some spaces around the content.
  • Border: Border takes parts around the padding.
  • Margin: It is also like padding. Which takes some spaces outside the border.
< div >
< p >This is something< /p >
< /div >

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)