CSS: Italic font
Italic text is often used to emphasize quotations or terms. In contrast to changing thickness, italics allow you to emphasize a section of the text, but not highlight it so that it is immediately more conspicuous.
To change the font style, use the font-style property, which can take one of these values:
normal- normal text output.italic- italic styleoblique- italic style
<p>Text with normal font style</p>
<p class="italic">Text with italic font</p>
<p class="oblique">Text with oblique font</p>
Note that the text with a value of italic and text with the value set to oblique may look exactly the same. So what's the point here? The italic value looks for a special italic version of the font, while oblique merely systematically tilts the characters in the text. Not all fonts have a separate version for italic, so visually, both values will look the same.
Use italic to create italics - this is the most common option
<p class="italic">Italic text</p>.italic {
font-style: italic;
}
Instructions
Add a paragraph to the editor with the class set to italic-type and set the font to oblique. Add styles to the <style> tag
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
CSS: Italic font
Italic text is often used to emphasize quotations or terms. In contrast to changing thickness, italics allow you to emphasize a section of the text, but not highlight it so that it is immediately more conspicuous.
To change the font style, use the font-style property, which can take one of these values:
normal- normal text output.italic- italic styleoblique- italic style
<p>Text with normal font style</p>
<p class="italic">Text with italic font</p>
<p class="oblique">Text with oblique font</p>
Note that the text with a value of italic and text with the value set to oblique may look exactly the same. So what's the point here? The italic value looks for a special italic version of the font, while oblique merely systematically tilts the characters in the text. Not all fonts have a separate version for italic, so visually, both values will look the same.
Use italic to create italics - this is the most common option
<p class="italic">Italic text</p>.italic {
font-style: italic;
}
Instructions
Add a paragraph to the editor with the class set to italic-type and set the font to oblique. Add styles to the <style> tag
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
Your exercise will be checked with these tests:
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'p');
expect(element).to.have.class('italic-type');
const style = getComputedStyle(element);
expect(style).to.have.property('font-style', 'oblique');
});Teacher's solution will be available in:
20:00
