CSS- Header, display, inline and block, pseudo classes and elements

Question 1

What is the difference in a link href and src?

Answer 1

href is for hyperlinks.

<ul>
<li>Link1
<a></a>
</li>
<li>Link2
<a></a>
</li>
<li>Link3
<a></a>
</li>
</ul>

The src attribute is used to specify the URL of an external resource that should be embedded in the web page, such as images, videos, audio files, and scripts.

<img></img>

Question 2

How can you make these links, not stack on top of one another?

<header>
  <ul class="header-main">
    <li class="header-main-item">Link1
      <a src="www.google.com"></a>
    </li>

    <li class="header-main-item">Link2  <a src="www.google.com"></a></li>
    <li class="header-main-item">Link3  <a src="www.google.com"></a></li>
  </ul>
</header>

Answer 2

.header-main-item {
display: inline;
}

Question 3

What does it mean that <a> anchor tags are inline? and how does it then decide its height and width?</a>

Answer 3

They are rendered on the same line, next to each other, they do not fill the whole width of the border-box.

Sizing: Depends on content.

Question 4

What does flow mean in css?

Answer 4

In CSS, the term “flow” generally refers to the natural order of the HTML elements on a web page. When you create an HTML document, the elements appear on the page in the order in which they are written in the HTML code, unless you specify a different layout using CSS.

The flow of the elements can be affected by different CSS properties such as position, display, float, clear, overflow, and more.

Question 5

What is inline block and why is it preferable?

Answer 5

Inline-block:

You make it behave like an inline element in terms of its ability to flow with the surrounding text,

But also like a block-level element in terms of its ability to have a specified width, height, padding, margin, and other block-level properties.