AltSchool Of Engineering Tinyuka’24 Month 3 Week 1

This week's class kicked off with our signature engaging discussions, where we reflected on the key takeaways from last week's session. We delved into the intricacies of Git and GitHub, covering essential concepts such as core Git operations, effective version control workflows, Git storage locations, and the standout features of GitHub. We also explored the world of open-source software and much more! For a deeper dive into these topics, check out my last article here and this week, we are exploring CSS. Join me, let’s dive in. Styling Your Web Documents CSS or Cascading Style Sheet, is a powerful stylesheet language designed to define the visual presentation of documents written in HTML or XML. While HTML provides the structural framework of a web page, serving as its skeleton, CSS takes on the role of shaping how those structural elements appear to users. Using CSS, developers can control the layout, colours, fonts, and overall aesthetic of HTML components. For instance, with CSS, you can easily change the background colour of a webpage, adjust the font size of headings, or even create complex layouts through grid and flexbox techniques. A Guide to Styling HTML Elements CSS selectors are a fundamental part of styling web pages. They allow developers to target specific HTML elements so that they can apply styles effectively. CSS rules consist of selectors and declarations, where selectors identify the HTML elements to be styled. What are Selectors? Selectors are the first part of a CSS rule, essential for specifying which HTML elements will receive the defined styles. For example, to style all elements with a certain colour or size, you would use a selector. Types of Selectors 1. Universal Selector: This wildcard selector () targets every element within the document. Example: { margin: 0; padding: 0; box-sizing: border-box; } This rule resets margins and paddings for all elements using the universal selector. 2. Type Selector: Matches elements by their HTML tag name. Example: css p { color: red; font-size: 36px; } This applies red color and increased font size to all elements. 3. Class Selector: Targets elements with a specific class attribute, prefixed by a dot (.). Example: You can style me using my class name. .paragraph { color: red; font-size: 36px; } Here, only paragraphs with the class "paragraph" receive the styling. 4.ID Selector: Selects an element with a unique ID, prefixed by a hash (#). Example: You can style me using my ID. #container-wrapper { color: red; font-size: 36px; } This applies style to the element with the specific ID. 5. Attribute Selector: Allows selection based on the presence or value of an attribute. Example: [href] { color: red; } [href="https://altschoolafrica.com"] { color: red; font-size: 36px; } 6. Pseudo-Classes: Styles elements based on their state or position, indicated with a colon (:). Example: button:hover { background-color: orange; } 7. Pseudo-Elements: Styles specific parts of an element, using a double colon (::). Example: p::first-line { font-weight: bold; } Complex Selectors CSS allows for advanced selection techniques: Descendant Selector: Targets all elements that are descendants of a specified element. Example: p span { color: red; } Child Selector: Selects only direct children of an element. Example: ul > li { list-style: none; } Adjacent Sibling Selector: Selects an element immediately following another specified element. Example: h1 + p { margin-top: 0; } Grouping Selector: Applies the same styles to multiple selectors at once. Example: h1, h2, h3 { margin-bottom: 10px; } Nesting Selectors: Used for creating more readable and scoped styles. Example: .container { padding: 20px; .title { color: red; } } :HAS() Pseudo Selector: Allows for conditional selection based on the presence of elements deeper in the DOM. Example: figure:has(figcaption) { border: 1px solid black; } :IS() Pseudo Selector: Selects an element that can match any of the selectors provided in the list. Example: :is(h1, h2, h3) { color: red; } Resolving Style Conflicts Specificity is a crucial concept in CSS that determines how the browser decides which style rules to apply when there are competing rules for the same element. It acts as a scoring system for selectors, guiding CSS behaviour in styling conflicts. Example of Specificity in Action Consider the following HTML and CSS: Hi, Specificity h1 { color: blue; } .title { color: yellow; } In this example, both rules attempt to style the element. Since both have conflicting colour properties, understanding specificity helps us determine which rule takes precedence. Specificity Scoring Specificity

May 1, 2025 - 14:16

AltSchool Of Engineering Tinyuka’24 Month 3 Week 1

This week's class kicked off with our signature engaging discussions, where we reflected on the key takeaways from last week's session. We delved into the intricacies of Git and GitHub, covering essential concepts such as core Git operations, effective version control workflows, Git storage locations, and the standout features of GitHub. We also explored the world of open-source software and much more! For a deeper dive into these topics, check out my last article here and this week, we are exploring CSS. Join me, let’s dive in.

Styling Your Web Documents

CSS or Cascading Style Sheet, is a powerful stylesheet language designed to define the visual presentation of documents written in HTML or XML. While HTML provides the structural framework of a web page, serving as its skeleton, CSS takes on the role of shaping how those structural elements appear to users.

Using CSS, developers can control the layout, colours, fonts, and overall aesthetic of HTML components. For instance, with CSS, you can easily change the background colour of a webpage, adjust the font size of headings, or even create complex layouts through grid and flexbox techniques.

A Guide to Styling HTML Elements

CSS selectors are a fundamental part of styling web pages. They allow developers to target specific HTML elements so that they can apply styles effectively. CSS rules consist of selectors and declarations, where selectors identify the HTML elements to be styled.

What are Selectors?

Selectors are the first part of a CSS rule, essential for specifying which HTML elements will receive the defined styles. For example, to style all

elements with a certain colour or size, you would use a selector.

Types of Selectors

1. Universal Selector: This wildcard selector (*) targets every element within the document.
Example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This rule resets margins and paddings for all elements using the universal selector.

2. Type Selector: Matches elements by their HTML tag name.
Example:
css

p {
  color: red;
  font-size: 36px;
}

This applies red color and increased font size to all

elements.

3. Class Selector: Targets elements with a specific class attribute, prefixed by a dot (.).
Example:

You can style me using my class name.

.paragraph {
  color: red;
  font-size: 36px;
}

Here, only paragraphs with the class "paragraph" receive the styling.

4.ID Selector: Selects an element with a unique ID, prefixed by a hash (#).
Example:

You can style me using my ID.

#container-wrapper {
  color: red;
  font-size: 36px;
}

This applies style to the element with the specific ID.

5. Attribute Selector: Allows selection based on the presence or value of an attribute.
Example:

 [href] {
  color: red;
}
[href="https://altschoolafrica.com"] {
  color: red;
  font-size: 36px;
}

6. Pseudo-Classes: Styles elements based on their state or position, indicated with a colon (:).
Example:

button:hover {
  background-color: orange;
}

7. Pseudo-Elements: Styles specific parts of an element, using a double colon (::).
Example:

p::first-line {
  font-weight: bold;
}

Complex Selectors

CSS allows for advanced selection techniques:

Descendant Selector: Targets all elements that are descendants of a specified element. Example:

p span {
  color: red;
}

Child Selector: Selects only direct children of an element. Example:

ul > li {
  list-style: none;
}

Adjacent Sibling Selector: Selects an element immediately following another specified element. Example:

h1 + p {
  margin-top: 0;
}

Grouping Selector: Applies the same styles to multiple selectors at once. Example:

h1, h2, h3 {
  margin-bottom: 10px;
}

Nesting Selectors: Used for creating more readable and scoped styles. Example:

.container {
  padding: 20px;
  .title {
    color: red;
  }
}

:HAS() Pseudo Selector: Allows for conditional selection based on the presence of elements deeper in the DOM. Example:

figure:has(figcaption) {
  border: 1px solid black;
}

:IS() Pseudo Selector: Selects an element that can match any of the selectors provided in the list. Example:

:is(h1, h2, h3) {
  color: red;
}

Resolving Style Conflicts

Specificity is a crucial concept in CSS that determines how the browser decides which style rules to apply when there are competing rules for the same element. It acts as a scoring system for selectors, guiding CSS behaviour in styling conflicts.

Example of Specificity in Action

Consider the following HTML and CSS:

Hi, Specificity

h1 {
  color: blue;
}

.title {
  color: yellow;
}

In this example, both rules attempt to style the

element. Since both have conflicting colour properties, understanding specificity helps us determine which rule takes precedence.

Specificity Scoring

Specificity is calculated based on a set hierarchy of selectors. The selector with the highest specificity score is applied to the element. The hierarchy can be summarized as follows:

1. Inline Styles: These have the highest specificity score of 1000.
2. IDs: These rank next, with a score of 100.
3. Classes, Attributes, and Pseudo-classes: Each of these has a specificity score of 10.
4. Type Selectors and Pseudo-elements: These have a lower score, typically 1.
5. Universal Selector: This has the lowest specificity and scores 0.

In our example, the class selector .title has a specificity score of 10, while the type selector h1 has a score of 1. Therefore, the text will appear yellow because .title has a higher specificity.

The Role of !important

In CSS, there is a rule that significantly modifies specificity: !important. This rule has the highest specificity score of 10,000 and can override any other declarations, including inline styles (1000).
For instance:

.h1 {
  color: red !important;
}

This declaration will always take precedence over other styles applied to the same element, unless another !important declaration is used in a more specific rule.

Caution with !important

While !important can be useful for ensuring certain styles are applied, it is considered best practice to use it sparingly. Overusing !important can lead to difficult-to-maintain code and unexpected styling behaviour, as it makes it harder to follow the natural cascading rules of CSS.

A Fundamental Concept for Web Design

The CSS Box Model is a foundational element in web design, forming the framework for how every HTML element is displayed as a rectangular box. Understanding this model is essential for accurately creating layouts and addressing common design challenges.

Components of the Box Model

1. Content:

This is the innermost part of the box where the actual content (like text or images) resides.
Its dimensions are controlled by the width and height properties.

2. Padding:

Padding wraps around the content, creating space between it and the box's border.
It can be adjusted using the padding property or its directional counterparts (like padding-top or padding-right).
Notably, padding is transparent, allowing the element's background to remain visible.

3. Border:

The border encloses the padding (or content if no padding is applied).
It can have various styles, colours, and thicknesses, defined by the border property or specific border attributes.

4. Margin:

The outermost layer of the box model, margins create space between the element and neighbouring elements.
Margins are always transparent and can be set using the margin property or its directional equivalents.
Key concepts related to margins include "collapsing margins" and "negative margins," which can affect layout behaviour.

Calculating Total Element Size

Understanding how to calculate the total size of an element is vital for effective layout design. The total dimensions are determined as follows:

Total Width: width + left padding + right padding + left border + right border
Total Height: height + top padding + bottom padding + top border + bottom border

It's important to note that margins do not factor into these calculations since they influence spacing between elements rather than the element's size itself.

The Box-Sizing Property

The default box model sometimes leads to unintended results, which is why CSS3 introduced the box-sizing property:

content-box (default): The width and height relate solely to the content area.
border-box: The width and height encompass the content, padding, and border.
For example:

* {
  box-sizing: border-box;
}

div {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 10px solid black;
  margin: 25px;
}

Practical Importance of the Box Model

Understanding the Box Model is crucial for various design tasks, including:

Centering elements.
Creating consistent spacing for a cohesive layout.
Implementing responsive designs that cater to different screen sizes.
Debugging layout issues that arise during development.

Mastering the CSS Box Model ultimately leads to more polished and effective web design.

Understanding Block and Inline Axes in CSS

In CSS, the concepts of block and inline axes play a vital role in determining how elements are arranged on a web page. Mastering these axes is essential for developing modern, responsive websites that are i18n (internationalization) and localization-friendly.

Block Axis

The block axis is associated with the vertical layout of elements. Depending on the writing mode (such as left-to-right or right-to-left), block-level elements are organized vertically, stacking one on top of another. This axis typically corresponds to the height of elements.

For example, when you define multiple block-level elements like

, they will stack vertically in the block axis:

Block 1
Block 2

Inline Axis

Conversely, the inline axis relates to the horizontal arrangement of elements. Inline-level elements, such as or , flow in a row across the line, corresponding to the width of the elements.

For instance, if you have several inline elements:

Inline 1
Inline 2

These elements will appear next to each other in the inline axis.

CSS Properties for Block and Inline Axes

CSS provides several properties that utilize block and inline axes. These include:

Padding and Margin: Variants like padding-block, padding-inline, margin-block, and margin-inline allow for spacing adjustments along the respective axes. You can also specify start and end variants such as padding-inline-start and margin-block-end.
Block and Inline Sizes: The block-size and inline-size properties determine the height and width of elements. Meanwhile, min-block-size and max-block-size enforce minimum and maximum heights, while min-inline-size and max-inline-size do the same for widths.
Positioning Elements: You can utilize properties like inset-block or inset-inline for precise positioning, further adapting to the start or end variants based on layout requirements.

Width and Height Calculations

Width Calculation: Width is calculated along the inline axis. The default value is auto, which recognizes the content size. You can explicitly set width using the width property.
Max and Min Width: The properties max-width and min-width are important for responsive designs, ensuring elements do not exceed or fall below certain widths:

.container {
  max-width: 800px; /* Prevents exceeding 800px */
  min-width: 300px; /* Ensures a minimum of 300px */
}

Height Calculation: Height is calculated along the block axis, starting from the top and moving downward. Like width, the default is auto, but it can also be set using the height property.
Max and Min Height: Similar to width, max-height and min-height help restrict the height of elements:

.box {
  max-height: 500px; /* Limits height to 500px */
  min-height: 200px; /* Ensures a minimum height of 200px */
}

In both cases, it's crucial to consider the parent element's dimensions and the content's needs when determining widths and heights. Avoid fixed dimensions and percentages without a defined parent width for best results.

Thank you so much for staying with me on this journey—your support means the world to me! I truly appreciate your effort and encourage you to explore all the concepts we've discussed at your earliest convenience; practice is key to improvement.

I would love to hear your thoughts and feedback, so please don’t hesitate to share your insights in the comments section below.

I’m Ikoh Sylva, a passionate Cloud Computing enthusiast with a few months of hands-on experience in AWS. I’m currently documenting my cloud journey here from a beginner’s perspective. If this resonates with you, please like and follow my posts, and consider sharing this article with anyone who might also be starting their cloud journeys. Together, we can learn and grow!

Feel free to connect with me on social media as well!

LinkedIn Facebook X