Если вам интересна тема создания сайтов, то наверняка вы не раз слышали о CSS (каскадные таблицы стилей). Возможно, вы даже пробовали изучать данную технологию, ведь навыки по CSS являются необходимейшим фундаментом в искусстве создания сайтов. Каскадные таблицы стилей относятся к триаде технологий, которыми должен овладеть каждый веб-разработчик (наряду с HTML и JavaScript).
В связи с этим, с данного поста я начинаю серию публикаций по CSS. Я постарался составить уроки таким образом, чтобы даже человек, который является полным нулем в веб-разработке смог научится этой прекрасной технологии.
Тем не менее я считаю, что более опытные верстальщики найдут для себя в этих уроках много нового и полезного. Также советую подписаться на обновления, чтобы не пропустить выход новых уроков.
Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.
Видеоверсия:
Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки - HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.
После формирования содержания сайта, на следующем этапе, мы переходим на стадию оформления его внешнего вида, дабы он был красивым и приятным. А также чтобы он хорошо смотрелся на разных разрешениях дисплеев. Как раз-таки для этого мы используем каскадные таблицы стилей CSS.
Значит, для изучения и эффективного использования CSS необходимо знать основы HTML. Без этого постижение каскадных таблиц стилей не имеет практического смысла. Если вы все еще не знакомы с основами языка гипертекста - пройдите мои .
Образно говоря, создание сайтов можно сравнить с рисованием. Перед тем как мы начнем ловко управляться кисточкой и холстом, нам стоит определиться с тем, что именно будет изображено на нашей картине. Представим, что мы решили нарисовать пейзаж, на котором будет изображена птица на фоне деревьев и гор. Можно сказать, что на этом этапе мы определили само содержимое картины.
Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.
Сайт на голом HTML, без CSS
Тот же сайт с подключенными таблицами стилей
Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com . Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper . Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке "Установить".
У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.
Внешний вид социальной сети без подключенных CSS файлов
То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.
Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.
Соц. сеть с подключенными CSS файлами
Все правила оформления сайта хранятся в файле с расширением css, который в свою очередь загружается на веб-страницу через тег .
Во время загрузки html страницы, через тег загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.
Например, через селектор "p" мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор "h1".
Думаю, общий принцип работы довольно прост и понятен, посему не будем вдаваться в детали. Если какие-то моменты у вас вызывают затруднения - ничего страшного, в последующих уроках на практике все будет очень легко и понятно.
Не думаю что в наше время можно найти хоть один более или менее "приличный" сайт без использования CSS. Данная технология очень хорошо зарекомендовала себя и на сегодняшний день очень трудно представить себе верстку сайта без использования каскадных таблиц стилей.
С ее актуализацией многие теги HTML 4 уже не используются. В основном это теги, которые отвечали за оформление веб-страниц. И здесь нет ничего удивительного, ведь за это теперь уже отвечают CSS свойства. Если вы уже владеете азами HTML, следующим логическим шагом будет изучение CSS. Это тот этап, который не получится перепрыгнуть, если вы хотите научиться верстке сайтов. Тем более что это не займет много времени.
В изучении CSS, как и в программировании в общем, важнейшую роль играет практика. Чем чаще вы будете практиковаться, тем больше у вас будет получаться.
Всем привет!
В этом первом уроке я хотел бы познакомить вас, начинающих веб-мастеров, с основами
CSS
.
Здесь ничего сложного нет, для начала нужно просто понять, что такое CSS и для чего вообще он нужен.
Попробую все объяснить поэтапно и нормальным, доступным языком для начинающих.
○ Что такое
CSS?
CSS
(от англ. C
ascading S
tyle S
heets)
– это каскадные таблицы стилей, позволяющие управлять внешним видом сайта (цвет фона, размер и цвет текста, оформление ссылок, позиция блоков на сайте и др.).
Другими словами можно сказать так, что CSS это инструмент позволяющий сделать полный ремонт в вашем доме (покраска потолков и полов, клейка обоев, перестановка мебели).
Метафору вы поняли.
В общем, если дело касается оформления сайта, то в этом ваш лучший помощник CSS.
○ Чем же хорош
CSS, если оформление веб-документа можно осуществить и с помощью
HTML?
Если оформлять документ только с помощью HTML, то в случае каких-либо изменений, например, замена цвета заголовка в статье, вам придется угробить на это массу времени, так как по отдельности на 1000 страницах веб-документа нужно будет внести исправления.
В CSS же все довольно просто. Достаточно указать в одном css файле цвет к заголовкам, и на всех 1000 страницах веб-документа он изменится автоматически. Да, да, это огромноя экономия времени, и риск на инфаркт уменьшается.
Не буду вас нагружать с первого урока, скажу только, что css файл имеет расширение «*.css
» и зачастую файлу присваивают название «style.css
» (но это не обязательно).
Еще скажу, что файл CSS работает только в паре с HTML. Сам по себе CSS работать не будет. Так что если вы не знаете , рекомендую с ними ознакомиться прежде, чем вы откроете урок №2.
Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS , для чего нужен и как его правильно использовать. Это базовый урок из серии "Для самых маленьких", в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS - Каскадных таблиц стилей (C ascading S tyle S heets).
Класснуть
Запинить
Данный урок является логическим продолжением урока "Основы HTML для начинающих ", в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.
Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.
Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот - при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).
CSS довольно просто использовать в HTML документах. Его можно:
Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.
Правила объявлений настолько просты, что их можно описать в одном предложении. Сначала пишется селектор , который выбирает конкретный элемент на странице, после фигурных скобок пишутся свойства со значениями после двоеточия, а сами свойства отделяются друг от друга точкой с запятой . Это всё.
Просто, не правда ли?
Самое сложное в CSS объявлении - селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке - это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.
Вкратце CSS селектор - (от слова select - выбирать) - это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:
//HTML:
//CSS: .my-class { background-color: #999; }Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет - серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class , все эти элементы получат одинаковое оформление - серый фон цвета #999.
Понять принцип каскадирования несложно. Давайте взглянем на пример:
//HTML
Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children , который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent . Если в HTML документе мы вынесем тег .children из тега div с классом .parent , он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.
Что мы получим в результате нашего примера. Тег с классом.children получит цвет текста #666, так как имеет более длинный каскад, а.parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children , то его текст покрасится в цвет родителя color: #999;
Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.
Далеко-далеко за словесными горами.
Находящийся в теге с классом.my-class получит значение свойства margin: 15px.
Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:
My-class.class-2 { margin: 10px; } будет иметь больший приоритет, чем: .my-class { margin: 15px; }
И т.д. по логической цепочке.
И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:
My-class { margin: 10px; } будет иметь меньший приоритет, чем идущий после него точно такой-же селектор: .my-class { margin: 15px; }
В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.
Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы - нет.
Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook .
Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.
CSS Свойство | Частота использования | Описание |
| color | 960 раз | Цвет текста элемента:  |
| background-color | 755 раз | Цвет фона элемента:  |
| font-size | 524 раза | Размер шрифта:  |
| opacity | 435 раз | Уровень прозрачности элемента:  |
| padding | 372 раза | Размер полей внутри элемента:  |
| width | 356 раз | Ширина блочного элемента, не включая размеры границ и полей:  |
| margin | 311 раз | Внешние отступы элемента:  |
| height | 305 раз | Высота блочного элемента, не включая размеры границ и полей:  |
| font-weight | 280 раз | Насыщенность шрифта:  |
| text-align | 245 раз | Горизонтальное выравнивание текста:  |
Медиа-запросы в CSS - это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос - это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.
В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.
Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media . Структура медиа запроса довольно проста:
Условием может выступать либо устройство - all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.
Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:
Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом.my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.
Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И) , not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы) . Нет логического оператора or (ИЛИ) , его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.
Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.
Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по . Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с позволяют создавать динамические HTML-страницы (DHTML ), красота и удобство которых, порой, просто поражают.
Разумеется, для того, чтобы создавать подобные вещи необходимо познакомиться с основами CSS . И данная категория сайта поможет Вам это сделать максимально быстро и эффективно.
Полный курс по HTML, CSS и по вёрстке сайтов :
1) Синтаксис CSS .
2) Способы и их приоритеты задания CSS-стиля .
3) Типы селекторов в CSS .
4) CSS хаки для браузеров.
5) Правила написания CSS .
6) Как создать всплывающую подсказку на CSS .
7) Как изменить внешний вид первой буквы через CSS .
8) Как задать вид курсора через CSS .
9) Как изменить вид курсора при наведении мыши с помощью CSS .
10) Как сделать подменю на CSS .
11) О замене свойства min-width в IE6 .
12) О валидности CSS .
13) Как задать цвет посещённых ссылок.
14) Как задать отступ абзаца через CSS .
15) Как сделать закруглённые углы через CSS .
16) Как вместо маркера списка поставить своё изображение через CSS .
17) Как сделать фон картинкой.
18) Как сделать затемнение фона на CSS .
19) Что такое дочерние селекторы в CSS .
20) Какие единицы измерения имеются в CSS .
21) Как сделать всплывающее окно с затемнением.
22) Как сделать анимированный фон.
23) Как сделать красивое текстовое поле.
24) Как менять изображение при наведении на него курсора мыши.
25) Что такое псевдоэлементы в CSS .
26) Что такое CSS спрайты .
27) Как прижать футер (подвал) к низу через CSS .
28) Как запретить изменение размеров textarea через CSS .
29) Как нарисовать треугольник через CSS .
30) Как обработать событие click через CSS .
31) Как задать свой курсор через CSS .
32) Как сделать горизонтальное выпадающее меню на CSS .
33) Как использовать нестандартный шрифт на сайте.
34) Как изменить фон у радиокнопки через CSS .
35) Можно ли использовать CSS3 .
36) Как сделать тень на CSS .
37) Как задать атрибуты cellpadding и cellspacing на CSS .
38) Как сделать div со 100% height .
39) О совместимости z-index и плеера Youtube .
40) Почему плохо использовать -moz , -ms , -webkit и прочие свойства.
41) Стоит ли использовать CSS Reset .
42) Как вертикально выравнять маркер списка.
43) Как сделать версию для печати.
44) Как сделать кроссбраузерную прозрачность на CSS .
45) Что такое clearfix .
46) Как частично отменить float .
47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.
48) Что такое адаптивная вёрстка.
49) Что такое медиа-запросы в CSS .
50) Что такое less .
51) Как сделать эффект загнутого уголка на CSS .
52) Как сделать отзывчивый "липкий" подвал сайта .
53) Как использовать Google Fonts API .
54) Как использовать сервис Livetools .
55) Как разрешить или запретить выделение текста на CSS .
56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS .
57) Зачем нужно свойство page-break-inside в CSS .
58) Как выравнять по центру блок переменной ширины на CSS .
59) Как сделать треугольники на чистом CSS .
60) Сервис по генерации CSS треугольников .
61) Как прижать футер к нижней грани страницы (позиционирование).
62) Как прижать футер к низу страницы (табличный способ).
63) Изучаем Sass . Установка и настройка.
64) Как скрыть элемент на странице на CSS .
65) Изучаем Sass . Основы.
66) Когда использовать reset.css и normalize.css .
67) Сервис по работе с изображениями с мощным API .
68) Как сделать эффект увеличения картинки на CSS .
69) Koala - быстрая компиляция sass файлов.
70) Как добавить фильтры к фотографиям на CSS .
71) Изучаем Sass . Миксины.
72) Изучаем Sass . Математические операции.
73) Анимированная иконка меню на Sass .
74) Изучаем Sass . Функции.
75) Что такое PostCSS .
76) Как установить и настроить PostCSS .
77) Как сделать возможность оценивания на CSS .
78) Изучаем Sass . Стиль написания кода.
79) Изучаем Sass . Расширение родительского селектора.
80) 10 полезных SASS миксинов .
81) Как сделать интро в стиле "Звёздных Войн" на CSS .
82) Bootstrap 4 . Введение.
83) Bootstrap 4 . Установка.
84) Bootstrap 4 . Reboot.
85) Bootstrap 4 . Контейнеры и ключевые точки.
86) Bootstrap 4 . Система сеток.
87) Bootstrap 4 . Flex-свойства сетки.
88) Какие 5 нововведений появятся в CSS4 .
89) Bootstrap 4 . Что такое Jumbotrons.
90) Bootstrap 4 . Утилиты и типография.
91) Bootstrap 4 . Компонент Cards.
92) Разницу между class и id на примере тега div .
93) Неудачные элементы веб-дизайна , которые не стоит использовать.
94) Bootstrap 4 . Модальные окна.
95) О приоритете и наследовании в CSS на практике
96) Как верстать PSD макет по Bootstrap сетке . Часть 1.
97) Как верстать PSD макет по Bootstrap сетке . Часть 2.
98) Как использовать псевдоэлементы after и before в CSS .
99) Об особенностях ширины и высоты блока в CSS .
100) Псевдоэлемене after и псевдоклассе last-child .
101) Как показать сайт на различных девайсах.
102) Верстка по сетке Bootstrap (часть 1)
103) Верстка по сетке Bootstrap (часть 2)
104) Верстка по сетке Bootstrap (часть 3)
105) Верстка по сетке Bootstrap (часть 4)
Последнее обновление: 21.04.2016
Любой html-документ, сколько бы он элементов не содержал, будет по сути "мертвым" без использования стилей. Стили или лучше сказать каскадные таблицы стилей (Cascading Style Sheets ) или попросту CSS определяют представление документа, его внешний вид. Рассмотрим вкратце применение стилей в контексте HTML5.
Стиль в CSS представляет правило, которое указывает веб-браузеру, как надо форматировать элемент. Форматирование может включать установку цвета фона элемента, установку цвета и типа шрифта и так далее.
Определение стиля состоит из двух частей: селектор , который указывает на элемент, и блок объявления стиля - набор команд, которые устанавливают правила форматирования. Например:
Div{ background-color:red; width: 100px; height: 60px; }
В данном случае селектором является div . Этот селектор указывает, что этот стиль будет применяться ко всем элементам div.
После селектора в фигурных скобках идет блок объявления стиля . Между открывающей и закрывающей фигурными скобками определяются команды, указывающие, как форматировать элемент.
Каждая команда состоит из свойства и значения . Так, в следующем выражении:
Background-color:red;
background-color представляет свойство, а red - значение. Свойство определяет конкретный стиль. Свойств css существует множество. Например, background-color определяет цвет фона. После двоеточия идет значение для этого свойства. Например, выше указанная команда определяет для свойства background-color значение red . Иными словами, для фона элемента устанавливается цвет "red", то есть красный.
После каждой команды ставится точка с запятой, которая отделяет данную команду от других.
Наборы таких стилей часто называют таблицами стилей или CSS (Cascading Style Sheets или каскадные таблицы стилей). Существуют различные способы определения стилей.
Первый способ заключается во встраивании стилей непосредственно в элемент с помощью атрибута style :
Здесь определены два элемента - заголовок h2 и блок div. У заголовка определен синий цвет текста с помощью свойства color . У блока div определены свойства ширины (width), высоты (height), а также цвета фона (background-color).
Второй способ состоит в использования элемента style в документе html. Этот элемент сообщает браузеру, что данные внутри являются кодом css, а не html:
Результат в данном случае будет абсолютно тем же, что и в предыдущем случае.
Часто элемент style определяется внутри элемента head , однако может также использоваться в других частях HTML-документа. Элемент style содержит наборы стилей. У каждого стиля указывается вначале селектор , после чего в фигурных скобках идет все те же определения свойств css и их значения, что были использованы в предыдущем примере.
Второй способ делает код html чище за счет вынесения стилей в элемент style . Но также есть и третий способ, который заключается в вынесении стилей во внешний файл.
Создадим в одной папке с html странице текстовый файл, который переименуем в styles.css и определим в нем следующее содержимое:
H2{ color:blue; } div{ width: 100px; height: 100px; background-color: red; }
Это те же стили, что были внутри элемента style . И также изменим код html-страницы:
Здесь уже нет элемента style , зато есть элемент link , который подключает выше созданный файл styles.css:
Таким образом, определяя стили во внешнем файле, мы делаем код html чище, структура страницы отделяется от ее стилизации. При таком определении стили гораздо легче модифицировать, чем если бы они были определены внутри элементов или в элементе style , и такой способ является предпочтительным в HTML5.
Использование стилей во внешних файлах позволяет уменьшить нагрузку на веб-сервер с помощью механизма кэширования. Поскольку веб-браузер может кэшировать css-файл и при последующем обращении к веб-странице извлекать нужный css-файл из кэша.
Также возможна ситуация, когда все эти подходы сочетаются, а для одного элемента одни свойства css определены внутри самого элемента, другие свойства css определены внутри элемента style , а третьи находятся во внешнем подключенном файле. Например:
А в файле style.css определен следующий стиль:
Div{ width:50px; height:50px; background-color:red; }
В данном случае в трех местах для элемента div определено свойство width , причем с разным значением. Какое значение будет применяться к элементу в итоге? Здесь у нас действует следующая система приоритетов:
Если у элемента определены встроенные стили (inline-стили), то они имеют высший приоритет, то есть в примере выше итоговой шириной будет 120 пикселей
Наименее приоритетными стилями являются те, которые определены во внешнем файле.
Многие элементы html позволяют устанавливать стили отображения с помощью атрибутов. Например, у ряда элементов мы можем применять атрибуты width и height для установки ширины и высоты элемента соответственно. Однако подобного подхода следует избегать и вместо встроенных атрибутов следует применять стили CSS. Важно четко понимать, что разметка HTML должна предоставлять только структуру html-документа, а весь его внешний вид, стилизацию должны определять стили CSS.
В процессе написания стилей CSS могут возникать вопросы, а правильно ли так определять стили, корректны ли они. И в этом случае мы можем воспользоваться валидатором css, который доступен по адресу
