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:
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-column-group - 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-column - 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...
... to the attributes of that element if you chose a class, or...
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
}
#myID {
//Properties go here
}
<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>
