CSS - Cascading Style Sheets

CSS (Cascading Style Sheets)- каскадные таблицы стилей. Это технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML.

Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками, и состоит из набора свойств и их значений.

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

CSS по категориям

Онлайн справочник по CSS

http://htmlbook.ru/css/

селектор1, селектор2 {
  свойство1: значение;
  свойство2: значение;
  свойство3: значение;
}

Чтобы подключить файл со стилями в теге <head> документа пишем:

<link rel="stylesheet" type="text/css" href="путь_к_файлу/имя_файла.css">

«НАСЛЕДОВАНИЕ» У тега <h1> уже есть какой-то стиль, который можно переопределить на его основе. То есть если, например, размер шрифта по умолчанию у него 18px, то его можно изменить, просто прописав в стиле его размер. Выглядеть это будет так:

h1{
  font-size: 10px;
}

font-size как раз и указывает то, что мы изменяем размер шрифта.

код HTML

  <div id="idName">
  <p class="clName">

idName и clName - имена селекторов из CSS. Теперь задаем их в CSS:

#idName /* описание по id */
{ 
  свойство1: значение;
  }
 
.clName  /* так задаем описание class */
{
  свойство1: значение;
  }

В CSS, селектор класса обозначается через точку, а селектор id через решетку.
id это уникальное собственное имя элемента на странице, и оно не может повторяться, т.е. двум тегам нельзя дать одинаковый id. С классом все наоборот.
Еще одно отличие это то, что у id и class разные веса. У id он больше. То есть если в HTML документе написано следующее:

<h2 id="header1" class="header2">...</h2>

то первым применится стиль header1.

Тег + id

CSS:

#news p {
  color: blue;
}

html:

<div id="news">
  <p>Параграф</p>
</div>

В этом случае, стиль применится к тексту «Параграф» и он станет синего цвета. Но применяться будет не ко всем тегам <P>, а только к тем, которые находятся внутри элемента с атрибутом id, равным «news». Т.е., если написать без тега

, то стиль не будет применен. Точно также и с классами.

Несколько примеров.

Есть код:

<div class="level1">
  <div class="level2">
    <p>Мама мыла раму</p>
  </div>
  <p>Молодая мама мыла раму</p>
</div>
<div class="level2">
  <p>Мама все еще моет раму</p>
</div>

И стиль:

.level1{
  font-size: 50px;
}
 
.level2{
  font-size: 20px;
}
/* Первая и последняя строчки будут одинакового стиля, а средняя другого, т.к. к ней применился стиль level1. */
.level1 .level2{
    font-size: 50px;
}
/* стиль будет применен только к первой строчке, так как она находится в элементе с классом level2, а тот, в свою очередь, находится в элементе с классом равным level1 */

Ну и вот еще пример:

p{
 color: Green;
}
 
#sea p{
 font-size: 50px;    
}

Код:

<div id="sea">
    <p>Первая строчка</p>
</div>
<p>Вторая строчка</p>

Так как первая и вторая строчки заключены в тег <p>, то применится стиль «p» и они будут зелеными. Только первая строчка находится в элементе с id = sea и к ней еще применится стиль #sea p. Размер шрифта будет 50px.

Псевдоселекторы

a {
 font-size:12px;
 color : #000000;
}
 
a:hover {
 font-size:14px;
 color: #FF0000;
}

Таким образом, мы установили стиль для всех ссылок (если они не будут переопределены далее) в документе. Прелесть вся заключается в том, что мы добавили после селектора «:hover», что означает «применить этот стиль к тегу <a> если над ним указатель мыши». Это очень удобная вещь. С ее помощью, я сделал меню на этом сайте. Как это делать я расскажу в другой статье.