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

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

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

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