Как выглядит css код

Общий вид CSS кода может выглядеть следующим образом:

/* Комментарий CSS */
селектор {
  свойство: значение;
  свойство: значение;
  ...
}

/* Несколько выборов */
селектор1,
селектор2,
селектор3 {
  свойство: значение;
  свойство: значение;
  ...
}

/* Вложенные выборы */
селектор1 {
  свойство: значение;
  свойство: значение;
  ...
  селектор2 {
    свойство: значение;
    свойство: значение;
    ...
  }
}

/* Использование переменных */
:root {
  --основной-цвет: #0066cc;
}

.elem {
  background-color: var(--основной-цвет);
}

/* Медиа запросы */
@media (min-width: 768px) {
  селектор {
    свойство: значение;
    свойство: значение;
    ...
  }
}

/* Ключевые кадры */
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* Использование аттрибутов */
a[href^="https://"] {
  color: green;
}

/* Использование псевдоэлементов */
.elem::before {
  content: "⚫";
  font-size: 20px;
  margin-right: 5px;
}

CSS состоит из селекторов, которые указывают на HTML элементы, и блока свойств, содержащего определение стилей для элементов.

Свойства могут быть заданы в виде пары «название-свойства: значение-свойства», разделенной двоеточием. Блоки стилей заключаются в фигурные скобки и могут содержать несколько свойств, разделенных точкой с запятой.

CSS также поддерживает другие функциональные возможности, такие как переменные, медиа запросы, ключевые кадры и селекторы для атрибутов и псевдоэлементов.