Bird
Raised Fist0
CSSmarkup~5 mins

Background color in CSS - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Recall & Review
beginner
What CSS property is used to change the background color of an element?
The background-color property is used to set or change the background color of an element.
Click to reveal answer
beginner
How do you set a background color to blue using CSS?
Use background-color: blue; inside a CSS rule to make the background blue.
Click to reveal answer
beginner
Can you use color names, hex codes, and RGB values with background-color?
Yes! You can use color names like red, hex codes like #ff0000, or RGB values like rgb(255, 0, 0) to set background colors.
Click to reveal answer
intermediate
What happens if you set background-color: transparent;?
The background becomes see-through, showing whatever is behind the element.
Click to reveal answer
beginner
Why is it important to consider contrast when choosing a background color?
Good contrast between background and text colors helps people read easily and improves accessibility for everyone.
Click to reveal answer
Which CSS property changes the background color of an element?
Acolor
Bbackground-color
Cfont-color
Dborder-color
How would you write CSS to make the background color red using a hex code?
Abackground-color: #ff0000;
Bcolor: #ff0000;
Cbackground: red;
Dbackground-color: rgb(0,0,255);
What does background-color: transparent; do?
AAdds a border
BSets background to white
CChanges text color
DMakes the background invisible
Which color format is NOT valid for background-color?
Afont(12px)
Brgb(255, 255, 255)
Cblue
D#00ff00
Why should you choose background and text colors with good contrast?
ATo use more colors
BTo slow down the website
CTo make text easier to read
DTo hide the text
Explain how to change the background color of a webpage using CSS.
Think about the CSS property and how you write a rule for the body element.
You got /3 concepts.
    Why is it important to consider accessibility when choosing background colors?
    Think about how colors affect how easy it is to see text.
    You got /3 concepts.

      Practice

      (1/5)
      1. What does the CSS property background-color do?
      easy
      A. It sets the color behind the content of an element.
      B. It changes the text color inside an element.
      C. It adds a border around an element.
      D. It changes the font style of the text.

      Solution

      1. Step 1: Understand the property purpose

        The background-color property sets the color behind the content and padding of an element.

      2. Step 2: Compare with other properties

        Text color is set by color, borders by border, and font style by font-style.

      3. Final Answer:

        It sets the color behind the content of an element. -> Option A

      4. Quick Check:

        Background color = color behind element [OK]
      Hint: Background color paints behind content, not text color [OK]
      Common Mistakes:
      • Confusing background-color with text color
      • Thinking it changes borders
      • Mixing it with font styling
      2. Which of the following is the correct CSS syntax to set a background color to blue?
      easy
      A. background-color: blue;
      B. background: color blue;
      C. color-background: blue;
      D. bg-color: blue;

      Solution

      1. Step 1: Identify correct property name

        The correct CSS property to set background color is background-color.

      2. Step 2: Check syntax format

        The syntax is property: value;, so background-color: blue; is correct.

      3. Final Answer:

        background-color: blue; -> Option A

      4. Quick Check:

        Correct syntax = background-color: value; [OK]
      Hint: Use full property name 'background-color' with colon and semicolon [OK]
      Common Mistakes:
      • Using incorrect property names like bg-color
      • Swapping property and value order
      • Missing semicolon at end
      3. What background color will this CSS produce?
      div {
  background-color: #ff0000;
}
      medium
      A. Green background
      B. Blue background
      C. Red background
      D. No background color

      Solution

      1. Step 1: Understand hex color code

        The hex code #ff0000 means full red, zero green, zero blue.

      2. Step 2: Match hex code to color

        This code produces a bright red color as background.

      3. Final Answer:

        Red background -> Option C

      4. Quick Check:

        #ff0000 = red color [OK]
      Hint: Hex #ff0000 always means red [OK]
      Common Mistakes:
      • Confusing hex codes with other colors
      • Thinking #ff0000 is green or blue
      • Ignoring the # symbol
      4. Find the error in this CSS code that tries to set a yellow background:
      p {
  background-color = yellow;
}
      medium
      A. Missing semicolon after yellow
      B. Using '=' instead of ':' between property and value
      C. Wrong color name, should be 'yellowish'
      D. Property name should be 'bg-color'

      Solution

      1. Step 1: Check property-value separator

        CSS uses colon ':' to separate property and value, not '='.

      2. Step 2: Verify other syntax parts

        Semicolon is present, color name 'yellow' is valid, property name is correct.

      3. Final Answer:

        Using '=' instead of ':' between property and value -> Option B

      4. Quick Check:

        Property and value separated by ':' [OK]
      Hint: Use colon ':' not equal '=' in CSS declarations [OK]
      Common Mistakes:
      • Using '=' instead of ':'
      • Wrong color names
      • Changing property names incorrectly
      5. You want a webpage section to have a light gray background that adjusts well on all screen sizes. Which CSS snippet is best?
      hard
      A. section { background-color: gray; padding: 10px; }
      B. section { background-color: rgb(211,211,211); width: 100px; }
      C. section { background-color: lightgray; height: 100vh; }
      D. section { background-color: #d3d3d3; padding: 1rem; }

      Solution

      1. Step 1: Choose a light gray color

        Both #d3d3d3 and rgb(211,211,211) represent light gray; color names like 'lightgray' also work.

      2. Step 2: Consider responsive design

        Using padding in rem units scales well on different screens; fixed width or height can cause layout issues.

      3. Step 3: Evaluate each option

        section { background-color: #d3d3d3; padding: 1rem; } uses hex color and rem padding, good for responsiveness. section { background-color: rgb(211,211,211); width: 100px; } fixes width to 100px (not responsive). section { background-color: lightgray; height: 100vh; } uses height 100vh which may cause scrolling issues. section { background-color: gray; padding: 10px; } uses 'gray' which is darker and padding in px (less scalable).

      4. Final Answer:

        section { background-color: #d3d3d3; padding: 1rem; } -> Option D

      5. Quick Check:

        Light gray + responsive padding = section { background-color: #d3d3d3; padding: 1rem; } [OK]
      Hint: Use hex or rgb with rem padding for responsive backgrounds [OK]
      Common Mistakes:
      • Using fixed pixel sizes hurting responsiveness
      • Choosing too dark colors for light gray
      • Ignoring padding for spacing