442,401

profitnet2k · 2025-02-26T18:41:00+0000

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-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...

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>

Book traversal links for Display

‹ CSS Tutorial - Part 1 - Types
Up
Float and Clear ›

Display

More options

profitnet2k

442,401

317,942

317,951