Compound Rules in CSS
Definition: Compound rules in CSS allow you to target elements that match a specific combination of selectors.
Example with h2: To style all h2 elements within a section element differently from other h2 elements:
header h2 {
font-size:
color:
font-weight:
}
main h2{
font-size:
color:
font-weight
}
Purpose: Increases specificity without using ID or class selectors, allowing for more granular styling based on document structure.
Use Case: Useful for applying styles to h2 elements only when they appear in a particular context, like within a sidebar or article section.
HTML Symbols
Definition: HTML symbols are characters not found on a standard keyboard, represented in HTML through entity names or numbers.
Examples:
Non-breaking space:
Less than symbol: <
Greater than symbol: >
Copyright symbol: ©
Usage: Insert symbols by using the [&] symbol followed by the entity name or number and ending with a semicolon (;).
Benefit: Allows for the inclusion of mathematical symbols, currency symbols, trademark symbols, and more, enhancing the expressiveness of web content.
Span Tags
Definition: The span tag is an inline container used in HTML to apply styles or identification to a part of a text or a part of a document.
Usage:
To apply CSS styles to a text snippet.
To apply JavaScript actions to specific parts of text.
Characteristics:
Does not inherently represent any formatting change until styled with CSS.
Useful for styling portions of text within a block-level element like div or p.
Example: Highlighting a part of a sentence:
This is an important sentence.
Styling Links in CSS
Pseudo-classes for Links:
Use pseudo-classes to style links differently depending on their state.
:link - styles links that have not been visited.
:visited - styles links that have been visited.
:hover - applies when the user hovers over the link.
:active - applies when the link is being clicked.
Example of css code:
a:link { color: green; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
Best Practice:
Order the pseudo-classes in the LVHA-order (:link, :visited, :hover, :active) to ensure they work correctly due to the cascading nature of CSS.