.png)
Mobiprep has created last-minute notes for all topics of CSS Layout to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on CSS Layout.
Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.
Layout
Question 1 - Explain the Display property in CSS.
Answer - 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
Question 2 - Differentiate between Inline and Block Level Elements.
Answer - 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>.
Question 3 - Explain the position property and different position values in CSS.
Answer - 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's scroll position.
Syntax-
div.sticky{
position: sticky;
top: 0;
}Question 4 - Explain the Overflow Property in CSS.
Answer - 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:
Visible
Hidden
Scroll
Inherit
Auto
Initial
Question 5 - How to create a Navigation Menu using CSS?
Answer - 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.
Question 6 - Explain Horizontal and Vertical Alignments.
Answer - To horizontally center a block element (like <div>), 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.