CSS: Classes
The main solution for styling a particular part of the page is to use classes. They allow us to set a style we need only for the elements that have the required class satisfied, rather than all of them.
To specify a style for a class in CSS, we use the selector `.name-class'. Note the dot, this is how the browser understands that this style is specified for the class.
<p class="paragraph">
The text of our paragraph.
It's the paragraph class in CSS that
will set properties for this block of text.
</p>.paragraph {
color: #333333;
/*
The color property sets the color of the text.
In this case, it is gray with a value of #333333
*/
}Since there can be many classes with the same name on the page, this rule will work for all elements where the class attribute is paragraph
Instructions
In the editor, add a paragraph with the class set to news and specify a text color of #553333 for it. Add styles with 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: Classes
The main solution for styling a particular part of the page is to use classes. They allow us to set a style we need only for the elements that have the required class satisfied, rather than all of them.
To specify a style for a class in CSS, we use the selector `.name-class'. Note the dot, this is how the browser understands that this style is specified for the class.
<p class="paragraph">
The text of our paragraph.
It's the paragraph class in CSS that
will set properties for this block of text.
</p>.paragraph {
color: #333333;
/*
The color property sets the color of the text.
In this case, it is gray with a value of #333333
*/
}Since there can be many classes with the same name on the page, this rule will work for all elements where the class attribute is paragraph
Instructions
In the editor, add a paragraph with the class set to news and specify a text color of #553333 for it. Add styles with 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('news');
const style = getComputedStyle(element);
// NOTE: Почему-то тест с #55333 значением не работает и требуется rgb
// AssertionError: expected { Object (0, 1, ...) } to have property 'color' of '#553333', but got 'rgb(85, 51, 51)'
expect(style).to.have.property('color', 'rgb(85, 51, 51)');
});Teacher's solution will be available in:
20:00
