css custom properties variables
play

CSS Custom Properties (variables) Joan Boone jpboone@email.unc.edu - PowerPoint PPT Presentation

Nov 02, 2023 •159 likes •222 views

INLS 572 Web Development CSS Custom Properties (variables) Joan Boone jpboone@email.unc.edu Slide 1 When CSS Custom Properties can be useful Purple, gold, red, dark teal, and green are used throughout the Weaver Street Market website

  1. INLS 572 Web Development CSS Custom Properties (variables) Joan Boone jpboone@email.unc.edu Slide 1

  2. When CSS Custom Properties can be useful Purple, gold, red, dark teal, and green are used throughout the Weaver Street Market website • Large websites often have lengthy style sheets with many duplicate values • For example, the color scheme may reuse three or four colors throughout the site • Changing this data can be difficult and error- prone since it is scattered throughout the style sheet(s). Slide 2

  3. CSS Custom Properties (or variables) CSS variables can be used to define a specific value that can then be reused throughout your web page Syntax Define a variable: :root {--heading-color: sienna;} • Use the variable: h2 {color: var(--heading-color);} • References  w3schools: CSS Variables  MDN: Using CSS custom properties (variables)  W3C: CSS Custom Properties (Candidate Recommendation, 2015)  W3C: CSS Custom Properties (Editor's Draft, 2020)  Caniuse: Browser support for CSS Variables NOTE: CSS Variables are not well-supported by CSS Validation Service Slide 3

  4. Using CSS Custom Properties Define variables :root { --main-bg-color: #75cdcb; --heading-color: gold; --text-color: #22474f; } Use the variables Click here to view background-color: var(--main-bg-color); in CodePen color: var(--heading-color); color: var(--text-color); nc-national-parks-CSS-variables.html Slide 4

  5. CSS Custom Properties: Use Cases • CSS Variables explained with 5 examples • CSS-Tricks: Patterns for Practical CSS Custom Properties Use • Website theme switching...  Smashing: How to Configure Application Color Schemes With CSS Custom Properties  How to create better themes with CSS variables  CSS Only Theme Switcher Slide 5

Recommend

CSS CUSTOM PROPERTIES (VARIABLES) What CSS Variables are? CSS variables are entities defined by

CSS CUSTOM PROPERTIES (VARIABLES) What CSS Variables are? CSS variables are entities defined by

CSS CUSTOM PROPERTIES (VARIABLES) What CSS Variables are? CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. How to use a variable? --my-variable var(--my-variable); BENEFITS

453 views • 9 slides
Job Costs Every job is custom quoted because variables such as actual electricity usage, roof

Job Costs Every job is custom quoted because variables such as actual electricity usage, roof

Job Costs Every job is custom quoted because variables such as actual electricity usage, roof direction, roof pitch, shade, etc are factored to determine the production of the array GSS has worked with our distributors to be able to provide

463 views • 6 slides
CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM

CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM

CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS CUSTOM BOOTHS Ana Prodan Senior Project Manager

215 views • 17 slides
EFFECTS OF POLYMERIZATION PROCESS VARIABLES ON THE PROPERTIES OF SUSPENSION POLYMERIZED TONER

EFFECTS OF POLYMERIZATION PROCESS VARIABLES ON THE PROPERTIES OF SUSPENSION POLYMERIZED TONER

18 TH INTERNATIONAL CONFERENCE ON COMPOSITE MATERIALS EFFECTS OF POLYMERIZATION PROCESS VARIABLES ON THE PROPERTIES OF SUSPENSION POLYMERIZED TONER Junki Park 1 , Sungho Ahn 1 , Jaegoang Yoo 2 , Deogeung Kim 2 , Dae Su Kim 1 * 1 Department of

287 views • 4 slides
L3: CSS Basics Web Engineering 188.951 2VU SS20 Jrgen Cito L3: CSS Basics Introducing

L3: CSS Basics Web Engineering 188.951 2VU SS20 Jrgen Cito L3: CSS Basics Introducing

L3: CSS Basics Web Engineering 188.951 2VU SS20 Jrgen Cito L3: CSS Basics Introducing style and stylesheets CSS3 Selectors Box-model Units Custom Properties (CSS Variables) Learning Goals

705 views • 15 slides
Closures & Scoping Variables Parameters Local variables Free variables

Closures & Scoping Variables Parameters Local variables Free variables

CS152 Programming Language Paradigms Prof. Tom Austin, Fall 2016 Closures & Scoping Variables Parameters Local variables Free variables Variables not defined in the current scope e.g. global variables #!/bin/bash Is x

569 views • 13 slides
Axiomatic semantics Pre- and post conditions We use program variables (e.g. x , y ), and

Axiomatic semantics Pre- and post conditions We use program variables (e.g. x , y ), and

Axiomatic semantics Pre- and post conditions We use program variables (e.g. x , y ), and Proofs based on semantics are too detailed logical variables (e.g. n ) Restriction to certain kinds of properties partial correctness Example:

283 views • 6 slides
Electronic Packaging Custom Metal Fabrication Custom Metal Fabrication Custom Metal Fabrication

Electronic Packaging Custom Metal Fabrication Custom Metal Fabrication Custom Metal Fabrication

Electronic Packaging Custom Metal Fabrication Custom Metal Fabrication Custom Metal Fabrication Custom Metal Fabrication Custom Metal Fabrication Machining Castings Extrusions Metal Injection Molding Custom Metal Fabrication Custom Metal

145 views • 11 slides
CAE Custom Tools Introduction CAE Custom Tools Services I. Customization of STAR-CCM+ based on

CAE Custom Tools Introduction CAE Custom Tools Services I. Customization of STAR-CCM+ based on

CAE Custom Tools Introduction CAE Custom Tools Services I. Customization of STAR-CCM+ based on client needs. Conversion of standard works to automation. Creation of custom workflows to reduce errors/decrease turn around time.

476 views • 37 slides
Estimation Theory Overview Introduction Up until now we have defined and discussed properties

Estimation Theory Overview Introduction Up until now we have defined and discussed properties

Estimation Theory Overview Introduction Up until now we have defined and discussed properties of random Properties variables and processes Bias, Variance, and Mean Square Error In each case we started with some known property (e.g.

570 views • 7 slides
Estimation Theory Overview Introduction Up until now we have defined and discussed properties

Estimation Theory Overview Introduction Up until now we have defined and discussed properties

Estimation Theory Overview Introduction Up until now we have defined and discussed properties of random Properties variables and processes Bias, Variance, and Mean Square Error In each case we started with some known property (e.g.

466 views • 14 slides
Liprista countertop custom lipstick maker 16 ? The problem Custom lipstick services =

Liprista countertop custom lipstick maker 16 ? The problem Custom lipstick services =

ORANGE A Liprista countertop custom lipstick maker 16 ? The problem Custom lipstick services = Customers want lipstick that complement their skin tones high manual labor for beauticians 17 ? Current custom lipstick service

844 views • 10 slides
YCL Week 3 Lets talk about variables! Variables Variables are containers for data. Variables

YCL Week 3 Lets talk about variables! Variables Variables are containers for data. Variables

YCL Week 3 Lets talk about variables! Variables Variables are containers for data. Variables have two parts: a name and a value, which is of a certain data type. A variables value is usually assigned to it using an equal sign. x = 5

171 views • 15 slides
Contemporary Projects Custom Bas Relief Deep Rich Gold gilded paper Custom Plum Blossom Custom

Contemporary Projects Custom Bas Relief Deep Rich Gold gilded paper Custom Plum Blossom Custom

Contemporary Projects Custom Bas Relief Deep Rich Gold gilded paper Custom Plum Blossom Custom Grey slub silk Flamingos design Flamingo design colours on Sterling Silver gilded paper Kelly Wearstlers Stripes design Custom design colours

470 views • 45 slides
Available post processors Common and uncommon settings Tool setup and variables

Available post processors Common and uncommon settings Tool setup and variables

Discuss preliminary machine setup Available post processors Common and uncommon settings Tool setup and variables Reviewing and testing NC files Custom NC File->Setup->Installed Machines Multiple types of

453 views • 34 slides
THE FINEST HOMES DESERVE www.SabinaKier.com THE FINEST MARKETING. G oinG to the ends of the earth

THE FINEST HOMES DESERVE www.SabinaKier.com THE FINEST MARKETING. G oinG to the ends of the earth

839 DIAMOND RIDGE CIR PRESTIGE REAL ESTATE MARKETING PLAN 839 Diamond Ridge Circle Magnificent Custom Estate 839 Diamond Ridge Circle Magnificent Custom Estate Sabina Kier Cherry Creek Properties, LLC phone: (303) 638-8509 contact |

166 views • 12 slides
Runtime - Variables Storage and Access of Variables Three types of data memory (variables)

Runtime - Variables Storage and Access of Variables Three types of data memory (variables)

Todays Topic Runtime - Variables Storage and Access of Variables Three types of data memory (variables) Globals , locals , and dynamic/heap (new) Focus on first two for now How does compiler manage allocation of, reading of, and

565 views • 10 slides
Computational Higher Inductive Types Computing with Custom Equalities Jason Gross jgross@mit.edu

Computational Higher Inductive Types Computing with Custom Equalities Jason Gross jgross@mit.edu

Computational Higher Inductive Types Computing with Custom Equalities Jason Gross jgross@mit.edu MIT CSAIL Student Workshop April 10, 2014 Properties of Equality Warm Up: Linked Lists Example: Unordered Sets Canonical Inhabitants Higher

362 views • 10 slides
Computational Higher Inductive Types Computing with Custom Equalities Jason Gross jgross@mit.edu

Computational Higher Inductive Types Computing with Custom Equalities Jason Gross jgross@mit.edu

Computational Higher Inductive Types Computing with Custom Equalities Jason Gross jgross@mit.edu MIT CSAIL Student Workshop January 22, 2014 Properties of Equality Warm Up: Linked Lists Example: Unordered Sets Canonical Inhabitants Higher

482 views • 46 slides
Enhance your envelopes with custom printing. 1,2,3, and 4-Color offset. 1-6 color flexo or 4-

Enhance your envelopes with custom printing. 1,2,3, and 4-Color offset. 1-6 color flexo or 4-

Enhance your envelopes with custom printing. 1,2,3, and 4-Color offset. 1-6 color flexo or 4- color Digital. Call for pricing 219-730- 1571 Our Goal It's fast and simple to order custom-sized, custom-printed, or large bulk quantities of

329 views • 4 slides
A New Age of Innovation in Plastics Custom Polyolefins by Molecular Design: Dr. Jim Stevens

A New Age of Innovation in Plastics Custom Polyolefins by Molecular Design: Dr. Jim Stevens

Custom Polyolefins A New Age of Innovation in Plastics Custom Polyolefins by Molecular Design: Dr. Jim Stevens Research Fellow The Dow Chemical Company JCS 12/02/2008 Page 1 Custom Polyolefins Polyethylene is Everywhere Global demand

685 views • 11 slides
Topic 15 Maximum Likelihood Estimation Examples and Asymptotic Properties 1 / 14 Normal Random

Topic 15 Maximum Likelihood Estimation Examples and Asymptotic Properties 1 / 14 Normal Random

Normal Random Variables Mark and Recapture Linear Regression Asymptotic Properties Topic 15 Maximum Likelihood Estimation Examples and Asymptotic Properties 1 / 14 Normal Random Variables Mark and Recapture Linear Regression Asymptotic

795 views • 14 slides
Control Charts for Variables Terminology Variables refers to quantitative variables, like

Control Charts for Variables Terminology Variables refers to quantitative variables, like

ST 435/535 Statistical Methods for Quality and Productivity Improvement / Statistical Process Control Control Charts for Variables Terminology Variables refers to quantitative variables, like physical dimensions, as opposed to

264 views • 12 slides
Variables in C++ The variable C++ Variables Kinds of Variables Memory storage

Variables in C++ The variable C++ Variables Kinds of Variables Memory storage

Variables in C++ The variable C++ Variables Kinds of Variables Memory storage Variable qualifiers The variable The variable A variable declaration is a request for space Basic data types in memory int , short,

239 views • 6 slides

More recommend