5 Important CSS Properties Web Designer Must Know

In CSS, there are some essential topics that every website designer should know about. Its examples, CSS variable, image sprite, pseudo-element, CSS flex, box-shadow. These 5 CSS properties are primarily used in the website, so every website designer should know about these properties.

1. CSS Variable :

CSS Variable properties are beneficial when we have to use something global available for my complete project, such as website colors.

Example :

:root {
  --main-bg-color: coral;
}
 
#div1 {
  background-color: var(--main-bg-color);
}
 
#div2 {
  background-color: var(--main-bg-color);
}

Here in this example, we can see that we have defined –main-bg-color once in :root and used in two divs to save extra code and write professionally by using a variable.

 

2. Pseudo Elements

CSS Pseudo Elements is very useful when we insert any icon or anything before or after the HTML tag.

Example :

h1::before {
  content: url(smiley.gif);
}
 
h1::after {
  content: url(smiley.gif);
}

This property saves many times when we have to insert any icon or any content in several HTML tags. In the above example, we just inserted a gif image before and after the h1 tag.

 

3.  Image Sprites

CSS ImageSprites property is beneficial for reducing HTTPS requests on the server; when we use several small images in a website or web application, HTTP requests increase on the server.

It impacts website speed, so Image Sprites is very useful for website or web application performance.

Image sprites are nothing; it is a combination of background-image and background-position CSS property.

 

Example :

 

#home {
  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;
}
  

Here in this example, we use a single image with different background positions. It helps us to reduce HTTP requests because here, the server has to load only one image.

 

4. Box Shadow

CSS Box Shadow is mainly used to achieve material or actual look box design.

Example :

.box {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
} 

5. CSS Flex

CSS Flex is very useful when we talk about alignments in design. We also said that advanced version of a float CSS property. By using flex, we can align our items vertically or horizontally and also in the group easily.

Note: Write all flex properties in the parent element

Example :

Horizontal Alignment Property
1. Center Align
.flex-container {
  display: flex;
  justify-content: center;
}
2. Left Align
.flex-container {
  display: flex;
  justify-content: flex-start;
}
3. Right Align
.flex-container {
  display: flex;
  justify-content: flex-end;
}
4. Space Around (Equal Space between all boxes)
.flex-container {
  display: flex;
  justify-content: space-around;
}
5. Space Between (Equal Space between all boxes except first and last)
.flex-container {
  display: flex;
  justify-content: space-between;
} 

Use all these alignment properties same as in vertical alignment replace justify-content to align-items.

 

Categories: web designing css