CSS Notes

mobiprep (6).png

Tables and Lists

mobiprep (6).png

CSS Layout

mobiprep (6).png

Pseudo-class

mobiprep (6).png

CSS

mobiprep (6).png

Selectors and Declarations

mobiprep (6).png

Box Model

mobiprep (6).png

Text and Image Formatting

mobiprep (6).png

Icons, lists and Links

mobiprep (6).png

Colors

Heading

Q

1

Explain the Display property in CSS.

LRM_EXPORT_207556595493866_20190724_1939

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

LRM_EXPORT_207556595493866_20190724_1939

Q

2

Differentiate between Inline and Block Level Elements.

LRM_EXPORT_207556595493866_20190724_1939

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>.

LRM_EXPORT_207556595493866_20190724_1939

Q

3

Explain the position property and different position values in CSS.

LRM_EXPORT_207556595493866_20190724_1939

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&#39;s scroll position.
Syntax-
div.sticky{
position: sticky;
top: 0;
}

LRM_EXPORT_207556595493866_20190724_1939

Q

4

Explain the Overflow Property in CSS.

LRM_EXPORT_207556595493866_20190724_1939

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

LRM_EXPORT_207556595493866_20190724_1939

Q

5

How to create a Navigation Menu using CSS?

LRM_EXPORT_207556595493866_20190724_1939

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.

LRM_EXPORT_207556595493866_20190724_1939

Q

6

Explain Horizontal and Vertical Alignments.

LRM_EXPORT_207556595493866_20190724_1939

Ans

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.

LRM_EXPORT_207556595493866_20190724_1939