CSS: Small caps
Small caps are a type of lowercase letter whose size is the same as (or close to) the size of capital letters.
<p>Text typed as plain text</p>
<p class="small-caps">Text with small caps</p>.small-caps {
font-variant: small-caps;
}
This is often used as a stylistic device. But there is also a practical side to small caps: they are commonly used to mark abbreviations, and they are also used in the first lines of a piece of text to make it easier for the reader to get into the text after the title.
To set small caps, use the font-variant property with one of two basic values:
normal- normal writingsmall-caps- small caps
Instructions
Add a paragraph to the editor with the class set to small-capitals and display the text inside as capitals. 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: Small caps
Small caps are a type of lowercase letter whose size is the same as (or close to) the size of capital letters.
<p>Text typed as plain text</p>
<p class="small-caps">Text with small caps</p>.small-caps {
font-variant: small-caps;
}
This is often used as a stylistic device. But there is also a practical side to small caps: they are commonly used to mark abbreviations, and they are also used in the first lines of a piece of text to make it easier for the reader to get into the text after the title.
To set small caps, use the font-variant property with one of two basic values:
normal- normal writingsmall-caps- small caps
Instructions
Add a paragraph to the editor with the class set to small-capitals and display the text inside as capitals. 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('small-capitals');
const style = getComputedStyle(element);
expect(style).to.have.property('font-variant', 'small-caps');
});Teacher's solution will be available in:
20:00
