CSS Notes
Tables and Lists
CSS Layout
Pseudo-class
CSS
Selectors and Declarations
Box Model
Text and Image Formatting
Icons, lists and Links
Colors
Heading
Q
1
Explain the Display property in CSS.
Ans
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
Q
2
Differentiate between Inline and Block Level Elements.
Ans
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>.
Q
3
Explain the position property and different position values in CSS.
Ans
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;
}
Q
4
Explain the Overflow Property in CSS.
Ans
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
Q
5
How to create a Navigation Menu using CSS?
Ans
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.
Q
6
Explain Horizontal and Vertical Alignments.
Ans
To horizontally centre 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.