Bird
Raised Fist0
CSSmarkup~5 mins

Font style 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 style of the font, such as making it italic or normal?
The font-style property is used to change the style of the font. Common values are normal, italic, and oblique.
Click to reveal answer
intermediate
What is the difference between italic and oblique in font-style?
italic uses a specially designed font style that slants the letters with a unique shape, while oblique simply slants the normal font without changing the letter shapes.
Click to reveal answer
beginner
How do you make text normal (not italic or oblique) using CSS?
Use font-style: normal; to make text appear with the default upright style.
Click to reveal answer
beginner
Can you apply font-style to any HTML element?
Yes, font-style can be applied to any element that contains text, such as <p>, <h1>, <span>, etc.
Click to reveal answer
beginner
What is the default value of the font-style property?
The default value is normal, meaning text is shown without any slant or special style.
Click to reveal answer
Which CSS property changes the font style to italic?
Afont-variant
Bfont-weight
Ctext-decoration
Dfont-style
What value of font-style makes text slanted but keeps the original letter shapes?
Anormal
Bitalic
Coblique
Dbold
If you want text to appear upright and not slanted, which font-style value do you use?
Anormal
Boblique
Citalic
Dunderline
Can font-style be applied to a <span> element?
AYes, because <code>&lt;span&gt;</code> can contain text
BNo, only block elements can have font styles
CNo, <code>font-style</code> only works on headings
DYes, but only if inside a <code>&lt;div&gt;</code>
What is the default font style for most browsers?
Aitalic
Bnormal
Coblique
Dbold
Explain how the CSS font-style property affects text appearance and name its common values.
Think about how text can look normal, slanted, or specially styled.
You got /5 concepts.
    Describe the difference between italic and oblique font styles in CSS.
    One changes letter shapes, the other just tilts them.
    You got /3 concepts.

      Practice

      (1/5)
      1. What does the CSS property font-style do to text?
      easy
      A. It changes the text to normal, italic, or oblique style.
      B. It changes the text color.
      C. It changes the text size.
      D. It changes the text alignment.

      Solution

      1. Step 1: Understand the purpose of font-style

        The font-style property controls the style of the font, specifically whether it is normal, italic, or oblique.

      2. Step 2: Compare options with the property function

        Only It changes the text to normal, italic, or oblique style. correctly describes changing text to normal, italic, or oblique styles.

      3. Final Answer:

        It changes the text to normal, italic, or oblique style. -> Option A

      4. Quick Check:

        font-style = normal, italic, oblique [OK]
      Hint: Remember font-style changes slant, not color or size [OK]
      Common Mistakes:
      • Confusing font-style with color or size properties
      • Thinking font-style changes alignment
      • Mixing up font-style with font-weight
      2. Which of the following is the correct CSS syntax to make text italic using font-style?
      easy
      A. font-style: underline;
      B. font-style: bold;
      C. font-style: oblique;
      D. font-style: italic;

      Solution

      1. Step 1: Identify valid values for font-style

        The valid values are normal, italic, and oblique. bold and underline are not valid for font-style.

      2. Step 2: Match the correct syntax for italic

        The correct syntax to make text italic is font-style: italic;.

      3. Final Answer:

        font-style: italic; -> Option D

      4. Quick Check:

        font-style: italic; is correct [OK]
      Hint: Italic style uses 'italic' keyword exactly [OK]
      Common Mistakes:
      • Using 'bold' or 'underline' with font-style
      • Missing the colon or semicolon
      • Confusing font-style with font-weight or text-decoration
      3. What will be the visual result of this CSS code?
      p { font-style: oblique; }
      medium
      A. The paragraph text will be hidden.
      B. The paragraph text will be bold and underlined.
      C. The paragraph text will be slanted slightly to the right.
      D. The paragraph text will be normal with no slant.

      Solution

      1. Step 1: Understand the effect of font-style: oblique;

        The oblique style makes text slanted, similar to italic but usually less angled.

      2. Step 2: Compare options with expected visual output

        Only The paragraph text will be slanted slightly to the right. describes the text slanting to the right, which matches the oblique style effect.

      3. Final Answer:

        The paragraph text will be slanted slightly to the right. -> Option C

      4. Quick Check:

        font-style: oblique; = slanted text [OK]
      Hint: Oblique means slanted text, not bold or hidden [OK]
      Common Mistakes:
      • Confusing oblique with bold or underline
      • Expecting no change in text style
      • Thinking oblique hides text
      4. Identify the error in this CSS snippet:
      h1 { font-style: italic oblique; }
      medium
      A. Multiple values are not allowed for font-style.
      B. The property name is incorrect.
      C. The semicolon is missing.
      D. The value 'italic oblique' is valid and correct.

      Solution

      1. Step 1: Check allowed values for font-style

        The font-style property accepts only one value at a time: normal, italic, or oblique.

      2. Step 2: Analyze the given value

        The value italic oblique is two values combined, which is invalid syntax.

      3. Final Answer:

        Multiple values are not allowed for font-style. -> Option A

      4. Quick Check:

        font-style accepts single value only [OK]
      Hint: font-style takes only one value like italic or oblique [OK]
      Common Mistakes:
      • Using multiple values separated by space
      • Misspelling property name
      • Omitting semicolon but still expecting valid CSS
      5. You want to style a paragraph so that normal text is shown, but when hovered, the text becomes italic. Which CSS code correctly achieves this?
      hard
      A. p { font-style: italic; } p:hover { font-style: normal; }
      B. p { font-style: normal; } p:hover { font-style: italic; }
      C. p { font-style: oblique; } p:hover { font-style: bold; }
      D. p { font-style: normal; } p:hover { font-weight: italic; }

      Solution

      1. Step 1: Set default font style to normal

        The paragraph should start with font-style: normal; to show normal text.

      2. Step 2: Change font style on hover to italic

        Using the hover selector, set font-style: italic; to make text italic when hovered.

      3. Step 3: Verify other options

        Other options either reverse the effect (starting italic and changing to normal on hover), use invalid values like bold for font-style, or misuse font-weight for italic effect.

      4. Final Answer:

        p { font-style: normal; } p:hover { font-style: italic; } -> Option B

      5. Quick Check:

        Hover changes font-style to italic [OK]
      Hint: Use :hover with font-style: italic for hover effect [OK]
      Common Mistakes:
      • Using font-weight instead of font-style for italic
      • Reversing normal and italic styles
      • Using invalid values like 'bold' for font-style