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 Pseudo class with example.
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).
Q
2
Explain the hover pseudo class in detail.
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;
}
Q
3
Explain CSS Pseudo Elements in detail.
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 "float" is "none")
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.