Работа с консолью просмотра элементов кода

Прежде чем начать описывать способы изменения стилей CSS, хочу ознакомить вас с тем как работает консоль для просмотра элементов кода. Этот инструмент будет нам необходим на всех участках роботы.
 Консоль для просмотра элементов кода присутствует во всех браузерах. Для её открытия достаточно навести курсор на необходимую нам часть сайта и нажать правую клавишу мыши. Далее выбираем: Исследовать элемент. В зависимости от браузера название может меняться.
 Перед нами открывается окно, оно разделено на две части. Слева мы видим код HTML, а справа правило CSS, которое соответствует выбранному элементу. Пример приведён в Яндекс браузере.
 На приведённом рисунке исследуется код пункта меню: Третий пункт. В левой части консоли мы видим HTML код выбранного элемента, он подсвечен синим. Справа правила CSS для данного пункта. Над правилом CSS находится название файла который содержит это правило и строку где оно прописано. Если мы наведём курсор на это имя, то увидим полный путь к этому файлу. Это очень важный момент, нам не надо будет искать его местоположение среди других файлов сайта.
 Огромное преимущество этой консоли в том, что мы можем менять код и сразу видеть изменения. И только когда мы будем удовлетворены результатом, скопируем изменения и внесём их в код нашего сайта.


 Проводить изменение CSS мы можем в правой части консоли. Изменять цвет, размер добавлять новые правила. Если мы хотим увидеть как эти правила выглядят в файле сайта, то нажмём на раздел Sources (в других браузерах может быть CSS). В окне слева мы увидим нужную нам часть стилей CSS. Если мы не вносили изменения, то они будут такими как в исходном файле, если вносили – мы увидим изменённый код, который можно скопировать и вставить в файл.
 Возможно, понадобится некоторая практика для работы с консолью, но всё сделано просто и интуитивно понятно. Вы быстро освоитесь.