Здравствуйте дорогие друзья, читатели и подписчики моего блога!

Чтобы в будущем мне не пришлось затрагивать вопрос как посмотреть HTML код страницы, я решил написать данную заметку, чтобы потом ссылаться на неё в других статьях.

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

Как посмотреть код страницы в Firefox

Для того, чтобы посмотреть исходный код отдельного элемента дизайна на страницах блога в Firefox, необходимо его выделить стрелкой мыши и нажать на правую клавишу мышки, в результате чего появится меню:

в котором необходимо выбрать "Исходный код выделенного элемента" или "Исходный код страницы" если речь идёт о просмотре кода страницы блога:

после проделанных действий, откроется отдельное окно браузера Firefox с исходным кодом страницы, с которым в будущем вам придётся столкнуться при редактировании шаблона:

Как посмотреть исходный код страницы в Chrome, Яндекс браузер, Опера.

Для этого нам необходимо выделить нужный элемент на страницы блога и нажать на правую клавишу мышки, и в появившемся меню выбрать "Просмотр кода элемента":

Далее с правой стороны экрана появится ячейка с HTML кодом выбранного элемента.

Обратите своё внимание на то, что ниже можно посмотреть какие значения в CSS файле уже прописаны тегу p:

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

Когда название нужного класса будет выделено как на скриншоте выше, то наводим на него стрелку и нажимаем на левую клавишу мышки, в появившемся меню выбираем Копировать:

И так представьте, у нас с вами есть поставленная задача, выделить текст "Ваш комментарий ожидает модерации" красным цветом.

Для этого мы проделываем выше перечисленные действия чтобы посмотреть HTML код страницы, на которой находим нужный текст и нужный класс comment-awaiting-moderation:

советую всем новичкам прочитать про значение class более подробно.

Теперь нам необходимо прописать данному классу comment-awaiting-moderation в CSS стилях нужное значение, мы открываем главный CSS файл, как правило это style.css и в самый низ страницы копируем следующий код:

и наша задача решена.

Но бывает так, что вместо класса (class="") в HTML коде страницы у нужного элемента может быть прописан идентификатор (id="")

поэтому в CSS стилях заменяем перед названием класса точку, на символ решётки #:

Советую прочитать про идентификатор более подробно.

Где находится файл style.css?

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

И в вверху страницы найти адрес по которому расположен данный файл style.css

можно увеличить

Бывает так, что имя CSS файла style.css может иметь другое название, из-за выбранной темы шаблона, это стоит помнить.

Далее необходимо зайти на хостинг где размещён ваш блог и через панель управление, найти по выше предоставленному адресу нужный CSS файл и добавить в него нужные стили.

Возможно вам придётся сохранить CSS файл к себе на компьютер, добавить туда нужные стили и вновь загрузить его на хостинг. Я к примеру редактирую все файлы благодаря программе Notepad++, чего и вам желаю.