______________________________________
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
A) Make a CSS style sheet sheet and attach it.
B) Put CSS in head portion of HTML code.
(Inside the <style type="text/css">)
Place your CSS Rules here
<style> code)
C) Place it inline <style=______>
Inline CSS provides a quick way to apply styles directly to individual elements, useful for overriding stylesheet rules for specific cases.
<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, whereas properties like `overflow`, `text-indent`, and `text-shadow` offer additional control for advanced styling needs.
______________________________________
7. Type List Tags
List tags (`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dd>`) structure content in ordered, unordered, and definition lists, essential for organizing information clearly.
A sample ordered list (numbered) could be coded as follows:
<ol>
<li> List Item 1 </li>
<li> List Item 2 </li>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ol>
Important Notes on Lists
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`.
Note: you can not set <li> by themselves. All <li>s must be used inside an, <ol> or <ul> etc.