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 Pseudo class with example.

LRM_EXPORT_207556595493866_20190724_1939

Ans

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.

A pseudo-class is used to define a special state of an element. For example, it can be used to:
Style an element when a user mouses over it.
Style visited and unvisited links differently.
Style an element when it gets focus

Syntax-
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
A CSS pseudo-element is a keyword added to a selector that lets you style aspecific part of the selected element(s).

LRM_EXPORT_207556595493866_20190724_1939

Q

2

Explain the hover pseudo class in detail.

LRM_EXPORT_207556595493866_20190724_1939

Ans

hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
Example-
div:hover {
background-color:blue;
}
Hover over a <div> element to show a <p> element (like a tooltip):
p {
display: none;
background-color:yellow;
padding: 20px;
}
div:hover p {
display: block;
}

LRM_EXPORT_207556595493866_20190724_1939

Q

3

Explain CSS Pseudo Elements in detail.

LRM_EXPORT_207556595493866_20190724_1939

Ans


SS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Style the first letter, or line, of an element.
Insert content before, or after, the content of an element

Syntax-
The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}
The ::first-line Pseudo-element-
The ::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all <p> elements:

Example
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
The following properties apply to the ::first-line pseudo-element:
1.font properties
2.color properties
3.background properties word-spacing
4. letter-spacing
5. text-decoration
6.vertical-align
7. text-transform
8. line-height clear

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
The following properties apply to the ::first-letter pseudo- element:
1.font properties
2. color properties
3.background properties
4. margin properties
5. padding properties
6. border properties
7. text-decoration
8. vertical-align (only if &quot;float&quot; is &quot;none&quot;)
9. text-transform
10. line-height
11. float
12. clear

CSS -The ::before Pseudo-element-

The ::before pseudo-element can be used to insert some content before the content of an element.

CSS - The ::after Pseudo-element-

The ::after pseudo-element can be used to insert some content after the content of an element.

CSS - The ::selection Pseudo element-

The ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection: color, background, cursor, and outline.

LRM_EXPORT_207556595493866_20190724_1939