Css Display Property
Download as PPTX, PDF2 likes1,705 views
The document discusses the CSS display property, which controls how elements are displayed on a page. It describes common display types like block and inline, and how to override default display values. It also explains how to hide elements using display: none; without affecting page layout or using visibility: hidden; which hides elements but still takes up space.
Css Display Property
- 1. CSS – Cascading Style Sheet CSS - Display Call US: +91-9915337448 Email Us: [email protected]
- 2. CSS Layout - The display Property • The display property is the most important CSS property for controlling layout. Call US: +91-9915337448 Email Us: [email protected]
- 3. The display Property • The display property specifies if/how an element is displayed. • Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Call US: +91-9915337448 Email Us: [email protected]
- 4. Block-level Elements • A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples of block-level elements: • <div> • <h1> - <h6> • <p> • <form> • <header> • <footer> • <section> Call US: +91-9915337448 Email Us: [email protected] The <div> element is a block-level element.
- 5. Inline Elements • An inline element does not start on a new line and only takes up as much width as necessary. • This is an inline <span> element inside a paragraph. Examples of inline elements: • <span> • <a> • <img> Call US: +91-9915337448 Email Us: [email protected]
- 6. Display: none; • display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved. Call US: +91-9915337448 Email Us: [email protected]
- 7. Override The Default Display Value • As mentioned, every element has a default display value. However, you can override this. • Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards. Call US: +91-9915337448 Email Us: [email protected]
- 8. Override The Default Display Value • A common example is making inline <li> elements for horizontal menus: Call US: +91-9915337448 Email Us: [email protected] li { display: inline; }
- 9. Hide an Element • Hiding an element can be done by setting the display property to none. • The element will be hidden, and the page will be displayed as if the element is not there: Call US: +91-9915337448 Email Us: [email protected] h1.hidden { display: none; }
- 10. Hide an Element • visibility:hidden; also hides an element. • However, the element will still take up the same space as before. The element will be hidden, but still affect the layout: Call US: +91-9915337448 Email Us: [email protected] h1.hidden { visibility: hidden; }