1. CSS Compound Rules
H2 Example - Parent Child
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.
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.
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
- External CSS: Attach an external CSS file using the `<link>` tag.
- Embedded CSS: Place CSS inside the `<head>` section within `<style>` tags.
- Inline CSS: Apply styles directly to individual elements with the `style` attribute.
Example of Inline CSS:
<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;
}
6. Common and Uncommon CSS Text Properties
Common properties like `font-size`, `font-weight`, and `color` are fundamental for text styling. Uncommon properties like `overflow`, `text-indent`, and `text-shadow` provide advanced styling options.
7. Type List Tags
List tags (`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dd>`) structure content in ordered, unordered, and definition lists. These are essential for organizing information clearly.
Ordered List Example:
<ol>
<li> List Item 1 </li>
<li> List Item 2 </li>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ol>
Lists serve various functions, from simple text organization to complex components like navbars. Style and functionality can be further customized with properties like `list-style-type`.
Important Notes: `<li>` tags must always be used inside `<ol>`, `<ul>`, or other list tags.