AltSchool Of Engineering Tinyuka’24 Month 3 Week 3
Ikoh Sylva
This week, we began the class with the usual revision which I have covered here and I would advise that you go through that too if you haven’t.
Our Instructor talked about CSS Units this week, let’s dive in;
Understanding CSS Units
CSS units are essential for determining the size, spacing, and layout of web elements. They can be grouped into two main categories: absolute units and relative units.
Absolute Units
Absolute units are fixed and do not change according to the viewport or parent elements. They are useful when exact dimensions are needed.
Pixels (px): The most commonly used unit, ideal for precise control over element size.
- Example:
font-size: 14px; /* A fixed font size of 14 pixels */
Relative Units
Relative units are flexible and scale based on the size of the parent element or viewport. They are particularly valuable for creating responsive designs.
em: This unit is relative to the font size of the parent element. It is commonly used for scalable spacing and typography.
- Example:
padding: 1em; /* Padding equal to the current font size */
rem: This unit is based on the root element’s font size (usually the
<html>element), providing consistent sizing across a page.- Example:
font-size: 1.2rem; /* 1.2 times the root font size */
Percentage (%): This unit is relative to the size of the parent element, often used in responsive designs to create fluid layouts.
- Example:
width: 80%; /* Width is 80% of the parent element's width */
Viewport Units: Perfect for responsive design, these units are based on the dimensions of the browser window.
vw: 1% of the viewport width.
- Example:
width: 100vw; /* Full width of the viewport */
vh: 1% of the viewport height.
- Example:
height: 100vh; /* Full height of the viewport */
vmin and vmax: These units represent the smaller or larger value between vw and vh, respectively.
- ch: Relative to the width of the "0" character, useful in typographic layouts.
CSS Gradients
Gradients are a powerful CSS feature that enable smooth transitions between colors, adding depth and interest to web designs. Here's an overview of the different types of gradients and their uses.
Types of Gradients
Linear Gradients
These gradients transition colors along a straight line. Designers can specify the direction of the gradient and define multiple color stops.
Syntax:
linear-gradient(direction, color-stop1, color-stop2, ...);
- Example:
background: linear-gradient(45deg, red, yellow); /* Diagonal transition from red to yellow */
Radial Gradients
Radial gradients emanate from a central point, creating a circular or elliptical effect. The shape and size can be controlled.
Syntax:
radial-gradient(shape size at position, start-color, ..., end-color);
- Example:
background: radial-gradient(circle, red, yellow, green); /* Circular gradient transition */
Conic Gradients
These gradients rotate around a central point, resembling pie slices. They are often used for charts and other visual elements.
Syntax:
conic-gradient(from direction, color-stop1, color-stop2, ...);
- Example:
background: conic-gradient(from 90deg, red, yellow, green); /* Pie-like gradient starting at 90 degrees */
Repeating Gradients
This type allows gradients to repeat indefinitely, creating a pattern effect.
Example (Linear):
background: repeating-linear-gradient(45deg, red, yellow 10%); /* Repeats the linear gradient */
- Example (Radial):
background: repeating-radial-gradient(circle, red, yellow 10%); /* Repeats the radial gradient */
Practical Tips
Combine Units: When using gradients alongside text, combine them with relative units (like em or rem) for scalability and consistent spacing.
Transparency in Gradients: Use gradients with RGBA or HSLA to introduce transparency, allowing for layered visual effects.
Viewport Units for Responsiveness: To make gradients responsive, apply viewport units (vw and vh) for gradients in full-screen designs or adaptable text sizes.
CSS Functions
CSS functions play a crucial role in manipulating values, enabling calculations, and applying various effects to enhance web design. Below is an overview of some commonly used CSS functions.
Common CSS Functions
calc()
This function performs calculations on property values, allowing for dynamic sizing and layout adjustments.
Example:
width: calc(100% - 20px); /* Width is 100% minus 20 pixels */
var()
This function is used to define and utilize custom properties (variables), promoting reusable and maintainable CSS.
Example:
--main-color: #3498db;
color: var(--main-color); /* Uses the custom property for color */
Color Functions (rgb(), rgba(), hsl(), hsla())
These functions define colors using RGB, RGBA (with alpha for transparency), HSL, and HSLA values, offering flexibility in color management.
Example:
background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
url()
This function specifies the location of an external resource such as images, fonts, or stylesheets.
Example:
background-image: url('image.jpg'); /* Sets a background image from a URL */
Gradient Functions (linear-gradient(), radial-gradient(), conic-gradient())
These functions create smooth transitions between colors, adding depth and visual interest to designs.
Example:
background: linear-gradient(to right, red, yellow); /* Straight gradient from red to yellow */
clamp()
The clamp function restricts a value within a specified range, providing a minimum and maximum bound.
Example:
font-size: clamp(1rem, 2vw + 1rem, 2rem); /* Font size adapts between 1rem and 2rem based on viewport width */
Color Manipulation Functions (light-dark(), color(), color-mix())
These functions facilitate the manipulation of colors, enabling the creation of color schemes and adjustments.
Example:
color: color-mix(red blue 50%); /* Mixes red and blue equally */
attr()
This function retrieves the value of an attribute from an HTML element, allowing styles to dynamically respond to element attributes.
Example:
content: attr(data-title); /* Displays the value of the data-title attribute */
Transform Functions
Transform functions such as translate(), rotate(), skew(), matrix(), scale(), and perspective() enable 2D and 3D transformations of elements.
Example:
transform: rotate(45deg); /* Rotates an element by 45 degrees */
For further study on the subject matter kindly go here for specifics and official documentation.
CSS @Rules: Controlling Style Application
CSS @Rules are essential tools for defining special rules that govern how styles are applied to web elements. Below are some of the most common @Rules utilized in CSS.
Common CSS @Rules
@media
This rule defines media queries, which allow styles to adapt based on device characteristics such as screen size and resolution, facilitating responsive design.
Example:
@media (max-width: 600px) {
body {
font-size: 14px; /* Changes font size for smaller screens */
}
}
@keyframes
This rule creates animations by defining a series of keyframes, allowing elements to change styles over time.
Example:
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
@font-face
This rule enables the embedding of custom fonts within a web page, allowing for greater typography control.
Example:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2');
}
@import
This rule imports external CSS files into a current stylesheet, promoting modular design and code reuse.
Example:
@import url('styles.css'); /* Imports styles from an external CSS file */
@supports
This rule checks whether a browser supports a specific CSS property or value, enabling the application of fallback styles for unsupported features.
Example:
@supports (display: grid) {
.container {
display: grid; /* Applies grid layout if supported */
}
}
@page
This rule defines the layout and styling for printed pages, allowing for adjustments specific to print media.
Example:
@page {
margin: 20mm; /* Sets margin for printed pages */
}
@layer
This rule specifies the layering order of styles, which is especially useful in managing complex stylesheets with multiple sources.
Example:
@layer base {
h1 { color: blue; }
}
@counter-style
This rule allows the creation of custom counter styles for ordered lists, providing flexibility in how lists are displayed.
Example:
@counter-style myCounter {
system: cyclic;
symbols: 'A' 'B' 'C'; /* Custom symbols for list items */
}
@property
This rule registers custom CSS properties, akin to creating new properties that can be used throughout stylesheets.
Example:
@property --my-color {
syntax: "<color>";
inherits: false;
}
@view-transition
This rule enables smooth transitions between different views when navigating across documents.
Example:
@view-transition {
from { opacity: 0; }
to { opacity: 1; }
}
@scope
This rule defines a scope for applying specific styles to selected elements, enhancing style targeting.
Example:
@scope .container {
background-color: lightgray; /* Styles only apply within .container */
}
@container
This rule applies styles conditionally based on the properties of a container, facilitating adaptive responsive designs.
Example:
@container (min-width: 500px) {
.child {
width: 100%; /* Adjusts child width if container meets conditions */
}
}
@starting-style
This rule defines starting values for properties when an element receives its first style update, particularly useful for animations.
Example:
@starting-style {
opacity: 0; /* Fades in from invisible */
}
If you will like to study further about the CSS @Rules, visit here for more information.
CSS Variables (Custom Properties)
CSS variables, frequently referred to as custom properties, serve as a useful tool for storing reusable values within stylesheets. They are defined with the -- prefix and can be utilized throughout the entire stylesheet, providing enhanced flexibility and consistency.
Benefits of CSS Variables
Reusability
CSS variables allow developers to define values such as colors, font sizes, or spacing no matter where in the stylesheet they are needed. This significantly reduces redundancy and improves maintainability.
Example:
--primary-color: #3498db; /* Define a primary color variable */
.header {
background-color: var(--primary-color); /* Use the variable */
}
Consistency
By using the same variable throughout a stylesheet, developers can ensure uniformity in design elements, making it easy to maintain a consistent visual style.
Example:
--font-size: 16px; /* Define font size variable */
body {
font-size: var(--font-size); /* Apply font size consistently */
}
Ease of Global Changes
When a CSS variable is changed, all instances of that variable are updated simultaneously, simplifying the process of making global design adjustments.
Example:
--spacing: 10px; /* Define spacing variable */
.container {
padding: var(--spacing); /* Use variable for padding */
}
Type-Specific Custom Properties
With the introduction of the @property rule in CSS, developers can define custom properties with specific types and constraints, enhancing the functionality of CSS variables.
Example:
@property --border-radius {
syntax: "<length>";
inherits: true;
}
Thank you so much for being a part of this journey with me, your support means everything! Your enthusiasm inspires me, and I wholeheartedly encourage you to explore and immerse yourself in all the concepts we've covered. Remember, practice makes perfect, so keep experimenting and honing your skills!
I’m eager to hear what you think! Please share your thoughts and feedback in the comments section below let’s spark a conversation!
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!
Subscribe to my newsletter
Read articles from Ikoh Sylva directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Ikoh Sylva
Ikoh Sylva
I'm a Mobile and African Tech Enthusiast with a large focus on Cloud Technology (AWS)