с чего начать изучение html и css как правильно построить обучение
5 этапов самостоятельного изучения HTML и CSS
Front-end Developer в Ciklum, Преподаватель Компьютерной школы Hillel.
Если вы пытаетесь самостоятельно изучить HTML и CSS, то это практическое руководство — для вас. Но для начала нужно запастись терпением и усидчивостью — это очень важные составляющие в данном направлении. Изучение верстки сайта с нуля можно разделить на несколько этапов.
Этап первый
Следует понимать, что HTML и CSS — это не языки программирования, а язык разметки и каскадные таблицы стилей соответственно. Другими словами, данными языками вы задаете расположение элементов (заголовки, абзацы, ссылки и т.д.) и стилизуете их. Также очень важно запомнить, что без хорошей теоретической базы вы не сможете приступить к практике.
Этап второй
Для начала освойте HTML. Изучите, чем отличаются версии HTML, зачем нужны теги, какие теги существуют, обязательно уделите внимание атрибутам тегов. В этом вам помогут такие ресурсы:
Отмечу, последний ресурс — это веб-консорциум, здесь можно узнать про нововведения в мире веб-разработки, подробнее о них рассказывают на курсах программирования в Днепре, например.
Этап третий:
Изучите CSS —здесь вы узнаете, что такое селектор, какие типы селекторов бывают, их специфичность и многое другое. CSS — очень важная тема в мире веб-разработки. Это стили отображения веб-страниц, которые вы видите ежедневно.
Этап четвертый:
После того, как вы освоите весь материал по HTML/CSS, приступайте к практике. Чем больше практики, тем лучше. Тут вам понадобится текстовый редактор, PSD макеты и, как я писал выше, терпение и усидчивость. Можете использовать любой понравившийся текстовый редактор. Выделю такие:
Бесплатные PSD макеты вы с легкостью найдете в Google.
Этап пятый:
И напоследок еще немного полезных ресурсов:
И рекомендация: чем больше у вас будет практики, тем быстрее вы изучите все подводные камни и просто набьете руку.
Скачивайте PSD макеты и верстайте, верстайте и еще раз верстайте. Поверьте, у всех наступает такой момент: «Ничего не получается, я все брошу и займусь чем-то другим», но не поддавайтесь этому, доведите до конца начатое.
Мир веб-разработки очень широк, а верстка — это только начало.
Примечание: а если ваш ребенок интересуется Python, курс программирования python для детей будет полезен!
Рекомендуем курс по теме
Front-end Basic basic
Front-end Developer в Ciklum, Преподаватель Компьютерной школы Hillel.
Как начать изучать HTML и CSS
В этой статье расскажу как учить HTML и CSS бесплатно, она подойдёт самым начинающим программистам и верстальщикам, кто ещё не разу не делали Web страницы и хочет понять как это всё изучить максимально эффективно и просто.
Где учить HTML и CSS бесплатно:
Также стоит сказать, где учить HTML и CSS бесплатно, для этого используете сайт Web Reference, там очень много разных курсов и все бесплатны, но о нём ниже, также есть сайты HTML Academy и HTMLBOOK.ru.
Это все сайты в которых можно изучить это бесплатно, но где конкретно на сайте изучать, об этом ниже.
Примечание:
Также у нас тоже вы можете начать изучать HTML и CSS, для этого зайдите по этой ссылке, там вы найдёте не плохой учебник по вёрстке.
Как учить HTML:
Для начала нужно изучить HTML, ну с ним всё просто, вы без проблем сможете выучить его.
Также рекомендую прочитать самоучитель на сайте HTMLBOOK.ru.
Как учить CSS:
С CSS всё интереснее, его будет уже изучить сложнее, но всё равно достаточно просто.
Для начала всё также заходим на сайт HTML Academy, там заходим на курс по CSS, опять же, почти все уроки в кусы бесплатны, в этом и проблема этого сайта, то что не всё бесплатно, тут вы можете или заплатить подписку, тогда вы ещё получите доступ к урокам по FlexBox и работе с SVG.
После того как начнёте хорошо работать со CSS, надо начать изучать какой-нибудь препроцессор, SASS или LESS, если не знаете что выбрать, посмотрите ответ на это вопрос здесь, опять же, учите это на сайте Web Referenc.
Что учить после HTML и CSS:
Теперь пришло время ответить на вопрос, что учить после HTML и CSS, но тут всё просто.
Начинаете учить язык программирования JavaScript, больше нечего сказать.
Вывод:
Собственно говоря это всё что хотел написать про то, как учить HTML и CSS бесплатно, здесь все сервисы и сайт по изучению этих технологий, по максимально удобному и понятному изучению.
Как быстрее научиться HTML и CSS?
С развитием веб-технологий, в современном мире недостатка в информации нет. Любой желающий может найти книги, курсы, тренинги по интересующей теме. Информации много даже по очень экзотическим направлениям.
Казалось бы, теперь уж люди должны знать больше, иметь более высокий уровень интеллекта, вырабатывать новые навыки. Но к сожалению, это не совсем так. Как часто вам приходилось начать изучать что-то новое, а затем бросать это занятие не достигнув каких-либо существенных результатов?
Как часто люди начинают изучать новые иностранные языки, историю, программирование и другие дисциплины, так и не получив в итоге необходимый багаж знаний, умений и навыков?
При этом дефицита в информации нет. Даже наоборот. Так, с чем же связаны эти неудачи в изучении чего-то нового? Этим же вопросом задался и я, видя как много людей начинают изучать веб-разработку, верстку сайтов, а затем бросают дело на полпути. Либо продолжают учиться, но процесс обучения проходит очень медленно.
Но прежде всего, надо определиться, что именно он хочет и сколько готов за это заплатить.
Сейчас в сети достаточно материалов и по HTML, и по основам CSS. Однако, все же процент людей, успешно завершивших обучение и хорошо разбирающихся в этой теме не так много.
Вот я и решил написать статью о том, что мешает людям стать хорошими веб-специалистами, и как с этим бороться. Ниже вы найдете список вирусов, убивающих ваши мечты, и рецепт, с помощью которого вы достигнете поставленных целей.
Практика, практика и еще раз практика
По моему наблюдению, всех людей в общем можно разделить на два типа:
Это наблюдение очень важно в том плане, что люди часто изучают теорию, но на практике ничего не умеют. При постижении той же верстки сайтов, обучающиеся залпом смотрят все видеоуроки, но практиковаться не хотят.
Это порождает две проблемы:
Эти проблемы очень важны, потому что без умения внедрять полученные знания, все усердия на пути обучения становятся бесполезными. Особенно учитывая, что при создании сайтов перед веб-разработчиком часто встают нетривиальные, требующие творческого подхода задачи.
Решения у таких задач, конечно же есть, но их нужно найти самостоятельно. Ни один преподаватель не сможет вам обрисовать все сложности, с которыми вы можете столкнуться при создании сайта, и дать готовые решения.
Таким образом, практика играет наиважнейшую роль при становлении вас как веб-разработчика. Нужно будет сверстать не один десяток веб-страниц, прежде чем создать что-то стоящее.
Здесь возникает вопрос: каким образом лучше всего практиковаться? Ответ довольно прост: все задачи должны имитировать настоящую ситуацию. То есть вы должны решать задачи, с которыми сталкиваются в своей работе верстальщики.
Если вы изучаете, к примеру, веб-дизайн, вам нужно решать повседневные задачи веб-дизайнеров. Ну или хотя бы постараться это сделать.
Но как начинающему найти такие практические задачи?
Когда думаешь, как лучше практиковаться.
Тут есть несколько вариантов.
Вам кончено за это платить не будут, но вы ведь только учитесь, правильно? Хотя есть и такие, которые имеют смелость на этапе обучения брать реальные заказы. Не завидую я некоторым работодателям)))
Минус такого метода заключается в том, что вы можете самостоятельно и не суметь решить поставленную задачу. В этом случае вам самому нужно просить помощи и совета у специалистов.
Этот вариант является идеальным для новичков, решивших изучить тему создания сайтов.
Но где найти такие готовые, продуманные задачи? Этим же вопросом задался и я. В итоге я пришел к выводу, что мне стоит создать базу задач и ответов под каждый аспект разработки сайта. Чтобы человек по шагам получал необходимое знание, и сразу же внедрял их, шлифуя свое мастерство.
А теперь, давайте рассмотрим, что еще нужно чтобы стать классным веб-специалистом.
Не распыляйтесь
В одной из прошлых статей я говорил про миф мультизадачности. К сожалению, многие люди уже страдают этим синдромом. Заключается он во взваливании на себя сразу нескольких задач.
В итоге внимание человека рассеивается, и он не может работать на полную мощь. Вспомните сами, сколько раз в течение часа вы смотрите на свой телефон, или заходите в соц. сети?
Мультизадачность сожмет вас в своих объятиях
Сколько раз вы посмотрели на свой гаджет, или проверили почту пока не дошли до этой части статьи? Если ни разу, можно пожать вам руку. Большинство же людей не умеют концентрироваться на чем-то более 5-10 минут.
Согласно исследованиям, после того как человек отвлечется от работы, ему в среднем требуется 25 минут, чтобы вернуть прежний уровень концентрации. Представляете как это непродуктивно, заниматься сразу несколькими делами?
Другая проблема заключается в том, что начав изучать верстку сайтов, многие сразу переходят к освоению веб-дизайна и других дисциплин. Такое распыление приводит к посредственным результатам во всех направлениях.
Конечно же, изучение чего-то на протяжении нескольких месяцев может вымотать, и уровень мотивации уже не будет как в начале. Намного соблазнительнее начать изучать что-то новое. Однако, с таким подходом далеко не уйдешь.
Тем более что HTML и CSS можно освоить за месяц на довольно неплохом уровне. При должном старании можно еще быстрее. Не попадайте в ловушку мультизадачности. Погрузитесь полностью в одну тему, затем переходите к другой.
Начинайте с основ
Если вы слышали про закон Парето, то должны знать что 20% дел дает 80% результата. Таким же образом, существуют базисные вещи в верстке сайтов, которые вам нужно изучить. Именно на этом фундаменте будет расти ваше мастерство.
Остальные детали можно изучить потом. Многие нюансы вы узнаете уже во время практических занятий.
Память человека чем-то напоминает мышцы. Если человек занимается спортом и получает правильные нагрузки, его мышцы станут сильнее, выносливее и гибче. Таким же образом и память. Если ее тренировать, она станет намного сильнее.
При изучении темы сайтостроения очень важно постоянно повторять пройденный материал. Особенно если вы по какой-то причине перестали практиковаться. Не освежая память можно быстро потерять полученные знания.
Не бросайте дело на полудороге
Говорят что по прошлому человека можно более или менее спрогнозировать его будущее. В какой-то мере я с этим согласен. Зачастую люди не добиваются успеха, потому что имеют привычку бросать дела на полпути.
Я очень сильно удивился, когда прочитал об итогах исследований, в ходе которых людям нужно было выбраться из лабиринта постоянно выбирая одну из двух дверей. В конечном итоге каждая из них шла к выходу. Также они имели возможность сдаться в любой момент времени.
По итогам, более 90% людей сдались в тот момент, когда им оставалось буквально открыть еще одну дверь, которая вела к выходу. То есть, они сдались в тот момент, когда победа уже была на носу. Но их испугало неизвестность того, когда именно они найдут выход. Можно сказать, что им просто не хватило веры.
Информационный голод
Как-то я начал практиковать такой подход, как информационный голод. Суть ее заключается в том, чтобы не поглощать информацию, которая не имеет для меня практической ценности. Ну или по крайней мере постараться это сделать.
Сюда относятся новости, всякого рода передачи и прочее. Такой подход имеет несколько огромных достоинств.
Шерлок советует: Не забивай голову ерундой
Есть много других причин не создавать из своего разума информационную свалку. Я лишь перечислил некоторые из них. Но даже их думаю достаточно, чтобы начать фильтровать входящую информацию. В общем, советую как-нибудь начать практиковать такой подход.
А на этом у меня все. Надеюсь, данный пост был для вас полезен. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.
Как проще и быстрее выучить HTML и CSS
На самом деле при желании выучить и начать применять HTML и CSS можно за день-два. Стоит только грамотно подойти к процессу обучения и выбрать правильный источник информации.
В этой статье я хочу дать несколько советов тем кто решил пополнить свой багаж знаний и перейти грань визуального создания сайтов и заглянуть хоть немного под капат и узнать что и как работает.
Да WordPress нас балует и позволяет создавать простые проекты без знаний языков программирования.
Хотя языки HTML и CSS врядли можно назвать программными, это скорей всего языки гипер-текстовой разметки, но тем не менее они лежат в основе всего что мы видим в Интернете.
Я не буду Вас агитировать купить тот или иной супер-курс или тренинг. Нет я дам лишб несколько советов как лучше учить HTML и CSS и как добиться результатов.
Кроме этого я этой статьей открою новый раздел на Info-m в котором буду публиковать полезности по верстке, дизайну и другим фичам.
Итак поехали, с чего стоит начать?
1. Я думаю сначала стоит установить удобный и комфортный редактор для кода. Одним из лидеров на данный момент является VSC или Visual Studio Code от Microsoft
Я рекомендую качать редактор с оф. сайта и вот ссылка на скачивание.
Как установить нужный язык, я думаю найдете инструкции в сети их более чем достаточно. VSC гибко настраиваемы и расширяемый. Уже написаны тысячи расширений. Но я думаю Вам в начале будет и коробочной версии.
Тем кто захочет поизголяться о настроить редактор под себя вот видео, оно не мое, но мне лень снимать а Алексей (автор ролика) ну очень классно все объяснил и показал.
Начиная с этого поста я решил, что стоит публиковать чужие видео на своем сайте, тем более если это качественные ролики профессионалов.
Как изучать HTML и CSS, где брать информацию?
Просто тупо читая или наблюдая на экране Вы врядли что либо усвоите. Чтоб получить результат нужно выполнять задания и получать практику.
Ниже я приведу ряд источников и к каждому приложу краткое резюме.
Крутой ресурс для кто начинает совсем с нуля.
Бесплатно регистрируетесь и в интерактивной, игровой форме проходите сначала входящий курс, потом сложнее и так далее. Курсы в основном там все бесплатные, есть интерактивная проверка заданий. Вобщем рекомендую для старта новичкам самое то.
Одно время думал завести себе там аккаунт для того чтоб вести своих подписчиков, но как обычно времени не хватает))
2. Видеокурсы.
Сначала я хотел выложить целый список бесплатных кусов, но к сожалению почти все они устарели а авторы не утруждают себя обновлением. Да, с переходом на HTML5 многое изменилось.
Курс Михаила Русакова, довольно содержательный и что хорошо он так же с домашними заданиями.
Бесплатный курс по HTML и CSS
Больше 6-ти часов уроков + упражнения
Я даже планировал разместить все уроки этого курса на своем сайте с разбором ДЗ, если интересно пишите в комментариях.
Онлайн-тренинги!
Пожалуй один из самых подуктивных методов обучения. Отлично кода ты сначала смотришь видео, потом тебе дают задание и после еще и проверяют.
Я дам ссылки на два, один бесплатный и второй за символическую плату, но с классными наставниками.
Я не участвую в партнерках этих ресурсов просто рекомендую как хорошие источники знаний.
Есть конечно задержки с проверкой, но ведь нужно понимать что проект бесплатный и Артем не может сидеть и «пасти» каждый комментарий.
Но тем не менее курс достаточно объемный, целых 55 видео, так что есть с чем поработать.
Он платный, стоит, по моему 9 долларов. Но эти деньги вы платите за помощь наставника который проверяет Ваши ТЗ и ведет Вас.
Всего в курсе объемных 7 уроков, но уже к концу тренинга Вы сможете написать свой первы сайт на чистом HTML с CSS и даже поймете как работаю простые команды в JS.
Я даю ссылку, она не партнерская, Wayup до сих пор «жлобствует» и никак не подключит партнерскую программу.
Но курс действительно хороший и рабочий, поэтому я его смело рекомендую новичкам.
Вот пожалуй и все что хотел Вам сегодня рассказать.
В конце еще пара советов как лучше изучать и что делать дальше.
Обучение CSS
Начинаем работу с HTML + CSS
Оглавление
Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.
Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.
В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:
Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.
Заметьте, что я не претендую на то, что это очень красиво ☺
Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.
ШАГ 1: написание HTML кода
Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.
Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.
Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:
(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)
Слова между называются тэгами и как вы можете видеть, документ содержится между и тэгами. Между and находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.
Код HTML в редактор KEdit.
Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги и
, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.
Давайте предположим, что данная страница будет одной из страниц Веб сайта, состоящего из нескольких похожих страниц. Как мы и договорились, эта страница будет содержать ссылки на другие страницы нашего гипотетического сайта, уникальное содержимое и подпись.
Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.
Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)
Как Вы видите, страница выглядит достаточно скучно…
ШАГ 2: изменяем цвета
Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.
Нам нужно добавить элемент [и т.д.]
Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.
Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:
Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)
Теперь браузер показывает страницу к которой мы добавили цвет.
В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.
ШАГ 3: изменяем шрифты
Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.
В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13) :
Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.
Сейчас шрифт заголовков и основного текста различается.
ШАГ 4: добавляем навигацию
Список наверху HTML страницы представляет из себя навигацию по сайту. Множество сайтов имеют навигационное меню вверху страницы или по сторонам от содержимого. Наша страница тоже не будет исключением. Мы поместим меню слева, потому что это несколько привлекательнее, чем наверху.
Навигация уже на странице. Это список
- вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.
В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16) :
Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?
В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево
Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.
‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях
ШАГ 5: украшаем ссылки
Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).
Обычно браузеры выделяют гиперссылки цветом и подчеркиванием. Обычно, цвета похожи на те, что мы указали: синие для ссылок которые пользователь еще не открывал (или открывал долгое время назад), пурпурные дял страниц, которые он уже видел.
ШАГ 6: добавляем горизонтальные линии
Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом (строки 34-37) :
Теперь наше оформление закончено. Давайте вынесем таблицу стилей в отдельный файл, чтобы остальные файлы могли использовать ту же самую таблицу стилей, что и первый файл.
ШАГ 7: внешний CSS
Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.
Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.
Если вы сохраните файл и обновите его в браузере, то не должно произойти никаких изменений: страница по прежнему использует то же оформление что и в прошлый раз, но на этот раз оформление хранится во внешнем файле.
Дальнейшее изучение
Другая информация, включая большее количество уроков может быть найдена в разделе изучения CSS.