Стилирование HR-тегов с помощью CSS

Различные браузеры имеют разные стили по умолчанию для заголовков — теги h1, h2, h3 и т.д. Однако с небольшим количеством CSS мы можем стилизовать их так, как нам нравится.

Если мы хотим применить определенные стили ко всем нашим заголовкам — например, поля, чтобы создать большее пространство над заголовком, чем между ним и следующим абзацем, напишите CSS следующим образом:

h1, h2, h3, h4, h5 {
    margin-top: 35px;
    margin-bottom: 0;
}

Также обратите внимание, что нижний край, который установлен как ноль, не имеет единицы измерения. Нуль не нуждается в какой-либо единице измерения; ноль равен нулю, будь то px, em, процентов, что угодно.

Возможно, мы хотим, чтобы наши заголовки отличались от остальных наших страниц, и с этим CSS

h1, h2, h3, h4, h5 {
    margin-top: 35px;
    margin-bottom: 0;
    font-family: Arial, Helvetica, sans-serif;
}

мы можем добиться этого с минимальным стилем: (см. шрифт Arial, применяемый к заголовкам.)

Или мы можем обращаться к отдельным тегам:

h1 {
    color: #FF0000; 
}
h2 {
    background: #FFFF99; 
}
h3 {
    text-align: center;
}
h4 {
    font-style: italic;
}
h5 {
    color: #CCFFFF; 
    background: #000099;
}