Scribd
Upload
4 views

005 CSS Display

Uploaded by

mamirmohammad514
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

005 CSS Display

Uploaded by

mamirmohammad514
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

005-CSS Display

Code to Inspire

1
CSS BOX MODEL DEMO

2
Challenge
CSS Display Property
The display property specifies the display behavior (the type of rendering box) of an element.

4
Block Elements
• Block elements are those that take up essentially the whole width of
the screen on a web page.
• So it's blocking any other element from being on the same line next
to it, on the right on the left.
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.

5
Common Block Elements

6
• Style the pro section of programmer
paragraph like below.

Challenge

7
Span
• A <span> element which is used to color a part of a text.
• The <span> tag is an inline container used to mark up a part of a text,
or a part of a document.
• The <span> tag is much like the <div> element, but <div> is a block-
level element and <span> is an inline element.

8
CSS Inline Elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.

9
Common
Inline
Elements
Question?

What is the problem with inline elements?

11
• Compared to display: inline, the major
difference is that display: inline-block
allows to set a width and height on the
element.
Inline-Block
• Compared to display: block, the major
Elements difference is that display: inline-block
does not add a line-break after the
element, so the element can sit next
to other elements.

12
Challenge
Create the output in test.html

13
None elements
• display: none;
• Is commonly used with JavaScript to hide and show elements without
deleting and recreating them.

14
Challenge
• Create 5 h1 elements in test.html
• Hide 3 last h1 elements from user sights of view

15
Any Question?

16

You might also like