5 Important CSS Properties Web Designer Must Know | CSS3 Most Used Properties

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 0

Filename: views/courses-details.php

Line Number: 76

Backtrace:

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 76
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 653
Function: view

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/courses-details.php

Line Number: 76

Backtrace:

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 76
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 653
Function: view

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

Training Mode Regular Fastrack Crash
Classroom | Online

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 0

Filename: views/courses-details.php

Line Number: 116

Backtrace:

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 116
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 653
Function: view

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/courses-details.php

Line Number: 116

Backtrace:

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 116
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 653
Function: view

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

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

 

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 0

Filename: views/courses-details.php

Line Number: 422

Backtrace:

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 422
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 653
Function: view

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/courses-details.php

Line Number: 422

Backtrace:

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 422
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 653
Function: view

File: /home/hrdv7o2ounf4/public_html/institute-websites/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

Request a Demo

Whatsapp