December 19, 2018 · CSS html coding

CSS Display Property

The display CSS property defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.

By default some element are block display for example <h1> and <p> which take up the whole width of the screen.

HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline" elements. By default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block."

222-3

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

To style a section of your text within a block level element you can use the <span> element. for example

<div class= "top-container">
                <img src="images/cloud.png" alt="cloud-img">
                    <h1>I'm Amy.</h1>
                    <p>a <span class="web">web</span> designer.</p>  

Then i added the code to my css file

.web {
    text-decoration: underline;
}

444-3

A block element (<p>) has the option to have the width and height adjusted whereas an inline element (<span>) can not have the width of height adjusted

The display CSS property defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out.

an example of how display can work is making block elements display inline - example

<p>Hello</p>
<p> World</p>
p {
  background-color: red;
}

555png

changing the css to the below changes the block element to be an inline element - however you will not be able to adjust the width using this method

p {
  background-color: red;
  display: inline;
}

666-1

There is a thrid option that lets you change a block element to inline and also adjust the width. this is called inline-block which can be added to your css file

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket