Display

Submitted by: 
Language: 

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-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
    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 - Let the element behave like a element
    table-row - Let the element behave like a

  • Add new comment

    Filtered HTML

    • Web page addresses and e-mail addresses turn into links automatically.
    • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3>
    • You may insert videos with [video:URL]
    • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
    • Lines and paragraphs break automatically.

    Plain text

    • No HTML tags allowed.
    • Lines and paragraphs break automatically.