CSS Various Property Example

CSS Color Property

p {
    color: red;
	color:#ff0000;
}

CSS Backgrounds Property

div {
    background-color: lightblue;  /* default:transparent */
	background-image: url("paper.gif");
	background-repeat: repeat-x; /*  default:repeat,repeat-y,no-repeat */
	background-attachment: fixed;  /*loca,initial,inherit, default:scroll  */
	background-position: right top;  /* default:0% 0% ,left top,left center,left bottom,right top,....*/

}

CSS Background - Shorthand property

div {
    background: #ffffff url("img_tree.png") no-repeat fixed right top;
}

CSS Border Properties

div {
    border-width: 5px;  /* thin,thick,length,initial,inherit default: medium  */
	border-style: solid;   /* default:none,dotted ,dashed,double,groove,ridge,inset,outset,hidden */
	border-color: red; 

}

CSS Border - Shorthand property

div {
    border:1px solid red;
}

CSS Outline Properties

div {
    outline-width: 5px;     /* thin,thick,length,initial,inherit default: medium  */
	outline-style: solid;  /* default:none,dotted ,dashed,double,groove,ridge,inset,outset,hidden */
	outline-color: red;

}

CSS Outline - Shorthand property

div {
    outline:1px solid red;
}

CSS Margin Properties

div {
    margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;

}

CSS Margin - Shorthand property

div {
     margin: 5px 10px 5px 10px;  /* default:0 */
     /*margin: 5px 10px;*/	
}

CSS Padding Properties

div {
    padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;

}

CSS Padding - Shorthand property

div {
      padding: 5px 10px 5px 10px;   /* default:0 */
     /*padding: 5px 10px;*/	
}

CSS Text Properties

div {

    color: blue;
	text-align: center;     /* left,right,justify,default:left if direction is ltr, and right if direction is rtl */
	text-decoration: none; /* overline,line-through,underline default:none */
	text-transform: uppercase; /* lowercase,capitalize default:none*/
	text-indent: 50px;
	letter-spacing: 3px;
	line-height: 0.8;
	direction: ltr; /* rtl, default:ltr */   
	word-spacing: 10px;
    text-shadow: 3px 2px red;
    text-overflow: ellipsis; /* default:clip */ 
    overflow: hidden; /* scroll,auto,default:visible */ 
    overflow-x: scroll;	/* scroll,auto,default:visible */ 
	overflow-y: scroll;	/* scroll,auto,default:visible */ 
	
}

CSS Font Properties

p {
  
  font-style: normal; /* italic,oblique ,default:normal*/
  font-variant: normal; /* small-caps,default:normal */
  font-weight: normal; /* bold ,default:normal*/
  font-size: 40px;  /* 40px/16=2.5em */
  font-size: 10vw;  /* Responsive Font size unit */
  font-family: "Times New Roman", Times, serif;
	
}

CSS Font- Shorthand property

div {
   font:italic bold 12px/30px Georgia, serif;  /* font-size/line-height */ 
}

CSS Links Properties

 
   /* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
} 

CSS Lists Properties

 ul {
    list-style-type:image; /* none,circle, square,decimal, upper-roman,lower-alpha ,default:disc*/
	list-style-position: outside; /* inside ,default:outside*/
	list-style-image:url('sqpurple.gif');
}

CSS Lists- Shorthand property

ul {
   list-style: square inside url("sqpurple.gif");
}

CSS Tables Properties

table, th, td {
   table-layout: fixed;          /* 100%, default:auto */
   border: 1px solid black;
   border-collapse: collapse;   /* default:separate */
   vertical-align:text-bottom;     /* baseline,text-top,text-bottom,sub,super default:baseline */
   border-spacing: 15px;       /* default:2px  */
   caption-side: bottom;       /*  default:top */
   empty-cells: hide;          /*  default:show */
}

CSS display Properties

The display property is the most important CSS property for controlling layout.

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.

li {
    display: inline; /* block,none,inline-block  */
}

CSS position Properties

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

div{
    position: absolute; /* sticky, relative, static, default:static */
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

CSS float and clear Properties

The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared element and on which side.

div{
float: right;   /* left,none,inherit, default:none */
}

div {
    clear: left;   /* right,none,inherit,both default:none */
}

Opacity / Transparency Properties

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

z-index Properties

div {
    z-index:100; /* -,+  */
}

CSS Icons

There are two ways to use icon as follows:

• Font Awesome Icons
• Bootstrap Icons
• Google Icons

Font Awesome Icons

First add the style sheet file as follows:

Bootstrap Icons

First add the style sheet file as follows:

Google Icons

First add the style sheet file as follows: