Course Description :

1. CSS Variable :

CSS Variable properties is very useful when we have to use something global , which is 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 , We have define –main-bg-color once in :root and used in two div’s  so we can save extra code and can write professional by using variable.

2. Pseudo Elements

CSS Pseudo Elements is very useful when we have to insert any icon or anything before or after html tag.

Example :

h1::before {

  content: url(smiley.gif);

}

h1::after {

  content: url(smiley.gif);

}

This property saves a lot of time when we have to insert any icon or any content in number of html tags. In the above example we just inserted gif image before and after h1 tag.

3.  Image Sprites

CSS Image Sprites property is very useful to reduce https requests on server, when we use number of small images in website or web application then http requests increases on server.

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

Image sprites is nothing , it is 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 single image with different background positions, it help us to reduce http request , because here server have to load only one image.

4. Box Shadow

CSS Box Shadow is mostly used properties to achieve material or real 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 or we also said that advanced version of float css property. By using flex we can align our items vertically or horizontally and also in group easily.

Note :  Write all flex properties in 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