{ "@context": "https://schema.org", "@type": "Organization", "name": "Brainscape", "url": "https://www.brainscape.com/", "logo": "https://www.brainscape.com/pks/images/cms/public-views/shared/Brainscape-logo-c4e172b280b4616f7fda.svg", "sameAs": [ "https://www.facebook.com/Brainscape", "https://x.com/brainscape", "https://www.linkedin.com/company/brainscape", "https://www.instagram.com/brainscape/", "https://www.tiktok.com/@brainscapeu", "https://www.pinterest.com/brainscape/", "https://www.youtube.com/@BrainscapeNY" ], "contactPoint": { "@type": "ContactPoint", "telephone": "(929) 334-4005", "contactType": "customer service", "availableLanguage": ["English"] }, "founder": { "@type": "Person", "name": "Andrew Cohen" }, "description": "Brainscape’s spaced repetition system is proven to DOUBLE learning results! Find, make, and study flashcards online or in our mobile app. Serious learners only.", "address": { "@type": "PostalAddress", "streetAddress": "159 W 25th St, Ste 517", "addressLocality": "New York", "addressRegion": "NY", "postalCode": "10001", "addressCountry": "USA" } }

CSS: Variables Flashcards

(8 cards)

1
Q

What are CSS Custom Properties? (CSS Variables)

A

CSS custom properties, also known as CSS variables, are entities defined by CSS authors that contain specific values to be reused throughout a document. They are a powerful feature that allows for more efficient, maintainable, and flexible stylesheets. Custom properties are particularly useful in creating themeable designs. You can define a set of properties for different themes:
:root {
–bg-color: white;
–text-color: black;
}

.dark-theme {
–bg-color: #333;
–text-color: white;
}

body {
background-color: var(–bg-color);
color: var(–text-color);
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the “@property” Rule?

A

The @property rule is a powerful CSS feature that allows developers to define custom properties with greater control over their behavior, including how they animate and their initial values.
@property –property-name {
syntax: ‘<type>';
inherits: true | false;
initial-value: <value>;
}</value></type>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is “–property-name” in the @property Rule?

A

This is the name of the custom property you’re defining. Like all custom properties, it must start with two dashes. –property-name can be things like <color>, <length>, <number>, <percentage>, or more complex types.</percentage></number></length></color>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the “syntax” in the @property Rule?

A

This defines the type of the property.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is the “inherits” in the @property Rule?

A

This specifies whether the property should inherit its value from its parent element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the “initial-value” in the @property Rule?

A

This sets the default value of the property.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Gradient Example using the @property Rule

A

This example creates a gradient that smoothly animates when the element is hovered over.

<div></div>

@property –gradient-angle {
syntax: “<angle>";
inherits: false;
initial-value: 0deg;
}</angle>

.gradient-box {
width: 100px;
height: 100px;
background: linear-gradient(var(–gradient-angle), red, blue);
transition: –gradient-angle 0.5s;
}

.gradient-box:hover {
–gradient-angle: 90deg;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q
A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly