AltSchool Of Engineering Tinyuka’24 Month 3 Week 2

This week’s class began with our signature engaging discussions, where we reflected on the key takeaways from last week’s session. We dove into the intricacies of CSS, exploring how to style your web documents, essential techniques for styling HTML elements, and how to resolve style conflicts with specificity an essential concept in web design. We also covered the differences between block and inline elements in CSS, among other topics!

For a more in-depth exploration of these subjects, be sure to check out my last article here. This week, we’ll be exploring CSS resets and normalizing styles. Join me as we dive in together!

Establishing Consistent Styles

CSS Reset

A CSS reset is a collection of CSS rules designed to eliminate the default styling applied by browsers to HTML elements. By resetting styles to a uniform baseline, developers can achieve a consistent look and feel across various web browsers. This approach helps prevent discrepancies in how elements are displayed, allowing for a smoother and more predictable design process.

For example, without a reset, different browsers might display heading elements (<h1>, <h2>) with varying margins and font sizes. A CSS reset could be used to standardize these styles:

/* Example of a basic CSS reset */

h1, h2, h3, p {

  margin: 0;

  padding: 0;

  font-size: 100%;

}

Normalize.css

In contrast to CSS resets, Normalize.css is a modern approach that aims to make the default styles of HTML elements more consistent and aligned with current standards. Instead of removing all styling, it selectively targets and modifies only the styles that need normalization to ensure better cross-browser rendering.

For example, Normalize.css might adjust the appearance of form elements and headings while preserving useful default styles like line heights and margins, thereby enhancing usability without a complete overhaul of the elements.

/* Example of Normalize.css handling inputs */

input {

  font-family: inherit; /* Retain inherited font settings */

  color: inherit;      /* Allows text color to be consistent */

}

Both CSS resets and Normalize.css play crucial roles in web development by addressing inconsistencies in how browsers render HTML elements.

Understanding Inheritance in CSS

Inheritance in CSS refers to the mechanism by which child elements receive computed values from their parent elements. This cascading behaviour ensures that certain styles flow down through the HTML hierarchy, facilitating consistent design across a web page.

Inherited Properties

Certain CSS properties are designed to be inherited from parent to child elements. This means that if a parent element has a specific style, its children will automatically adopt that style unless otherwise specified. Common inherited properties include:

• Colour: If a parent has a colour specified, its children will inherit that colour.

.parent {
  color: blue; /* Child elements will inherit this color */
}

• Font Family: A defined font family on a parent element applies to all nested text elements.

.parent {
  font-family: Arial, sans-serif; /* Children will use this font */
}

Non-Inherited Properties

On the other hand, some CSS properties do not inherit their values from parent elements. These properties must be explicitly defined for child elements, as they do not cascade down. Examples of non-inherited properties include:

• Margin: If a parent element has a margin set, the child does not inherit this margin value.

.parent {
  margin: 20px; /* Child elements have no margin unless specified */
}

• Width: The width of a parent does not affect the width of a child element.

.parent {
  width: 100px; /* Child's width must be defined separately */
}

Inherited vs. Non-Inherited CSS Properties

In CSS, properties are categorized as either inherited or non-inherited, influencing how styles are applied to child elements based on their parent elements.

Inherited Properties

Inherited properties allow child elements to adopt the computed values of their parent elements. This cascading style behaviour promotes visual consistency across related elements. Some common inherited properties include:

• colour: If a parent element specifies a colour, child elements will inherit this colour.

• font-family: Child elements will also inherit the font family defined by the parent.

Example of Inherited Property:

p {
  color: blue; /* Parent color */
}

em {
  /* Inherits color from parent p */
}

In this case, the <em> element inside the <p> will automatically have the blue colour.

Non-Inherited Properties

In contrast, non-inherited properties do not pass their values from parent to child. Each child must define these properties explicitly if they are required. Common non-inherited properties include:

• border: Child elements will not automatically adopt border styles set by their parent.

• margin: Margins defined on a parent do not affect the margins of child elements.

Example of Non-Inherited Property:

p {
  border: 1px solid black; /* Parent border */
}

em {
  /* Does not inherit border from parent p */
}

In this example, the <em> element does not have a border unless specified.

Explicitly Setting Inheritance

To exercise greater control over styles, the inherit keyword can be utilized. This keyword enables any property, even non-inherited ones, to explicitly inherit the computed value from its parent.

Example of Setting Inheritance:

em {
  border: inherit; /* Em inherits border from parent */
}

This line ensures that the <em> element will adopt the border property from its parent element.

Controlling Inheritance in CSS

Inheritance in CSS is a foundational concept where child elements derive styles from their parent elements in the document tree, regardless of whether the parent is a direct container. Developers can manipulate this behaviour using five key keywords to control the inheritance of CSS properties.

1. inherit

The inherit keyword allows a child element to take the computed value of a specified property from its parent element. This is useful when you want to ensure that certain styles are consistently applied.

Example:

.parent {
  color: green;
}

.child {
  color: inherit; /* The child will inherit the green color from the parent */
}

2. initial

The initial keyword resets a property to its default value as defined in the CSS specification. This is useful when you want to override any inherited styles and revert to the base setting.

Example:

.element {
  color: initial; /* Resets the color to the default defined by the browser */
}

3. unset

The unset keyword behaves as a combination of the inherit and initial keywords. If a property naturally inherits from its parent, unset will apply the inherited value; if not, it will revert to the property's initial value.

Example:

.element {
  color: unset; /* If color is inherited, uses parent's color; otherwise, resets to default */
}

4. revert

The revert keyword restores the property's value to what it would have been if no changes had been made by the current style origin. This is particularly useful in complex stylesheets where multiple rules apply.

Example:

.element {
  color: revert; /* Returns the color to the value before any modifications */
}

5. revert-layer

The revert-layer keyword resets a property to the value defined in a previous cascade layer. This is useful for controlling style changes made across different contexts, such as user styles or author styles.

Example:

.element {
  color: revert-layer; /* Restores the color to the value from an earlier cascade layer */
}

The All CSS Property

The all CSS property serves as a powerful shorthand for resetting nearly all properties of an element to their specified state whether that be initial, inherited, or unset. This makes it a valuable tool for developers looking to ensure that an element starts fresh, free from any inherited styles or previously applied rules.

When using the all property, the following are reset:

• Property values to their initial state (the default defined by CSS).

• Values to their inherited state from the parent (if applicable).

• Values to their unset state (removes any specific styling while following the predefined rules).

However, it’s important to note that the unicode-bidi and direction properties are not affected by the all property and remain untouched.

Example:

.element {

  all: unset; /* Resets all properties to their unset state */

}

In this example, applying all: unset; to .element ensures that the element does not inherit any styles from its parent, effectively creating a clean slate for further styling.

Colours, Units, and Gradients in CSS

CSS offers a variety of methods for defining colours, providing flexibility and creativity in web design. Here’s an overview of the different ways to specify colours, including keywords and advanced colour models.

Colour Definitions in CSS

Colour Keywords

1. • CSS includes 140 predefined colour names, such as red, blue, green, black, and white. These names allow for quick and easy implementation of common colours.

     • Example:

color: red; /* Uses the named color red */

Hexadecimal Colours

2. • Hex colours are represented by a six-digit code, prefaced by a "#" symbol. The structure consists of two digits for red, green, and blue components.

     • A shorthand three-digit notation (e.g., #f00 for #ff0000) is also available.

     • Example:

color: #ff5733; /* Bright orange */

RGB and RGBA Colours

3. • RGB specifies colours through the red, green, and blue channels, with each value ranging from 0 to 255. RGBA extends this by adding an alpha channel for transparency (0 is fully transparent, 1 is fully opaque).

     • Example:

color: rgb(255, 87, 51);    /* Bright orange */
color: rgba(255, 87, 51, 0.5); /* 50% transparent */

HSL and HSLA Colours

4. • HSL stands for Hue (0-360 degrees), Saturation (0%-100%), and Lightness (0%-100%). HSLA incorporates an alpha channel for transparency.

     • This format is more intuitive for adjusting colours according to human perception.

     • Example:

color: hsl(9, 100%, 60%);    /* Bright orange */
color: hsla(9, 100%, 60%, 0.5); /* 50% transparent */

Controlling Opacity and Transparency

5. • Besides using RGBA and HSLA, CSS provides the opacity property to adjust the transparency of an entire element and its content.

     • Example:

opacity: 0.5; /* Makes the whole element 50% transparent */

The Future of Colour Management

CSS has evolved to include more advanced colour models:

• LCH: Based on Lightness, Chroma, and Hue.

• OKLCH: An advanced version of LCH with an alpha channel.

• LAB: Represents colour in terms of Lightness, A (green-red), and B (blue-yellow) components.

• OKLAB: A variation of LAB with an alpha channel.

• Light-Dark: Adjusts the lightness of a colour.

• Colour(): Creates colours from strings.

• Colour-Mix(): Combines two colours.

• Display-P3: A wide-gamut colour space suitable for digital displays.

Examples:

color: lch(60% 50 90); /* LCH color specification */
color: lab(60% 50 90); /* LAB color specification */
color: light-dark(50%); /* Adjusts lightness */
color: color(display-p3 0.7 0.5 0); /* Display-P3 color */
color: color-mix(red blue 50%); /* Mixes red and blue equally */

From simple colour names to advanced models like LCH and Display-P3, understanding these options enables designers to craft visually appealing web pages that meet diverse user needs and preferences.

Thank you so much for joining me on this journey your support truly means the world to me! I sincerely appreciate your efforts and encourage you to dive into all the concepts we’ve discussed whenever you can; like I’ll always say practice, practice, practice!

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 several months of hands-on experience in AWS. I’m currently documenting my cloud journey from a beginner’s perspective right here. If this resonates with you, please like and follow my posts, and consider sharing this article with anyone who might also be embarking on their cloud journeys. Together, we can learn and grow!

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

LinkedIn Facebook X