Как вставить CSS, подключение и включение в HTML теги

Будем рады познакомиться! – Каскадные таблицы стилей.

CSS разработан с целью манипулирования внешним видом элементов страницы.

Каскадные таблицы стилей не являются независимым инструментом — включаются в HTML тремя способами.

Как вставить CSS в HTML, прямая вставка в теги

Как вставить CSS в теги мы разобрали в HTML уроках.

Текст красного цвета, полужирный

Текст красного цвета, полужирный

Подключение CSS в служебную секцию

Этот способ пригоден для оформления web-сайтов с небольшим количеством страниц, он также подходит для новичков, так как все манипуляции произходят в рамках одного документа:

Текст параграфов этого документа темно-зеленого цвета Текст А здесь текст желтый Текст белого цвета, полужирный Заголовок Текст

Атрибут со значениями type=»text/css» внутри тега сообщает, встроенному в браузер интерпретатору, что применены стилевые описания, то есть CSS. Обратите внимание на синтаксис: первым делом назван селектор ( p, body , .forexample, #ident ), затем открыта фигурная скобка, прописан атрибут со значением, фигурная скобка закрыта. Атрибуты между собой разделяются точкой с запятой.

Свойства, назначенные селектору .forexample , распространяться на все элементы, которые содержат class=»forexample» , в пределах одного документа. Что касается селектора #ident , то он управляет всем, что содержит id=»ident» . Значения атрибутов class=»» и id=»» могут содержать цифры, но не должны начинаться с цифр.

Вставка ссылки на внешний .css файл

Попробуйте представить, что ваш сайт содержит несколько десятков страниц, а вы решили сменить цвет заголовков. Используя третий способ, достаточно изменить несколько значений во внешнем .css файле, чтобы добиться желанного результата.

В текстовом редакторе создайте файл следующего содержания:

Сохраните его в папке, в которой находится файл index.html , но не с .html расширением, а с .css , например, как file.css .

Атрибуты и значения

• @charset «windows-1251»; – определяет кириллистическую кодировку.
• /* CSS Document */ – так вводятся комментарии в CSS.

CSS подключение из примера выше может быть представлено таким образом:

Приблизительная структура HTML документа:

Текст параграфов этого документа темно-синего цвета Текст А здесь текст оранжевый Текст белого цвета, полужирный Заголовок Текст

Непарный тег определяет ссылку на внешний .css файл.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS начало Как вставить CSS код в HTML код Коды CSS шрифтов

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Вставить CSS код в HTML? – Не вопрос!

Как вставить css в html: 3 способа добавить css в html

Вы можете по разному добавить css в ваш html-файл. Есть быстрые варианты, есть правильные. Мы рассмотрим все возможные.

1. Подключение внешнего файлы

Самый распространенный и правильный вариант — это просто подключить внешний файл CSS.

Это делается внутри тега с помощью тега link.

Какие преимущества у этого способа? Во-первых, это просто удобно. Все ваши стили будут лежать в отдельном файле. Не потеряются, как минимум. Да и редактировать можно без вмешательства в html. Во-вторых, вы сможете этот файл закешировать и ускорить загрузку вашего сайта.

Частый вопрос: что делать, если файл index.html лежит не в корне, а в отдельной папке — как тогда подключить стили?

Ответ простой: нужно прописать правильный путь к файлу styles.css. Предположим ваш файл styles.css находится в папке css, а index.html в папке templates. Тогда внутри тега в html подключаете стили таким образом:

Здесь вы, как бы, поднялись на один уровень вверх с помощью вот этих символов: «../». Если нужно подняться на два уровня вверх, то пишите вот так: «../../»

2. Внутренние стили

Внутренние стили можно прописать для конкретной html-страницы. Вы не подключаете файл, как в предыдущем примере, а вставляете css код прямо внутрь html. Но делаете это с двумя правилами.

Первое правило: вставляйте внутри тега

Второе правило: вставляйте css стили внутри тега

Таким образом у вас должен получиться вот такой код:

 body < background-color: #cccccc; >h1 

И все это нужно вставить внутри тега .

Зачем так делают? Возможно, у вас нет доступа к редактированию файлов css, либо вы хотите, чтобы новый css код срабатывал только на этой странице, а возможно вы не хотите ждать, когда загрузится файл styles.css и вставляете css код прямо в html страницу. Отчасти это ускорит загрузку страницы, однако, такой подход затрудняет поддерживать и редактировать сайт в дальнейшем.

Если вы вставляете css код через на странице, к примеру, contact.html, то эти стили будут действительны только на этой конкретной странице. На странице about.html они уже не будут работать.

3. Встроенные стили

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

Заголовок страницы

Таким образом эти стили будут применены к конкретно этому элементу. Другие H1 будут без изменений, так как мы встроили инлайновые стили только для конкретно вот этого заголовка.

Одно из преимуществ такого метода, это то, что инлайновые стили как бы перекрывают стили прописанные в css файле. То есть они считаются более весомыми.

Есть еще несколько «экзотичных» методов вставки css в html код. Однако, мы их не будем рассматривать.

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

Что такое CSS и как его использовать верстальщику

CSS — язык, благодаря которому сайты обрели привычный нам вид. До его появления веб-страницы верстались на HTML, из-за чего оформление страницы было привязано к её содержимому. Если нужно было изменить контент, вместе с ним переписывали код оформления — это занимало много времени. CSS решил проблему, позволив создавать оформление без программирования и сложной логики.

Почти все веб-ресурсы сегодня пишутся на CSS, поэтому знание языка — обязательный хард-скилл для верстальщика. Рассказываем, как применять его в работе, и перечисляем основные преимущества.

Содержание статьи скрыть

Что такое CSS

CSS — язык описания, который помогает оформлять XML- и HTML-документы. Он предлагает много возможностей для оформления страниц и подходов к расположению элементов.

Аббревиатура CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей . Обычно каскадные таблицы используются вместе с HTML и JavaScript, но это три разных языка:

На HTML вы структурируете данные — создаёте текстовый документ, где размечаете гиперссылки, таблицы, маркированные списки, заголовки разных уровней. В результате получается «простыня» текста.

Внешний вид HTML-страницы без стилей CSS

На CSS вы прорабатываете визуальную составляющую веб-страницы — цвета, шрифты и расположение элементов. Берёте HTML-основу и подключаете к ней CSS-стиль, чтобы красиво оформить существующий текст, подобрать подходящие цвета и наиболее удобное расположение элементов.

Внешний вид HTML-страницы с оформлением CSS

На JavaScript вы управляете тем, как ведёт себя страница, придаёте ей интерактивность.

Если проводить аналогию с человеческим организмом, то HTML — скелет, который задаёт структуру. CSS — кожа, цвет глаз, волосы. А JavaScript — то, что заставляет человека двигаться — сердце и кровь

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

Документ после изменения в CSS

На картинках видно, как с помощью CSS меняется фон веб-страницы.

Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал
Подписаться

Зачем нужен CSS

Первая версия языка CSS появилась в 1996 году. Главная его задача на тот момент — создавать оформление документов без программирования и сложной логики. Под оформлением подразумевались цвета, шрифты и размещение отдельных элементов на веб-странице.

До появления CSS вёрстку создавали на HTML-таблицах — это вызывало много сложностей. Например, чтобы сделать боковое меню сайта, в HTML-документ встраивали таблицу с колонками нужной ширины и делали её границы прозрачными. А чтобы «раздуть» отдельные ячейки, добавляли невидимые картинки. Но самая главная проблема — при вёрстке HTML-таблицами оформление привязывалось к контенту. То есть, изменив контент, вы должны были менять и оформление, переписывать бесконечные таблицы. Это отнимало много времени и сводило веб-дизайнеров с ума

Изначально CSS проектировался только под оформление страниц, однако постепенно его начали использовать для вёрстки и макетирования. Сегодня возможности языка ещё шире.

Каскадные таблицы стилей позволяют:

• выбирать, как именно будут располагаться элементы относительно друг друга;
• создавать анимационные блоки;
• адаптировать страницы под разные условия просмотра — яркий свет, ночной режим и другие.

Специалистов, которые используют в работе CSS, называют верстальщиками. Они проектируют интерфейсы, создают визуальные решения и превращают макеты от дизайнеров в полноценные веб-страницы. Кроме них знать CSS полезно фронтенд- и бэкэнд-разработчикам, поскольку они также сталкиваются с вёрсткой. Они не должны уметь верстать страницы «с точностью до пикселя», но непонимание принципов CSS может осложнить их работу.

Как использовать CSS в работе

На практике всё выглядит так: дизайнер рисует макет, на котором отображено, как будут выглядеть элементы веб-страницы. А затем верстальщик воссоздаёт эти элементы с помощью HTML и CSS.

В CSS-таблице прописывают правила (стили) оформления. Каждое правило включает в себя два вида компонентов:

Селекторы — метки, помогающие определить, к каким именно HTML-элементам применять правила оформления. Примеры: заголовок, div, таблица.

Блоки объявлений — правила, как должны выглядеть элементы на экране; описание свойств объекта. Примеры: цвет, размер.

Блок объявлений заключают в фигурные скобки. Он может состоять из одного или нескольких объявлений. Друг от друга объявления всегда отделяют точкой с запятой. У каждого объявления есть свойство и значение — их отделяют двоеточием.

Представим, вы хотите, чтобы для абзацев на странице (HTML-элемент p) использовался шрифт Arial, а когда он недоступен — Helvetica или Sans Serif. CSS-правило будет выглядеть так:

Как подключить CSS к HTML

Есть три способа добавить CSS к HTML:

Первый способ — подключить отдельный CSS-файл в HTML-коде страницы . Вы создаёте текстовый документ с расширением .css и подключаете его к HTML с помощью тега . Тэг располагаете между и . Чтобы показать, что вы подключаете именно стили, используете атрибут href со значением style. Такой способ считается наиболее удобным и практичным, потому что позволяет менять оформления всех страниц, к которым подключён CSS-файл.

Пример подключения отдельного файла:

Второй способ — написать в начале кода веб-страницы . Вы добавляете CSS-стили на HTML-страницу между и . Внутри тегов

прописываете сами стили. Этот способ похож на первый, но использовать его лучше только с одностраничными сайтами. Если же у вас несколько страниц, чтобы изменить их оформление, придётся переписывать HTML-код для каждой.

Пример добавления тегов в начале кода HTML-страницы:

Третий способ — написать стиль в атрибуте style . Вы прописываете атрибут style с подходящими свойствами внутри начального тега нужного элемента. Такой способ используют, когда внутри одной страницы есть элементы, имеющие минимальные отличия, например, только в цвете, размере или отступе.

Пример изменения оформления в атрибуте style:

Виды таблиц стилей

От способа интеграции CSS и HTML зависит вид таблицы. Когда вы прописываете стили в коде HTML-страницы через атрибут style — это встроенная таблица. Когда храните данные в отдельном файле формата .css — внешняя таблица. Когда пишете CSS-код в начале HTML-файла — внутренняя таблица. Рассмотрим их подробнее.

Внутренняя таблица стилей — код, встраиваемый в раздел HTML-документа внутри тега . Не имеет приоритета над встроенными стилями, но имеет над внешними.

Внешняя таблица стилей — текстовый файл с расширением .css. Содержит только стили без HTML-разметки, пишется в редакторе кода. Интегрируется с веб-страницей с помощью тега , расположенного внутри раздела . Работает со всеми страницами сайта.

Чтобы загружать внешние таблицы стилей, используют правило !import. Для корректной работы директива !import должна располагаться в таблице перед остальными правилами:

Встроенная таблица стилей — CSS-код, написанный в HTML-документе внутри тега с помощью атрибута style.

Наследование и каскад

Наследование и каскад — важные понятия в CSS, которые тесно связаны между собой.

Наследование

Наследование — механизм, с помощью которого свойства передаются от предка к его потомкам. Спецификации CSS предусматривают наследование свойств, определяющих текстовое содержимое страницы. Например, цвета — color, шрифта — font, расстояния между буквами — letter-spacing, высоты строки — line-height, типа маркеров — list-style и других. Это удобно, потому что позволяет задавать параметры не для каждого элемента веб-страницы отдельно, а для всех сразу.

Свойства, предназначенные для форматирования блоков, не наследуются. К ним относят фон — background, границы — border, высоту и ширину — height и width, оформление текста — text-decoration, выравнивание — vertical-align.

Чтобы заставить элемент наследовать любое значение свойства, используют ключевое слово inherit — это принудительное наследование . Оно работает даже с теми свойствами, которые не наследуются по умолчанию.

Каскад

Каскад — механизм, управляющий конечным результатом, когда разные CSS-стили добавляются к одному элементу. Включает три критерия, на основе которых определяется порядок применения свойств:

Правило !important . Вес правила задаётся через ключевое слово !important. Его вставляют сразу после значения свойства. Пример:

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

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

Специфичность вычисляется следующим образом:

• к id добавляют 0,1,0,0;
• к class — 0,0,1,0;
• к каждому элементу и псевдоэлементу — 0,0,0,1;
• к встроенному стилю, добавленному к элементу — 1,0,0,0.

В итоге с элементами работают только те правила, чья специальность больше. Например, если на один элемент будут влиять два специфичности, первая со значением 0,0,0,2, а вторая — 0,1,0,1, приоритет будет у второй.

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

Почему важно знать CSS

CSS помогает сделать веб-страницы более привлекательными и удобными для пользователей. Он упрощает процесс разработки и даже помогает в оптимизации — поисковые системы предпочитают сайты, которые используют каскадные таблицы стилей.

Основные преимущества CSS:

• Отделяет оформление сайта от его содержимого . Теперь если вы хотите изменить контент на странице, вам не придётся переписывать код оформления — HTML-документы и CSS-файлы работают в связке, но позволяют вносить точечные изменения.
• Увеличивает скорость загрузки сайта . Каскадные таблицы — текстовые файлы, имеющие небольшой вес и малую пропускную способности. Благодаря этому страницы, написанные с помощью CSS, загружаются примерно в семь раз быстрее, чем аналогичные страницы без такой технологии.
• Поддерживается современными браузерами . Есть много браузеров, и у веб-мастера не всегда бывает возможность проверить работоспособность сайта в каждом из них. Стандартные макеты на основе CSS решают эту проблемы — страницы корректно отображаются и функционируют.

CSS в связке с HTML — мощный инструмент для создания красивых и удобных интерфейсов. Именно поэтому «чистые» верстальщики сегодня востребованы, а в будущем их профессия станет только актуальнее.

Хотя профессия верстальщика востребована, вначале важно ориентироваться не на деньги, а на получение опыта — это поможет вам сформировать портфолио. Впоследствии вы сможете свои навыки конвертировать в достойный заработок. Также навыки CSS пригодятся, если со временем вы хотите уйти в разработку и стать фронтенд- или бекэнд-специалистом.

Кроме верстальщиков знать CSS полезно:

• Дизайнерам , чтобы проектировать интерфейсы для веба. Если дизайнер умеет верстать, он становится более ценным специалистом, поскольку может гораздо быстрее проверять идеи и делать живые прототипы интерфейса прямо в браузере.
• Авторам , которые пишут и редактируют статьи. Например, раньше в «Т—Ж» авторы самостоятельно верстали свои статьи.
• Владельцам небольших сайтов . CSS помогает им решать мелкие задачи без обращения к программистам.

Заключение

С языком CSS обычно работают верстальщики — они создают внешнее оформление страниц и документов. Работа верстальщиком — отличный способ войти в IT, получить практический опыт и продолжить развиваться дальше. CSS — довольно простой язык, вы можете изучить его меньше чем за год. Однако это существенно упростит профессиональное развитие, позволит быстрее войти в веб-разработку.

Если хотите научиться верстать сайты, вам поможет подборка лучших онлайн-курсов по вёрстке. В ней представлены программы обучения для новичков и опытных специалистов

Тег link

Тег link подключает CSS файлы на HTML страницу. Кроме того, link подключает некоторые другие файлы, например, фавикон. (Фавикон — это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).

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

Как подключить CSS в HTML5: . В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.

Тег link не требует закрывающего тега.

Атрибуты

Атрибут	Описание
href	Путь к подключаемому файлу.
media	Тип устройства, для которого следует подключить файл. Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen ) или только для маленьких экранов: для мобильников или планшетов (значение handheld ). Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже.
rel	Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение stylesheet указывает на то, что подключается CSS файл, значение alternate используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
charset	Кодировка подключаемого файла. В настоящее время стандартом является utf-8 .
type	Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon.

Значения атрибута media

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение	Описание
all	Все устройства.
screen	Экран монитора.
handheld	Телефоны, смартфоны, устройства с маленьким экраном.
braille	Устройства, основанные на системе Брайля, предназначены для слепых людей.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.
print	Принтеры.
projection	Проекторы.
tty	Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения.
tty	Телевизоры, которые умеют открывать web страницы (бывает и такое).

Значение по умолчанию: all .

Пример

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

Это основное содержимое страницы.

Смотрите также

• тег style ,
  который добавляет CSS прямо на странице
• атрибут style , который задает стили конкретному тегу

Как css подключить к html?

Сегодня я хотела бы вам рассказать о подключении css к html. А точнее рассмотреть несколько вариантов, как css подключить к html.

Навигация по статье:

• Как css-файл подключить к html атрибутом rel?
• Как писать стили в html-файле?
• Еще один способ подключения css к html

Подключение css к html может вам понадобиться, например, в случае, когда вам нужно внести изменения в оформлении сайта, но при этом вы не хотите изменять оригинальный css-файл. Или, например, если вы хотите для удобства вынести стили для определенного элемента сайта в отдельный файл.

Как css-файл подключить к html атрибутом rel?

Итак, если вам нужно подключить css-файла к html мы можем воспользоваться следующей записью:

Которую необходимо вставить в начале html-файла, между …:

link — данный тег используется для вставки ссылки.
rel — в данном атрибуте указывается тип подключаемого файла.
stylesheet – тип файла, в нашем случае таблица стилей.
type=»text/css» — указывается формат файла и его расширение. Задавать не обязательно.
href=»style.css» – относительная ссылка на файл стилей.

В мое случае файл находится в одной папке с html-файлом. В случае если файл стилей будет расположен в другой папке, то путь нужно будет указать в таком виде:

Учебник CSS — Урок 1 — подключаем CSS-стили

Я не буду объяснять зачем нужен CSS. Если вы открыли этот учебник значит вы желаете его выучить. От себя лишь скажу, что возможности CSS очень широки и позволяют верстать макеты любой сложности. В свою очередь использование css означает, что вам придется отказаться от использования различных атрибутов тегов size, color, bgcolor, align и других, которые будут «мешать» CSS.

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

CSS внутри тега

CSS можно подключить c помощью атрибута style:

 
Блок
 

Так мы задаем блок размером 200 на 100 пикселей. Давайте рассмотрим как пишется CSS. Сначала мы пишем атрибут style=»». И потом уже в ковычках пишем css-стили.

style="параметр:значение;параметр:значение;параметр:значение"

Пишем стили мы так сначала идет параметр (widht, height и другие), потом идет двоеточие и значение параметра. Разделяем каждый параметр точкой с запятой.

Теперь ко второму способу написания CSS.

CSS в начале HTML-документа

Для этого мы используем тег в котором мы пишем CSS-код.

     
Учите CSS вместе с drupalbook.org
  

Тег style мы пишем в теге после тега . Давайте напишем какой-нибудь CSS-код:

     
Учите CSS вместе с drupalbook.org
 
2 строка учите CSS вместе с drupalbook.org
  

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

Когда мы пишем CSS-код, то сначала мы указываем тег для которого применяем css-стили, дальше мы в фигурных скобках пишем css-стили. CSS-стили пишутся также как и в атрибуте style=»»:

параметр:значение;параметр:значение;параметр:значение

Параметр, двоеточие, значение, точка с запятой и снова параметр, двоеточие, значение, точка с запятой и снова. После последнего стиля можно не ставить точку с запятой, но лучше всего поставить.

Мы вставили двумя способами css-стили, а теперь давайте используем третий способ, самый оптимальный.

CSS в отдельном файле

Это самый лучший способ, который позволяет отделить полностью CSS от HTML-кода. Конечно иногда хочется вставить CSS прямо в HTML-код, но надо бить себя по рукам в этом случае и выносить CSS в отдельный файл. Зачем?

Это основная идея CSS размежевать текст и оформление текста. HMTL нам нужен чтобы разметить текст, а вот CSS нужен для того чтобы этот текст гармонично выглядел. С помощью HTML выводиться только текст, а с помощью CSS размеры, цвета, формы, границы, отступы.

Это было во-первых, теперь во-вторых когда код HTML и CSS в одном файле, то это становится нечитабельно и грамоздко. А теперь в-третьих, css сохраняются в браузере, поэтому если вынести весь CSS отдельно, то страница будет загружаться быстрее, потому что загружать css нужно только один раз. Я думаю вам уже стало понятным к чему я клоню?

CSS нужно стараться выносить в отдельный файл! Вот к этому я и клоню. А теперь давайте создавать отдельный css файл. Для этого есть тег :

    
Учите CSS вместе с drupalbook.org
 
2 строка учите CSS вместе с drupalbook.org
  

У тега есть следующие атрибуты:

type=»text/css» — так мы указываем то что это css,

rel=»stylesheet» — это указывает на то что этот файл является css-файлом,

media=»all» — этот css файл будет отображаться для всех устройств, через которые просматривают сайт,

href=»styles.css» — путь к css файлу, в нашем случае путь относительный.

Кажется разобрались с тем как подключать css файл, теперь создавайте этот файл styles.css в той же папке где и html-файл.

Теперь открывайте файл styles.css и вставьте него css-стили:

body < background: #eeeeee; /* фон страницы */ font-size: 14px; /* размер шрифта */ >p< color: #ff0000; /* цвет текста */ >

Сохраните этот файл и откройте через браузер ваш html-файл. Теперь css подключен к вашему файлу как полагается, через отдельный файл. В следующем уроке мы подробно начнем разбирать, как писать стили в отдельном файле.