Skip to main content

Display


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:

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

    1. class='myClass'

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

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

    1. .myClass {
    2. //Properties go here
    3. }

    if you chose a class, or...

    1. #myID {
    2. //Properties go here
    3. }

    (You can remove the line beginning with // if you wish).

    Here's an example...

    1. <html>
    2. <head>
    3. <style>
    4. .inline {
    5. background-color: #000;
    6. color: #fff;
    7. width: 300px;
    8. height: 100px;
    9. display: inline;
    10. //Will position next to other elements
    11. }
    12.  
    13. .inlineblock {
    14. background-color: #000;
    15. color: #fff;
    16. width: 300px;
    17. height: 100px;
    18. display: inline-block;
    19. // Will position aligned to other elements
    20. }
    21.  
    22. .block {
    23. background-color: #000;
    24. color: #fff;
    25. width: 300px;
    26. height: 100px;
    27. display: block;
    28. // Will take up the full line
    29. }
    30.  
    31. .none {
    32. background-color: #000;
    33. color: #fff;
    34. width: 300px;
    35. height: 100px;
    36. display: none;
    37. // Will not display
    38. }
    39. </style>
    40. </head>
    41. <body>
    42. <div class='inline'>Inline</div>
    43. <div class='inlineblock'>Inline Block</div>
    44. <div class='block'>Block</div>
    45. <div class='none'>None</div>
    46. </body>
    47. </html>
    element
    table-column-group - Let the element behave like a
    element
    table-column - Let the element behave like a
  • Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

    Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

    FOR YOUR OWN SAFETY, PLEASE:

    1. Re-scan downloaded files using your personal virus checker before using it.
    2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

    Add new comment

    CAPTCHA
    This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.