• We just launched and are currently in beta. Join us as we build and grow the community.

Display

profitnet2k

Tactical Genius
P
P Rep
0
0
0
Rep
0
P Vouches
0
0
0
Vouches
0
Posts
110
Likes
142
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 300 XP
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
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...

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

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

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

  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>

Book traversal links for Display

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

 
You must log in or register to reply here.

450,491

323,080

323,089

H HtChm
Top