18/09/2024
Day 3 of Web Frontend Training: CSS (Cascading Style Sheets)
Links to other days are below:
Day One: https://www.facebook.com/share/p/gX8duTDBRWyjYoPU/
Day Two: https://www.facebook.com/share/p/KNddZo1QArQTmsCa/
Tutor: Aminigbo Paul
Today’s session was packed with new learnings! Here's a summary:
1. Types of CSS:
Inline Styling: This is written directly inside an HTML element using the style attribute. The advantage is that it's easy to apply directly to elements and is often used for testing or overriding styles. The disadvantage is that it can't be reused and is not suitable for larger projects.
Internal Styling: Written within tags inside the section of the HTML document. It is used to style a single webpage. The advantage is that it allows you to style an entire webpage without using external files. The downside is that it can't be reused across multiple pages.
External Styling: Written in a separate CSS file and linked to the HTML document using the tag. The advantage is that it can be reused across multiple pages. However, it can't be used to style individual elements without some extra effort.
2. CSS Selectors: We explored different CSS selectors used to style HTML elements:
Type Selector: Targets all instances of a given HTML element (e.g., p, div, span, h1).
Class Selector: Targets elements based on their class attributes, allowing multiple elements to share the same style (.className).
ID Selector: Targets a single element by its unique ID attribute ( ).
Universal Selector: Targets all elements on a page (*). It has higher precedence than external styles but lower than inline styles.
Attribute Selector: Targets elements based on the presence or value of an attribute (element[attribute] or element[attribute=value]).
Descendant Selector: Targets elements that are nested within other elements.
Child Selector: Selects only direct children of a given parent element (>).
Adjacent Sibling Selector: Selects an element that immediately follows another element (+).
General Sibling Selector: Selects all elements that are siblings of a specific element (~).
Pseudo-class Selector: Targets elements based on their state or position (e.g., :hover, :focus).
3. CSS Properties: We went through various CSS properties:
color
font-family
font-size
line-height
display
text-decoration
4. Display Values: We also discussed different values for the display property:
Block: Starts on a new line and takes up the full width of the parent container (e.g., div, p, h1).
Inline: Only takes up the width of the content, not the full width of the parent (e.g., span, input).
Inline-block: Wraps when the container space is occupied but doesn't behave like a typical inline element.
5. Justify Content: We learned about values for justify-content:
Space-around: Spreads the items with space around each.
Space-between: Spreads the items evenly across the parent container.
Space-evenly: Ensures equal spacing between the items.
6. Practical Session: We concluded the class with a practical exercise where we used all these concepts to design a portion of a webpage. (You can see my result in the attached photo).
Challenges Overcome:
I learned that it's best practice to include internal styles inside the element rather than outside of it, even though both methods may work.
I now fully understand Universal, Attribute, and Child Selectors, and how they function.
Feel free to reach out if you have any questions!
Thanks to Chukwudi Dimkpa Chukwudi Dimkpa Foundation and Harvoxx Tech. Hub for this amazing opportunity to learn, grow, and understand every concept.
