Heading

The display property specifies the display property of an element. The syntax for the same is: display: value;

The display property is the most significant property in CSS for controlling layout

The inline and block level elements work same as in HTML. The inline elements do not start on a new line and takes the width required by the element.
Some of the examples of inline elements are: <span>, <a>, <img>.

The block-level elements always start with a new line and takes up the full width available.
Some of the examples of block-level elements are: <div>, <header>, <p>.

The position property specifies the type of positioning used for an element.

Different types of Position Property:
a. static- HTML elements are positioned static by default. Static positioned elements are not affected by right, left, top and bottom properties.
Syntax-
div.static{
position: static;
}

b. relative- This is positioned relative to the normal position. Setting the position left, right, top, and bottom property will cause it to adjust the position relatively to normal position.
Syntax-
div.relative {
position: relative;
right: 20px;
}

c. fixed- In this, the element always stays at a fixed position even if the page is scrolled.
Syntax-
div.fixed{
position: fixed;
left: 0;
right: 0;
}

d.absolute- The element is positioned relative to the nearest positioned ancestor.
Syntax-
div.relative{
position: relative;
}
div.absolute{
position: absolute;
bottom: 50px;
left: 0;
}

e. sticky: In this, the element tends to be positioned based on the user&#39;s scroll position.
Syntax-
div.sticky{
position: sticky;
top: 0;
}

The overflow property specifies what should happen when content overflows in an element’s box. This property specifies to whether add a scrollbar or clip the content.
Syntax- overflow: visible;

Different Property values are: 1.Visible 2. Hidden 3. Scroll 4. Inherit 5. Auto 6. Initial

A navigation bar is basically a list of links.

a. Vertical Navbar- li a{
display: block;
width: px;
}
display: block; displays the links as block elements making the whole area clickable. Width specifies the space we require in the link.
The links used are made with the help of <a> tag in HTML.

b. Horizontal Navbar- This has two methods: i. inline elements ii. floating elements.
Inline elements- li{
display: inline;
}
By default, <li> elements are block elements. So display: inline; removes line breaks before and after each item, to display them on one line.
Floating elements Another way of creating a horizontal navigation bar is to float the <li> elements.

To horizontally centre a block element (like &lt;div&gt;), use margin: auto;
To align text horizontally, we use position- position: absolute;
To align text vertically, we use position- position: relative; using position relative, aligns the text vertically with respect to the values provided.