Css display

CSS DISPLAY PROPERTYNAME: 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)

http://www.w3schools.com/cssref/pr_class_display.asp

HERE IS THE W3 SCHOOLS DEFINITION FOR THE DISPLAY PROPERTY… !

The display property specifies the type of box used for an HTML element.

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.

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!

THE INLINE VALUE? SOME EXAMPLES OF THE LIMITATIONS…

50px50px

SO WHAT HAPPENS IF I CHANGE THE SPANS DISPLAY TO BLOCK WITHIN THE CSS? >>

!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!

200px

120px

100px

100px

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

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!

TO REMAIN INLINE AND GIVE IT A CUSTOM WIDTH, HEIGHT AND PADDING.

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 WHEN DO WE USE INLINE-BLOCK? LETS IMAGINE A SENARIO >>

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)

To FIND OUR MORE PLEASE VISIT w3 SCHOOLS (LINK BELOW) http://www.w3schools.com/cssref/pr_class_display.asp

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.

FINAL NOTICE (3) (Browser compatibility)

BROWSER SUPPORT THE NUMBERS IN THE TABLE SPECIFY THE FIRST BROWSER VERSION THAT FULLY SUPPORTS THE PROPERTY

http://www.w3schools.com/cssref/pr_class_display.asp

NOTICE THE DISPLAY PROPERTY IS COMPATIBLE IN ALL LATEST Browsers apart from Internet explorEr 5.5

ANY QUESTIONS?