3 CSS CSS Issues

Think you know CSS? Six months ago, I offered a free test for anyone who thinks too. During this time, more than 3,000 people passed through it. The average score was 55%.

Of course, the mean is not that interesting. More interesting are the questions on which most of the visitors fell asleep. In this article I will talk about three issues that were most often mistaken.

Question 1: What is the best way to set line-height?

This question should be simple for those who are constantly working with texts.

If you want to set double spacing across your entire site, which of the following line-height values ​​is best suited for this purpose?
- 200%;
- 2em;
- 2;
- double;
')
Only 31% answered this question correctly. Stop for a moment and choose the answer for yourself.

First, double is a red herring. I am happy to say that only 9% of people chose it. The remaining three responses were quite popular.

The answer that most people chose was 2em (39%). Indeed, 2em will undoubtedly give you double spacing for the element in which it is applied, but the value of 200% does the same, but only 21% liked this answer!

However, the correct answer is 2 (option # 3) .

This is a lesson I learned a long time ago when I first started learning CSS. Always specify line-height as a dimensionless number ; thus, child elements that use different font-size will inherit this number, rather than a fixed line height.

Let's say the page has a font size of 12pt, but it also contains a header with a font size of 24pt. If you set the line-height: 2em; (or 200%), then you will get a line height of 24 pt (twice the default size) throughout the document. Therefore, the title will be displayed at one interval.

line-height: 2 ; indicates to the browser that it should maintain the ratio of font size and line height of 1: 2, even if the font size changes.

Question 2: Overlapping elements

This question was a bit more complicated. It requires some experience in using dirty tricks.

Which of the following CSS properties, used alone, can cause overlapping elements?
- z-index;
- margin;
- overflow;
- background;

Chose the answer?

Naturally, we can immediately remove the background . Only 2% of test participants indicated it as the correct answer.

Unfortunately, the majority of respondents chose z-index . He was preferred by 46% of people. Perhaps they misunderstood the question or simply do not understand how the z-index works. In itself, this property has no effect, except for it, you will have to specify this property for another element, as well as set the position for each of them. In short, the Z-index allows you to control the order of elements that overlap, but, first of all, they must overlap each other.

Overflow is quite simply excluded from the list of options if you have used this property at least a couple of times. It defines the behavior of content that does not fit inside the container. The behavior of the element depends on the size of the container and the values ​​of other properties. Again, by itself, this property will not lead to overlap. But, anyway, it was chosen by 22%.

As a result, we are left with only one answer, namely “ margin ”. It may seem strange to you that a property that controls offsets from the edge of an element can result in overlapping. The answer is simple: you need to use negative values.

Negative fields are extremely useful for placing HTML elements.

Question 3: Pseudo-elements vs. pseudo-classes

The last question is a little tricky, I admit.

Which of the following effects is realized using pseudo-elements?
- Add to the hyperlink the shadow that appears when hovering.
- Change the color of the checkbox when it is selected.
- Color the odd and even rows of the table in different colors.
- Always display in bold type the first line of a paragraph on an adaptive page.

Three of these effects are achieved using a pseudo-class; only one requires the use of a pseudo-element. Can you tell which one?

A pseudo-class is a specific state in which an element may be. Think of it as a class that automatically applies to an element under certain conditions.

A pseudo-element is part of a document for which CSS allows the use of styles, even though it is not actually an HTML element. This is something like a virtual HTML element ¬– for which you can create styles, although it is not enclosed in HTML tags.

Given this difference, let's try to find the right answer:

Add to the hyperlink the shadow that appears when you hover

A hyperlink is an existing HTML element. Applying styles to it only in a specific situation (when the pointer is above it) means that we use a pseudo-class. A pseudo-class that you could use in this case:: hover.

22% of test participants thought it was a pseudo-element.

Change the color of the checkbox when it is selected

Again, the checkbox is an existing HTML element, not a virtual one. When checked, the browser applies to it the pseudo-class: checked.

20% of test participants thought it was a pseudo-element.

Color even and odd rows of the table in different colors

This is something that we have really deceived people about, but we are still talking about applying styles to real HTML elements. TRs, both even and odd, exist, and we simply apply styles to them, depending on their state (even / odd).

Use: nth-child (even) (or: nth-child (2n)) for even and: nth-child (odd) (or: nth-child (2n + 1)) for odd.

I assume that 36% of the participants chose this option only because: nth-child and pseudo-elements are rather obscure features of CSS.

Always display in bold the first paragraph line on the responsive page.

Let's remember the difference between pseudo-classes and pseudo-elements.

With adaptive layout, you cannot clearly say that this element contains the first line. Its content will vary depending on the width of the viewport.

: first-line is a pseudo-element that allows you to apply styles to the first line of text in a block, regardless of where it ends.