Knowledge Walls
Ammu
Hyderabad, Andhra Pradesh, India
Display in Css of CSS latest
12 Views
1.Overflow: 
overflow: visible|hidden|scroll|auto|initial|inherit;
overflow-x, overflow-y
 
 
  • visible - Default. The overflow is not clipped. The content renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
  • auto - Similar to scroll, but it adds scrollbars only when necessary
div.ex1 {
  overflow: scroll;
}

div.ex2 {
  overflow: hidden;
}

div.ex3 {
  overflow: auto;
}

div.ex4 {
  overflow: visible;
}
Example
	<!DOCTYPE html>

	<html lang="en-US">

	</head>

	<meta charset="UTF-8">

	</head>

	<body>

	<p style="background-color:red;width:100px;height:100px;overflow:scroll">orjqjlrg

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem,</P>

	</body>

	</html>

	 
Z-index 
number Sets the stack order of the element. Negative numbers are allowed
Example
	
		<!DOCTYPE html>
	
		<html lang="en-US">
	
		</head>
	
		<meta charset="UTF-8">
	
		<style>
	
		div{
	
		position:absolute;
	
		top:0px;
	
		left:0px;
	
		}
	
		.c1{
	
		background-color:red;
	
		width:500px;
	
		height:500px;
	
		}
	
		 
	
		.c2{
	
		background-color:yellow;
	
		width:600px;
	
		height:600px;
	
		z-index:-1;
	
		}
	
		</style>
	
		 
	
		</head>
	
		<body>
	
		<div class="c1" width="200px" height="200px" >heloqwrtt</div>
	
		<div class="c2" width="150px" height="200px" >hello</div>
	
		</body>
	
		</html>
	
		 


Cursor 

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: -webkit-grab; cursor: grab;}

.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out

example
	<!DOCTYPE html>

	<html lang="en-US">

	</head>

	<meta charset="UTF-8">

	<title>cursor</title>

	<style>

	p{

	cursor:help;

	}

	</style>

	</head>

	<body>

	<p>hello</p>

	</body>

	</html>
Visibility: 

h2.a { visibility: visible;}

h2.b {visibility: hidden;}

Example
	<!DOCTYPE html>

	<html lang="en-US">

	</head>

	<meta charset="UTF-8">

	<title>visibility</title>

	<style>

	p{

	visibility:hidden;

	}

	</style>

	</head>

	<body>

	<p>hello</p>

	<h2>hello</h2>

	</body>

	</html>
Display
	Display:
	p.ex1 {display: none;}
	p.ex2 {display: inline;}

	p.ex3 {display: block;}
	p.ex4 {display: inline-block;}


	<!DOCTYPE html>

	<html lang="en-US">

	</head>

	<meta charset="UTF-8">

	<title>Display</title>

	<style>

	p{

	visibility:hidden;

	}

	</style>

	</head>

	<body>

	<div>i am <span style="color:red;display:block">vidhyaa</span></div>

	<div style="display:inline;">i am vidhyaa</div>

	<div>i am <span style="color:red;display:none">vidhyaa</span></div>

	</body>

	</html>
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
Best Lessons of "CSS latest"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details