Css display

CSS DISPLAY PROPERTY
NAME: MATTHEW LAWES
STUDENT NO. 13027055
!
AIMS: REVIEW POPULAR CSS DISPLAY VALues AND HOW AND WHEN THESE VALUES
SHOULD BE USED.

CSS DISPLAY (A QUICK DEFINITION)
HERE IS THE W3 SCHOOLS DEFINITION FOR THE DISPLAY PROPERTY…
!
The display property specifies the type of box used for an
HTML element.
http://www.w3schools.com/cssref/pr_class_display.asp

WHAT IS THE DISPLAY PROPERTY OF THIS HTML PAGE?
OR WHAT IS THE DIFFERENCE BETWEEN THE ORANGE WORD AND BLUE BOX?
THE BLUE BOX IS SITTING ON ITS OWN LINE!
THE ORANGE WORD IS PART Of the line of text!

WHAT IS THE DISPLAY PROPERTY OF THIS HTML PAGE?
OR WHAT IS THE DIFFERENCE BETWEEN THE ORANGE WORD AND BLUE BOX?
THE BLUE BOX IS Block Element
THE ORANGE WORD IS an Inline element

LETS FIRST DISECT THE INLINE ELEMENT
HERE IS THE HTML SOURCE >>
!
NOTICE THE SPAN WORD IS WRAPPED IN A <SPAN> TAG WITHIN THE HTML

LETS FIRST DISECT THE INLINE ELEMENT
NOW LETS LOOK AT THE CSS FOR THIS TAG >>
!
AS IT STANDS we have DISPLAY: INLine;
This CSS Can be removed as the browser will apply this display automatically to a <span> tag.

SO WHAT IS THE INLINE VALUE?
Look AT THE WEBPAGE BELOW…
!
THE TEXT SPAN SITS ON THE SAME LINE AS ITS SURROUNDING TEXT!
THEREFORE THE TEXT iS INLINE!!

Summarising THE INLINE VALUE?
!
IT SIMPLY MEANS THE TEXT OR THE ELEMENT WILL BE INLINE WITH REGARDS TO THE CONTENT
SURROUNDING IT!

THE INLINE VALUE?
SOME EXAMPLES OF THE LIMITATIONS…
!
NOW WE GIVE THE <SPAN> ELEMENT A WIDTH AND HEIGHT VALUE WITHIN THE CSS.
HOWEVER THIS HAS NO EFFECT on THE APPEARANCE OF THE SPAN WITHIN THE WEBPAGE.

THE INLINE VALUE?
SOME EXAMPLES OF THE LIMITATIONS…
50px 50px
NOW WE GIVE THE <SPAN> ELEMENT A VERTICAL (100px) AND HORIZONTAL (50px) MARGIN.
AS you can now see the horizontal margin has been acknowledged and the vertical
margin has been ignored!

SO WHAT HAPPENS IF I CHANGE THE SPANS DISPLAY TO BLOCK
WITHIN THE CSS? >>
100px
200px
120px
100px
!
SO NOW THE CUSTOM WIDTH AND HEIGHT VALUES WE PERVIOUSLY INPUTTED ARE BEING OBSERVED!
ALSO YOU CAN SEE THE 100px VERTICAL MARGIN is BEING OBSERVED!

SO NOW WE HAVE COVERED INLINE…
LETS SUMMARISE BLOCK LEVEL ELEMENTS >>
!
AS A <DIV> THE BROWSER WILL AUTOMATICALLY MAKE THE DIV BLOCK BY DEFAULT.
BLOCK ELEMENTS BY DEFAULT means its going to take up the entire page width (100%).

SO WHEN DO WE USE INLINE-BLOCK?
LETS IMAGINE A SENARIO >>
TO REMAIN INLINE AND
GIVE IT A CUSTOM WIDTH,
HEIGHT AND PADDING.
LETS IMAGINE WE WANTED THIS SPAN IN THE TOP LINE OF TEXT, TO REMAIN INLINE (TO SIT WITH THE
OTHER TEXT) BUT WE WANT it to have a custom width, height and padding!

SO WHEN DO WE USE INLINE-BLOCK?
LETS IMAGINE A SENARIO >>
NOW WE HAVE CHANGED THE CSS’s DISPLAY TO INLINE BLOCK and added a width, height,
padding etc. Now when we look at the browser we get the best of both worlds!

SO YOU ARE NOW FAMILIAR WITH THE 3 MOST POPULAR VALUES OF THE
DISPLay property! INLINE, BLOCK AND INLINE-BLOCK
WHILE THERE ARE ADDITIONAL VALUES TO THE DISPLAY CSS, I FEEL THAT THESE 3 values are
the building blocks for other values!
!
IF YOU LEARN THESE FUNDAMENTAL VALUES TO DISPLAY, you'll be able to achieve 99.9% OF
Layout that you would ever want to achieve!

THE FINAL VALUE I WANT TO ADDRESS IS DISPLAY NONE
LOOK AT THE CSS AND HOW IT AFFECTS THE WEBPAGE >>
So TO HIDE THE BLUE BOX, WE CAN ADD DISPLAY: NONE TO THE div within the CSS. THIS
COMPLETELY REMOVES THE BOX FROM THE PAGES APPEARANCE.

FINAL NOTICE (1) (DEFAULT VALUES)
EVERY ELEMENT HAS A DEFAULT VALUE!
!
WE NOW KNOW THAT <SPAN> by default is inline
ALSO THE <STRONG> TAG AND <EM> TAG ARE INLINE BY DEFAULT
!
WE ALSO KNOW THAT <DIV> By default is block
AND <H1> to <h6> and the <p> tag are also block
http://www.youtube.com/watch?v=xcTEDlgkD7o

FINAL NOTICE (2) (OTHER DISPLAY PROPERTy Values)
Value Description
FLEX DISplays an element as an block-level flex container.
List Item Lets the element behave like an <LI> element.
Table Lets the element behave Like a <table> element.
Initial Sets the property to its default value
InHerit Inherits this property from its parent element.
Run-in Displays the element as either block/inline, depending on context.
To FIND OUR MORE PLEASE VISIT w3 SCHOOLS (LINK BELOW)

FINAL NOTICE (3) (Browser compatibility)
BROWSER SUPPORT
THE NUMBERS IN THE TABLE SPECIFY THE FIRST BROWSER VERSION THAT FULLY SUPPORTS
THE PROPERTY
NOTICE THE DISPLAY PROPERTY IS COMPATIBLE IN ALL LATEST Browsers apart from Internet
explorEr 5.5

Css display

More Related Content

Similar to Css display (20)

Css display