CSS Advanced Background Properties

Property Description
background A shorthand property for setting all the background properties in one declaration
background-clip Specifies the painting area of the background
background-image Specifies one or more background images for an element
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)

CSS Multiple Backgrounds

  • CSS allows you to add multiple background images for an element, through the background-image property.
  • The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
  • EX: 
                      
    #example1 {
      background-image: url(img_flwr.gif), url(paper.gif);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
    }
    OR: 
                      
    #example1 {
      background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    }

CSS Background Size

  • The CSS background-size property allows you to specify the size of background images.
  • The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
  • The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.
  • The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.
  • EX1: 
                  
    #div1 {
      background: url(img_flower.jpg);
      background-size: 100px 80px;
      background-repeat: no-repeat;
    }
    EX2: 
                  
    #div2 {
      background: url(img_flower.jpg);
      background-size: contain;
      background-repeat: no-repeat;
    }
    EX3: 
                  
    #div3 {
      background: url(img_flower.jpg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    EX4: 
                  
    #div4 {
      background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat;
      background-size: 50px, 130px, auto;
    }

CSS background-clip Property

  • The CSS background-clip property specifies the painting area of the background.

  • The property takes three different values:

    • border-box - (default) the background is painted to the outside edge of the border
    • padding-box - the background is painted to the outside edge of the padding
    • content-box - the background is painted within the content box
  • EX: 
                  
    #example1 {
      border: 10px dotted black;
      padding: 35px;
      background: yellow;
      background-clip: content-box;
    }

CSS 2D Transforms

  • CSS transforms allow you to move, rotate, scale, and skew elements.
  • With the CSS transform property you can use the following 2D transformation methods:
    • translate()
    • rotate()
    • scaleX()
    • scaleY()
    • scale()
    • skewX()
    • skewY()
    • skew()
    • matrix()

  • 2D transformation methods

    Method Description Example
    translate() The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). 
                            
  // div moves 50 pixels to the right,
  and 100 pixels down from its position
  div {
    transform: translate(50px, 100px);
  }
    rotate() The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
    Using negative values will rotate the element counter-clockwise. 
                            
  // div rotates clockwise with 20 degrees
  div {
    transform: rotate(20deg);
  }
    scale() The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). 
                            
  //increases div to be two times of its width,
  and three times of its height.
  div {
    transform: scale(2, 3);
  }
    scaleX() The scaleX() method increases or decreases the width of an element. 
                            
  // increases div to be two times of its width
  div {
    transform: scaleX(2);
  }
    scaleY() The scaleY() method increases or decreases the height of an element. 
                            
  // decreases div to be half of its height
  div {
    transform: scaleY(0.5);
  }
    skewX() The skewX() method skews an element along the X-axis by the given angle. 
                            
  // skews div 20 degrees along the X-axis
  div {
    transform: skewX(20deg);
  }
    skewY() The skewY() method skews an element along the Y-axis by the given angle. 
                            
  // skews div 20 degrees along the Y-axis
  div {
    transform: skewY(20deg);
  }
    skew() The skew() method skews an element along the X and Y-axis by the given angles. 
                            
  // skews div 20 degrees along the X-axis,
  and 10 degrees along the Y-axis
  div {
    transform: skew(20deg, 10deg);
  }
    matrix()
    • The matrix() method combines all the 2D transform methods into one.
    • The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
    • The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) 
                            
  div {
    transform: matrix(1, -0.3, 0, 1, 0, 0);
  }

CSS 3D Transforms

  • With the CSS transform property you can use the following 3D transformation methods:
    • rotateX()
    • rotateY()
    • rotateZ()

  • CSS 3D Transforms Methods

    Method Description Example
    rotateX() The rotateX() method rotates an element around its X-axis at a given degree. 
                            
  #myDiv {
    transform: rotateX(150deg);
  }
    rotateY() The rotateY() method rotates an element around its Y-axis at a given degree. 
                            
  #myDiv {
    transform: rotateY(150deg);
  }
    rotateZ() The rotateZ() method rotates an element around its Z-axis at a given degree. 
                            
  #myDiv {
    transform: rotateZ(90deg);
  }

CSS Transform Origin

  • The transform-origin property allows you to change the position of transformed elements.
  • 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
  • This property must be used together with the transform property.
  • Syntax : transform-origin: x-axis y-axis z-axis|initial|inherit;

  • Property Values

    Property Value Description
    x-axis Defines where the view is placed at the x-axis. Possible values:
    • left
    • center
    • right
    • length
    • %
    y-axis Defines where the view is placed at the y-axis. Possible values:
    • top
    • center
    • bottom
    • length
    • %
    z-axis Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
    • length
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  div {
    transform: rotate(45deg);
    transform-origin: 20% 40%;
  }

CSS Transform Style

  • The transform-style property specifies how nested elements are rendered in 3D space.
  • This property must be used together with the transform property.
  • Syntax : transform-style: flat|preserve-3d|initial|inherit;

  • Property Values

    Property Value Description
    flat Specifies that child elements will NOT preserve its 3D position. This is default
    preserve-3d Specifies that child elements will preserve its 3D position
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  div {
    transform: rotateY(60deg);
    transform-style: preserve-3d;
  }

CSS Transitions

  • CSS transitions allows you to change property values smoothly, over a given duration.
  • CSS Transitions properties:
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
  • To create a transition effect, you must specify two things:
    • the CSS property you want to add an effect to
    • the duration of the effect
  • If the duration part is not specified, the transition will have no effect, because the default value is 0.
  • EX:
    <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } </style> </head> <body> <p>Hover over the div element below, to see the transition effect:</p> <div></div> </body> </html>
  • Syntax : transition: property duration timing-function delay|initial|inherit;

  • Property Values

    Property Value Description
    transition-property Specifies the name of the CSS property the transition effect is for
    transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
    transition-timing-function Specifies the speed curve of the transition effect
    transition-delay Defines when the transition effect will start
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.

CSS transition-delay Property

  • The transition-delay property specifies when the transition effect will start.
  • The transition-delay value is defined in seconds (s) or milliseconds (ms).
  • Syntax : transition-delay: time|initial|inherit;

  • Property Values

    Property Value Description
    time Specifies the number of seconds or milliseconds to wait before the transition effect will start
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  div {
    transition-delay: 2s;
  }

CSS transition-duration Property

  • The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
  • Syntax : transition-duration: time|initial|inherit;

  • Property Values

    Property Value Description
    time Specifies how many seconds or milliseconds a transition effect takes to complete. Default value is 0s, meaning there will be no effect
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  div {
    transition-duration: 5s;
  }

CSS transition-property Property

  • The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
  • A transition effect could typically occur when a user hover over an element.
  • Syntax : transition-property: none|all|property|initial|inherit;

  • Property Values

    Property Value Description
    none No property will get a transition effect
    all Default value. All properties will get a transition effect
    property Defines a comma separated list of CSS property names the transition effect is for
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  div {
    transition-property: width, height;
  }
  div:hover {
    width: 300px;
    height: 300px;
  }

CSS transition-timing-function Property

  • The transition-timing-function property specifies the speed curve of the transition effect.
  • This property allows a transition effect to change speed over its duration.
  • Syntax : transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

  • Property Values

    Property Value Description
    ease Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
    linear Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
    ease-in Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
    ease-out Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
    ease-in-out Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
    step-start Equivalent to steps(1, start)
    step-end Equivalent to steps(1, end)
    steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
    cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX:

    Here are five different div elements with five different values

    #div1 {transition-timing-function: linear;} #div2 {transition-timing-function: ease;} #div3 {transition-timing-function: ease-in;} #div4 {transition-timing-function: ease-out;} #div5 {transition-timing-function: ease-in-out;}

    Same as the example above, but the speed curves are specified with the cubic-bezier function.

    #div1 {transition-timing-function: cubic-bezier(0,0,1,1);} #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

CSS Animations

  • CSS allows animation of HTML elements without using JavaScript or Flash.

  • CSS Animations properties:

    • @keyframes
    • animation-name
    • animation-duration
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-timing-function
    • animation-fill-mode
    • animation
  • An animation lets an element gradually change from one style to another.
  • You can change as many CSS properties you want, as many times as you want.
  • To use CSS animation, you must first specify some keyframes for the animation.
  • Keyframes hold what styles the element will have at certain times.
  • When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
  • To get an animation to work, you must bind the animation to an element.
  • The following example binds the "example" animation to the div element. The animation will last for 4 seconds, and it will gradually change the background-color of the div element from "red" to "yellow":
    <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 6s; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } </style> </head> <body> <div></div> </body> </html>

CSS animation

  • The animation property is a shorthand property for:
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state
  • Syntax : animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • Property Values

    Value Description
    animation-name Specifies the name of the keyframe you want to bind to the selector
    animation-duration Specifies how many seconds or milliseconds an animation takes to complete
    animation-timing-function Specifies the speed curve of the animation
    animation-delay Specifies a delay before the animation will start
    animation-iteration-count Specifies how many times an animation should be played
    animation-direction Specifies whether or not the animation should play in reverse on alternate cycles
    animation-fill-mode Specifies what values are applied by the animation outside the time it is executing
    animation-play-state Specifies whether the animation is running or paused
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  div {
    animation: mymove 5s infinite;
  }

CSS animation-name

  • The animation-name property specifies a name for the @keyframes animation.
  • Syntax : animation-name: keyframename|none|initial|inherit;

  • Property Values

    Value Description
    keyframename Specifies the name of the keyframe you want to bind to the selector
    none Default value. Specifies that there will be no animation (can be used to override animations coming from the cascade)
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  // Specify a name for the @keyframes animation
  div {
    animation-name: myanimation;
  }

CSS @keyframes Rule

  • The @keyframes rule specifies the animation code.
  • The animation is created by gradually changing from one set of CSS styles to another.
  • During the animation, you can change the set of CSS styles many times.
  • Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
  • Syntax : @keyframes animationname {keyframes-selector {css-styles;}}

  • Property Values

    Value Description
    animationname Required. Defines the name of the animation.
    keyframes-selector Required. Percentage of the animation duration.

    Legal values:

    0-100%
    from (same as 0%)
    to (same as 100%)

    Note: You can have many keyframes-selectors in one animation.

    css-styles Required. One or more legal CSS style properties
  • EX: 
                  
  @keyframes mymove {
    0%   {top: 0px; left: 0px; background: red;}
    25%  {top: 0px; left: 100px; background: blue;}
    50%  {top: 100px; left: 100px; background: yellow;}
    75%  {top: 100px; left: 0px; background: green;}
    100% {top: 0px; left: 0px; background: red;}
  }

CSS animation-delay

  • The animation-delay property specifies a delay for the start of an animation.
  • The animation-delay value is defined in seconds (s) or milliseconds (ms).
  • Syntax : animation-delay: time|initial|inherit;

  • Property Values

    Value Description
    time Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds.
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit
  • EX: 
                  
  div {
    animation-delay: 2s;
  }

CSS animation-direction

  • The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
  • Syntax : animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

  • Property Values

    Value Description
    normal Default value. The animation is played as normal (forwards)
    reverse The animation is played in reverse direction (backwards)
    alternate The animation is played forwards first, then backwards
    alternate-reverse The animation is played backwards first, then forwards
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  // Play the animation backwards first, then forwards
  div {
    animation-direction: alternate-reverse;
  }
  // Play the animation backwards
  div {
    animation-direction: reverse;
  }

CSS animation-duration

  • The animation-duration property defines how long an animation should take to complete one cycle.
  • Syntax : animation-duration: time|initial|inherit;

  • Property Values

    Value Description
    time Specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  // Specify that the animation should complete one cycle in 3 seconds
  div {
    animation-duration: 3s;
  }

CSS animation-fill-mode

  • The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
  • CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
  • Syntax : animation-fill-mode: none|forwards|backwards|both|initial|inherit;

  • Property Values

    Value Description
    none Default value. Animation will not apply any styles to the element before or after it is executing
    forwards The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
    backwards The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
    both The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  // Let div retain the style values from the last keyframe when the animation ends:
  div {
    animation-fill-mode: forwards;
  }
  // Let div get the style values set by the first keyframe before the animation starts :
  div {
    animation-fill-mode: backwards;
  }
  // Let div get the style values set by the first keyframe before the animation starts,
  and retain the style values from the last keyframe when the animation ends:
  div {
    animation-fill-mode: both;
  }

CSS animation-iteration-count

  • The animation-iteration-count property specifies the number of times an animation should be played.
  • Syntax : animation-iteration-count: number|infinite|initial|inherit;

  • Property Values

    Value Description
    number A number that defines how many times an animation should be played. Default value is 1
    infinite Specifies that the animation should be played infinite times (for ever)
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  // Play the animation two times
  div {
    animation-iteration-count: 2;
  }
  // Play the animation forever
  div {
    animation-iteration-count: infinite;
  }

CSS animation-play-state

  • The animation-play-state property specifies whether the animation is running or paused.
  • Use this property in a JavaScript to pause an animation in the middle of a cycle.
  • Syntax : animation-play-state: paused|running|initial|inherit;

  • Property Values

    Value Description
    paused Specifies that the animation is paused
    running Default value. Specifies that the animation is running
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX: 
                  
  // Pause an animation
  div {
    animation-play-state: paused;
  }
  // Pause an animation on hover
  div:hover {
    animation-play-state: paused;
  }

CSS animation-timing-function

  • The animation-timing-function specifies the speed curve of an animation.
  • The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.
  • The speed curve is used to make the changes smoothly.
  • Syntax : animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
  • The animation-timing-function uses a mathematical function, called the Cubic Bezier curve, to make the speed curve. You can use your own values in this function, or use one of the pre-defined values.

  • Property Values

    Value Description
    linear The animation has the same speed from start to end
    ease Default value. The animation has a slow start, then fast, before it ends slowly
    ease-in The animation has a slow start
    ease-out The animation has a slow end
    ease-in-out The animation has both a slow start and a slow end
    step-start Equivalent to steps(1, start)
    step-end Equivalent to steps(1, end)
    steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end"
    cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function
    Possible values are numeric values from 0 to 1
    initial Sets this property to its default value.
    inherit Inherits this property from its parent element.
  • EX:
    // Here are five different div elements with five different values #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} // Same as the example above, but the speed curves are defined with the cubic-bezier function #div1 {animation-timing-function: cubic-bezier(0,0,1,1);} #div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Image Filters

  • The CSS filter property adds visual effects (like blur and saturation) to an element.
  • EX:
    <!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: left; max-width: 235px; } .blur {filter: blur(4px);} .brightness {filter: brightness(250%);} .contrast {filter: contrast(180%);} .grayscale {filter: grayscale(100%);} .huerotate {filter: hue-rotate(180deg);} .invert {filter: invert(100%);} .opacity {filter: opacity(50%);} .saturate {filter: saturate(7);} .sepia {filter: sepia(100%);} .shadow {filter: drop-shadow(8px 8px 10px green);} </style> </head> <body> <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> </body> </html>

CSS Image Reflection

  • The box-reflect property is used to create an image reflection.
  • The value of the box-reflect property can be: below, above, left , or right.
  • Examples: 
                  
  // Here we want the reflection below the image
  img {
    -webkit-box-reflect: below;
  }
  // Here we want the reflection below the image, with a 20px offset
  img {
    -webkit-box-reflect: below 20px;
  }
  // Create a fade-out effect on the reflection
  img {
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  }

CSS Variables

  • The var() function is used to insert the value of a CSS variable.
  • CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.
  • A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.
  • syntax : var(--name, value)
  • The variable name must begin with two dashes (--) and it is case sensitive.
  • CSS variables can have a global or local scope.
  • Global variables can be used through the entire document, while local variables can be used only inside the selector where it is declared.
  • To create a variable with global scope, declare it inside the :root selector. The :root selector matches the document's root element.
  • To create a variable with local scope, declare it inside the selector that is going to use it.
  • The following example is equal to the example above, but here we use the var() function.
  • EX: 
                  
  :root {
    --blue: #1e90ff;
    --white: #ffffff;
  }
  body { background-color: var(--blue); }
  h2 { border-bottom: 2px solid var(--blue); }
  .container {
    color: var(--blue);
    background-color: var(--white);
    padding: 15px;
  }
  button {
    background-color: var(--white);
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 5px;
  }
  • Advantages of using var() are:
    • makes the code easier to read (more understandable)
    • makes it much easier to change the color values

  • Overriding Global Variables With Local Variables

    Sometimes we want the variables to change only in a specific section of the page.

    EX: 
                  
  :root {
    --blue: #1e90ff;
    --white: #ffffff;
  }
  button {
    --blue: #0000ff;
    background-color: var(--white);
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 5px;
  }

  • Add a New Local Variable

    If a variable is to be used only one single place, we could also have declared a new local variable. 

                  
  :root {
    --blue: #1e90ff;
    --white: #ffffff;
  }
  button {
    --button-blue: #0000ff;
    background-color: var(--white);
    color: var(--button-blue);
    border: 1px solid var(--button-blue);
    padding: 5px;
  }

  • Using Variables in Media Queries

    Here, we first declare a new local variable named --fontsize for the .container class. We set its value to 25 pixels. Then we use it in the .container class further down. Then, we create a @media rule that says "When the browser's width is 450px or wider, change the --fontsize variable value of the .container class to 50px."

    EX: 
                  
  :root {
    --blue: #1e90ff;
    --white: #ffffff;
  }
  .container {
    --fontsize: 25px;
  }
  body {
    background-color: var(--blue);
  }
  h2 {
    border-bottom: 2px solid var(--blue);
  }
  .container {
    color: var(--blue);
    background-color: var(--white);
    padding: 15px;
    font-size: var(--fontsize);
  }
  @media screen and (min-width: 450px) {
    .container {
      --fontsize: 50px;
    }
  }

Extra Sources

There are more lessons in that chapter but it's your turn to try to find and learn them and here are some examples:

  • Css counters
  • Css object position
  • Css object fit
  • CSS multiple columns
  • Css Grid
  • Css Buttons
  • Css Tooltips
  • Css Dropdowns
  • Css Pagination
  • Css SASS