Използване на CSS Class за придаване стилове на елементите в HTML5

Урок 3. Use a CSS Class to Style an Element връзка>>

CSS класовете са стилове за многократна употреба, които могат да се добавят към HTML елементи.

Ето една примерна декларация за клас CSS:
<style>
  .blue-text {
    color: blue;
  }
</style>

Може да видите, че сме създали CSS клас с името .blue-text, който е вътре  в тага <style>.

Може да приложите клас към HTML елемент по следния начин: 

<h2 class = "blue-text"> CatPhotoApp </ h2>

Обърнете внимание, че във вашия елемент на CSS стил, името на класовете трябва да започват с точка (.blue-text).  Докато в декларациите на HTML елементите класовете не трябва да започват с точка (class = "blue-text").

Вашата задача е: Вътре в стиловия / <style> елемент, променете CSS селектора h2 на .red-text и актуализирайте стойността на цвета от синьо на червено.

Дайте на елемента h2  атрибут от CSS класа със стойност "red-text".

Натиснете Run tests бутона. Ако сте работили добре, преминавате на следващата стъпка:

  Урок 4. Style Multiple Elements with a CSS Class

Не забравяйте, че можете да прикачвате класове към HTML елементите, изпозвайки class="your-class-here", който е вмъкнат в отварящия таг на елемента преди затварящата скоба >.

Също селекторите за CSS class задължително имат точка пре името си:

.blue-text {
  color: blue;
}

Декларирайки обаче класа вътре в елемента, точката не се пише.

<h2 class="blue-text">CatPhotoApp</h2>

Вашата задача е: Приложете red-text class към  h2и p елементите на кода ви..

Натиснете Run tests бутона. Ако сте работили добре, преминавате на следващата стъпка:

Урок 5. Change the Font Size of an Element

Размерът на шрифта в HTML се контролира от свойството за шрифт font-size на CSS изписано така:

h1 {
  font-size: 30px;
}

Задачата ви е: В същия маркер <style>, който съдържа вашия  red-text class, създайте запис за p елементи и задайте размера на шрифта  (font-size) на 16 пиксела (16px).

Към следващия урок: Set the Font Family of an Element

Вижте всички уроци от Responsive Web Design>>