1. CSS Compound Rules
Compound rules in CSS enable specific styling of elements based on their hierarchical relationships or context. By targeting h2 elements within different sections (header, main, footer), you can apply unique styles to each, enhancing visual hierarchy and design coherence.
Example - Parent Child
h2 {
font-weight: 100;
font-size: 4em;
}
header h2 {
font-weight: 900;
font-size: 4em;
color: brown;
font-style: italic;
}
main h2 {
font-weight: 100;
font-size: 2em;
color: darkorange;
}
footer h2 {
font-weight: 300;
font-size: 1em;
color: aliceblue;
}
About Compound Rules
Creating compound CSS rules allows for tailored styling within different sections of a webpage, such as header, main, aside, and footer. This specificity enhances the design and functionality of each section.
2. Span Tag
The <span> tag is useful for applying specific styles within text blocks, such as paragraphs. This flexibility is crucial for individualizing parts of your content without altering the overall block structure.
3. Stylizing Links
Links can be styled to respond differently based on user interaction, enhancing usability and aesthetic appeal. It's important to style links in the following order: :link, :visited, :hover, and :active to ensure proper cascading of styles.
Link Styling Example:
a {
font-size: 0.9em;
color: #A74731;
text-decoration: none;
font-weight: 300;
}
a:visited {
color: #A74731;
font-weight: bold;
}
a:hover {
color: #F1A748;
text-decoration: underline;
cursor: pointer;
}
a:active {
color: #A74731;
cursor: pointer;
font-weight: bold;
}
4. Three Different Ways to Attach CSS
A) External CSS File
Create a CSS stylesheet and link it in the <head> of your HTML document.
B) Internal CSS
Place your CSS rules within the <style> tags in the <head> portion of your HTML document.
C) Inline CSS
Use the style attribute directly within an HTML tag. For example:
<p style="color: blue; font-weight: 800;">Paragraph text goes here.</p>
5. The Use of the Span Tag
The <span> tag, paired with CSS, offers granular control over the styling of specific text segments within a paragraph or other text block.
p span {
font-family: your choice here;
font-size: your choice here;
font-weight: your choice here;
color: your choice here;
}