CSS Tag Selectors

Lecture



Any HTML tag can be used as a selector for which formatting rules are defined, such as: color, background, size, etc. The rules are defined as follows.

Tag {property1: value; property 2: value; ...}

First, the name of the tag is indicated, the design of which will be redefined, it does not matter in upper or lower case characters. Inside the curly braces is written style property, and after the colon - its value. The set of properties is separated by a semicolon and can be located in one line or in several (Example 7.1).

Example 7.1. Change paragraph tag style 

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Селекторы тегов</title> <style> P { text-align: justify; /* Выравнивание по ширине */ color: green; /* Зеленый цвет текста */ } </style> </head> <body> <p>Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.</p> </body> </html>

In this example, the color and alignment of the paragraph text changes. The style will be applied only to text that is inside the <p> container.

It should be understood that although the style can be applied to any tag, the result will be noticeable only for tags that are directly displayed in the <body> container.

Questions to check

1. Which line contains an error?

  1. H1 {margin-left: 20px; }
  2. p {margin-left: 20px; padding-left: 20px; }
  3. h2 {margin-right: 20px; }
  4. head {color: #rob; }
  5. body {font-size: 11pt; color: #aaa; }

2. Tanya chose the colors # ffe9f2 and # 6e143b for the background of the web page and the text color and used the following code in the styles, however the colors did not appear. What is the reason?

body {
background-color: # ffe9f2
color: # 6e143b
}

  1. body is written in lowercase letters.
  2. The background-color property is invalid; you should write background
  3. The color values ​​are incorrect.
  4. It is incorrect to use body as a selector.
  5. Not enough semicolon.

3. Which line is spelled correctly?

  1. <P> {color: # 333; }
  2. P {color: # 333; }
  3. P: {color: # 333;}
  4. P {color: 333; }
  5. P {color: # 3333; }

4. To which selector should the margin property be applied to change the indents on the web page?

  1. ! DOCTYPE
  2. A
  3. HEAD
  4. TITLE
  5. BODY

5. How to add a background color to all <H1> elements?

  1. h1 {background-color: white}
  2. h1.all {background-color: white}
  3. h1: all {background-color: white}
  4. h1 [all] {background-color: white}
  5. h1 # all {background-color: white}

Answers

1. head {color: #rob; }

2. Not enough semicolon.

3. P {color: # 333; }

4. BODY

5. h1 {background-color: white}

created: 2014-10-19
updated: 2021-03-13
132606

Rating 9 of 10. count vote: 2
Are you satisfied?:

Comments

To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Cascading CSS / CSS3 Style Sheets

Terms: Cascading CSS / CSS3 Style Sheets