- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS display
The CSS display property is used to define, how an element should rendered on the web page. For example:
<!DOCTYPE html> <html> <head> <style> ul.a li{display: block;} ul.b li{display: inline;} </style> </head> <body> <h2>display: block</h2> <ul class="a"> <li>CSS</li> <li>HTML</li> <li>JavaScript</li> </ul> <h2>display: inline</h2> <ul class="b"> <li>CSS</li> <li>HTML</li> <li>JavaScript</li> </ul> </body> </html>
display: block
- CSS
- HTML
- JavaScript
display: inline
- CSS
- HTML
- JavaScript
CSS display Syntax
The syntax of display property in CSS, is:
display: x;
The value of x should be any of the following:
- inline - Creates an inline-level container where each items displayed in a line like SPAN. The height and width properties does not allowed or we can say that these properties have no effect on inline-level container
- block - Creates a block-level conatiner. The block-level container/element behaves like P element. That is, a block-level element starts with a new line and acquire the whole width of that line.
- contents - Makes an element disappear. Therefore the child elements of disappeared element will become the child of disappeared element's parent element
- flex - Makes an element as block-level flex container
- grid - Makes an element as bock-level grid container
- inline-block - Makes an element as an inline-level block container
- inline-flex - Makes an element as an inline-level flex container
- inline-grid - Makes an element as an inline-level grid container
- table - Makes an element behaves like TABLE
- inline-table - Makes an element behaves like TABLE display inline
- table-row - Makes an element behaves like TR
- table-cell - Makes an element behaves like TD
- table-column - Makes an element behaves like COL
- table-caption - Makes an element behaves like CAPTION
- table-column-group - Makes an element behaves like colgroup
- table-row-group - Makes an element behaves like tbody
- table-header-group - Makes an element behaves like thead
- table-footer-group - Makes an element behaves like tfoot
- list-item - Makes an element behaves like LI
- run-in - Makes an element as a block-level or an inline-level container, depending on the context
- none - Hides an element
- initial - Used to use the default value
- inherit - Used to use the value inherited by the parent element
CSS display: inline Example
<!DOCTYPE html> <html> <head> <style> ul.codescracker li{display: inline;} a{text-decoration: none; background-color: green; color: white; padding: 12px;} </style> </head> <body> <h2>Without display: inline</h2> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> <h2>With display: inline</h2> <ul class="codescracker"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </body> </html>
CSS display: block Example
<!DOCTYPE html> <html> <head> <style> .codescracker{display: block; color: red;} </style> </head> <body> <h2>Without display: block</h2> <p>Lorem ipsum dolor sit amet CODESCRACKER consectetur adipisicing elit.</p> <h2>With display: block</h2> <p>Lorem ipsum dolor sit amet <span class="codescracker">CODESCRACKER</span> consectetur adipisicing elit.</p> </body> </html>
Without display: block
Lorem ipsum dolor sit amet CODESCRACKER consectetur adipisicing elit.
With display: block
Lorem ipsum dolor sit amet CODESCRACKER consectetur adipisicing elit.
Since display: block makes an element behaves like a P element. Therefore, the SPAN element whose class name is codescracker starts from a new line and acquired the whole width.
Note - The description of inline Vs block is described in its separate tutorial.
CSS display: contents Example
<!DOCTYPE html> <html> <head> <style> .inner{display: contents;} .outer, .out{display: flex;} </style> </head> <body> <h2>Without display: contents</h2> <div class="outer"> <div> <div>A</div> <div>B</div> <div>C</div> </div> </div> <h2>display: contents</h2> <div class="outer"> <div class="inner"> <div>A</div> <div>B</div> <div>C</div> </div> </div> <h2>Again Without display: contents</h2> <div class="out"> <div class="in"> <div>A</div> <div>B</div> <div>C</div> </div> </div> </body> </html>
Without display: contents
display: contents
Again Without display: contents
If you notice in above example, then you will find that all the three DIVs inside the DIV whose class name is inner will become all children to the parent DIV of DIV whose class name is inner.
CSS display: flex Example
<!DOCTYPE html> <html> <head> <style> .codescracker{display: flex;} </style> </head> <body> <h2>Without display: flex</h2> <div> <div>A</div> <div>B</div> <div>C</div> </div> <h2>With display: flex</h2> <div class="codescracker"> <div>A</div> <div>B</div> <div>C</div> </div> </body> </html>
Without display: flex
With display: flex
CSS display: grid Example
<!DOCTYPE html> <html> <head> <style> .container {display: grid; gap: 2px; color: whitesmoke; grid-template-areas: 'head head head head' 'nav main main oth' 'foot foot foot foot';} .container > div {background-color: green; padding: 10px; text-align: center;} #header {grid-area: head;} #menu {grid-area: nav;} #content {grid-area: main; min-height: 70vh;} #other {grid-area: oth;} #footer {grid-area: foot;} </style> </head> <body> <div class="container"> <div id="header">HEADER</div> <div id="menu">MENU</div> <div id="content">CONTENT</div> <div id="other">OTHER</div> <div id="footer">FOOTER</div> </div> </body> </html>
Note - The grid-area property is used to define the location and size of a grid item in grid layout.
Note - The grid-template-areas property is used to define the area of a/multiple grid item(s) in grid layout.
Note - The description of flex Vs grid is described in its separate tutorial.
CSS display: inline-block Example
<!DOCTYPE html> <html> <head> <style> ul li{background-color: purple; width: 120px; padding: 12px; color: white; text-align: center;} ul.two li{display: inline-block;} </style> </head> <body> <h2>Without display: inline-block</h2> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> <h2>With display: inline-block</h2> <ul class="two"> <li>A</li> <li>B</li> <li>C</li> </ul> </body> </html>
Without display: inline-block
- A
- B
- C
With display: inline-block
- A
- B
- C
Note - The description of inline Vs inline-block is described in its separate tutorial.
CSS display: inline-grid Example
<!DOCTYPE html> <html> <head> <style> .two{gap: 2px; color: whitesmoke; grid-template-areas: 'h h h' 'n m m' 'f f f';} .two > div {background-color: green; padding: 4px; text-align: center;} #header {grid-area: h;} #menu {grid-area: n;} #content {grid-area: m; min-height: 100px;} #footer {grid-area: f;} .two {display: inline-grid;} </style> </head> <body> <h2>display: inline-grid</h2> <div class="two"> <div id="header">HEADER</div> <div id="menu">MENU</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </div> <div class="two"> <div id="header">HEADER</div> <div id="menu">MENU</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </div> </body> </html>
display: inline-grid
Note - The description of grid Vs inline-grid is described in its separate tutorial.
CSS display: table, table-row, table-cell Example
<!DOCTYPE html> <html> <head> <style> .one{display: table;} .row{display: table-row;} .data{display: table-cell; padding: 12px; border: 1px solid;} </style> </head> <body> <h2>display: table, display: table-row, display: table-cell Example</h2> <div class="one"> <div class="row"> <div class="data">Matteo</div> <div class="data">Munich, Germany</div> </div> <div class="row"> <div class="data">Clara</div> <div class="data">Amsterdam, Netherlands</div> </div> <div class="row"> <div class="data">Jakob</div> <div class="data">Mar del Plata, Argentina</div> </div> </div> </body> </html>
display: table, display: table-row, display: table-cell Example
As shown in above example, the other table related values that can be used to define display property, works in similar way, based on its description given before the start of example series.
CSS display: inline-table Example
<!DOCTYPE html> <html> <head> <style> .row{display: table-row;} .data{display: table-cell; padding: 12px; border: 1px solid;} .one{display: table;} .two{display: inline-table;} </style> </head> <body> <h2>display: table</h2> <div class="one"> <div class="row"> <div class="data">Leo</div> <div class="data">Berlin</div> </div> <div class="row"> <div class="data">Anton</div> <div class="data">Munich</div> </div> <div class="row"> <div class="data">Oskar</div> <div class="data">Cologne</div> </div> </div> <div class="one"> <div class="row"> <div class="data">Levi</div> <div class="data">Dresden</div> </div> <div class="row"> <div class="data">Lukas</div> <div class="data">Hamburg</div> </div> <div class="row"> <div class="data">Charlotte</div> <div class="data">Frankfurt</div> </div> </div> <h2>display: inline-table</h2> <div class="two"> <div class="row"> <div class="data">Leo</div> <div class="data">Berlin</div> </div> <div class="row"> <div class="data">Anton</div> <div class="data">Munich</div> </div> <div class="row"> <div class="data">Oskar</div> <div class="data">Cologne</div> </div> </div> <div class="two"> <div class="row"> <div class="data">Levi</div> <div class="data">Dresden</div> </div> <div class="row"> <div class="data">Lukas</div> <div class="data">Hamburg</div> </div> <div class="row"> <div class="data">Charlotte</div> <div class="data">Frankfurt</div> </div> </div> </body> </html>
display: table
display: inline-table
Note - The display: inline-table makes the table container inline.
CSS display: none Example
<!DOCTYPE html> <html> <head> <style> .myd{display: none;} </style> </head> <body> <div>First DIV</div> <div class="myd">Second DIV</div> <div>Third DIV</div> </body> </html>
That is, the display: none defined to any element hides/disappears the element from the web.
« Previous Tutorial Next Tutorial »