Display

Submitted by Yorkiebar on Friday, January 24, 2014 - 08:42.

Introduction: This is the seventh part in my CSS Styling tutorials, in which I will be covering display. What is Display? Display is a property which sets the type of behaviour that will be given in relation to the position of the given elements. Structure: display: {type}; Example:

display: inline-block;

Defaults: As a couple of default examples; an image given through an img tag in HTMl is a block element, a paragraph (p) is a block element and a span is an inline-block element. Values: The bigger the border radius, the more curved the border will be. inline - Displays an element as an inline element (like ) block - Displays an element as a block element (like

) inline-block - Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box inline-table - The element is displayed as an inline-level table list-item - Let the element behave like a

element run-in - Displays an element as either block or inline, depending on context table - Let the element behave like a element table-caption - Let the element behave like a element table-header-group - Let the element behave like a element table-footer-group - Let the element behave like a element table-row-group - Let the element behave like a element table-cell - Let the element behave like a element table-row - Let the element behave like a element none - The element will not be displayed at all (has no effect on layout) inherit - The value of the display property will be inherited from the parent element Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

class='myClass'

... to the attributes of that element if you chose a class, or...

id='myID'

if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

.myClass {
	//Properties go here
}

if you chose a class, or...

#myID {
	//Properties go here
}

(You can remove the line beginning with // if you wish). Here's an example...

<html>
	<head>
		<style>
			.inline {
				background-color: #000;
				color: #fff;
				width: 300px;
				height: 100px;
				display: inline;
				//Will position next to other elements
			}
 
			.inlineblock {
				background-color: #000;
				color: #fff;
				width: 300px;
				height: 100px;
				display: inline-block;
				// Will position aligned to other elements
			}
 
			.block {
				background-color: #000;
				color: #fff;
				width: 300px;
				height: 100px;
				display: block;
				// Will take up the full line
			}
 
			.none {
				background-color: #000;
				color: #fff;
				width: 300px;
				height: 100px;
				display: none;
				// Will not display
			}
		</style>
	</head>
	<body>
		<div class='inline'>Inline</div>
		<div class='inlineblock'>Inline Block</div>
		<div class='block'>Block</div>
		<div class='none'>None</div>
	</body>
</html>

element table-column-group - Let the element behave like a
element table-column - Let the element behave like a

Add new comment

41 views