Paragraphs are created using a paired <p><\/code> tag with a small amount of text in the body. For example:<\/p>\n
<p>First paragraph<\/p>\n<p>Second paragraph<\/p><\/code><\/pre>\n```\n\n\n\n## Ejemplo de texto con estilo personalizado\n\n```html\n
Paragraphs<\/p>\n
Paragraphs are created using a paired <p><\/code> tag with a small amount of text in the body. For example:<\/p>\n
<p>First paragraph<\/p>\n<p>Second paragraph<\/p><\/code><\/pre>\n```\n\n\n\nAhora el texto es más legible y se puede diferenciar rápidamente los ejemplos de código de las descripciones. En el curso se explicarán las reglas básicas de CSS para trabajar con texto y bloques, lo que permitirá dar formato al texto y estructurar visualmente la información.\n","version_id":76601,"description":null,"definitions":[],"tips":[],"created_at":"2025-12-30T14:12:54.353Z","prepared_code":"","original_code":"
First style change using CSS<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'p');\n\n const style = getComputedStyle(element);\n expect(style).to.have.property('font-size', '25px');\n});\n","version":76601,"slug":"introduction","natural_order":1,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-css\/blob\/main\/modules\/10-basics\/10-introduction\/es\/README.md"},"nextLesson":null,"courseModules":[{"locale":"ru","description":"Cascading Style Sheets (CSS) — каскадные таблицы стилей, которые позволяют оформлять содержимое страницы в соответствии с описанными правилами. Стили текста, расположение блоков на странице, анимация — всё это описывается с помощью каскадных таблиц стилей.\n","name":"Введение в CSS","id":53},{"locale":"ru","description":"Каскадные таблицы стилей позволяют гибко настраивать внешний вид текста: отступы, цвет, размер шрифта и многие другие параметры.\n","name":"Стили текста","id":54},{"locale":"ru","description":"При работе с CSS используют не только оформление текстов, но и оформление блоков. В этом модуле вы изучите, как добавлять внутренние и внешние отступы, границы, фон. Узнаете о том, что такое блочная модель и как свойства влияют на конечные размеры элементы\n","name":"Блочные элементы","id":57},{"locale":"ru","description":"Одна из задач верстальщика — позиционирование элементов на странице. То есть расположение элементов в соответствии с макетом. Это позволяет располагать элементы справа или слева от других блоков, создавать галереи. В этом модуле рассмотрим основы модуля Flex, который позволит позиционировать элементы на странице\n","name":"Расположение элементов с помощью Flex","id":170},{"locale":"ru","description":"Описать все возможности CSS в рамках одного курса невозможно. В настоящее время CSS — мощный инструмент, позволяющий задавать стили текста, блоков, анимацию. Вводятся переменные и вычисление значений. CSS позволяет в рамках одной вёрстки сделать версию для компьютеров и мобильных устройств.\n","name":"Разное","id":58}],"lessonsByModuleId":{"53":[{"language":{"id":7,"slug":"css","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2078,"created_at":"2019-07-24T19:19:00.000Z","current_version":{"id":2078,"result":"Success","state":"built","created_at":"2025-12-30T14:12:41.188Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-css","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjEwLCJwdXIiOiJibG9iX2lkIn19--2b74eeb80fc0d6954ea32266662985ca97eeda2a\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/css.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjEwLCJwdXIiOiJibG9iX2lkIn19--2b74eeb80fc0d6954ea32266662985ca97eeda2a\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/css.png","rating_count":89,"members_count":57008,"rating_value":5},"id":344,"name":"Каскадные таблицы стилей","locale":"ru","instructions":"Скопируйте код в редактор. Попробуйте подставлять различные значения, чтобы увидеть, как работает редактор. Тесты ожидают полную копию кода ниже.\n\n```html\n
Первое изменение стиля с помощью CSS<\/p>\n```\n","theory":"\nВ курсе, посвящённом языку разметки HTML, были рассмотрены различные элементы, которые, по умолчанию, имели стилевое оформление: параграфы отделялись отступами, ссылки отличались цветом, заголовки различались размером текста и т.д. Будучи разработчиком можно изменять это оформление и добавлять совершенно новое. Добавить фон к тексту? Изменить размеры элементов? Создать анимацию? Всё это можно сделать с помощью CSS (англ. Cascading Style Sheets — Каскадные таблицы стилей) — языка, который определяет, как будут выглядеть HTML-элементы в браузере.\n\nКурс по CSS является логическим продолжением [курса по HTML](https:\/\/ru.code-basics.com\/languages\/html). Многие теги и понятия, которые будут встречены по ходу прохождения уже рассматривались.\n\nНа примере ниже показывается вывод текста без использования своего CSS (то есть применяются те стили, которые «проставляет» браузер) и то, как можно стилизовать документ с использованием CSS.\n\n## Пример текста со стандартным оформлением\n\n```html\n
Paragraphs<\/p>\n
Paragraphs are created using a paired <p><\/code> tag with a small amount of text in the body. For example:<\/p>\n
<p>First paragraph<\/p>\n<p>Second paragraph<\/p><\/code><\/pre>\n```\n\n\n\n## Пример текста с пользовательским оформлением\n\n```html\n
Paragraphs<\/p>\n
Paragraphs are created using a paired <p><\/code> tag with a small amount of text in the body. For example:<\/p>\n
<p>First paragraph<\/p>\n<p>Second paragraph<\/p><\/code><\/pre>\n```\n\n\n\nТеперь текст читается проще, и можно быстро отделить примеры кода от описания. В курсе будут рассмотрены базовые CSS-правила для работы с текстом и блоками, которые позволят оформить текст и визуально структурировать информацию.\n","version_id":76601,"description":null,"definitions":[],"tips":[],"created_at":"2025-12-30T14:12:59.764Z","prepared_code":"","original_code":"
First style change using CSS<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'p');\n\n const style = getComputedStyle(element);\n expect(style).to.have.property('font-size', '25px');\n});\n","version":76601,"slug":"introduction","natural_order":1,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-css\/blob\/main\/modules\/10-basics\/10-introduction\/ru\/README.md"},{"language":{"id":7,"slug":"css","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2078,"created_at":"2019-07-24T19:19:00.000Z","current_version":{"id":2078,"result":"Success","state":"built","created_at":"2025-12-30T14:12:41.188Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-css","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjEwLCJwdXIiOiJibG9iX2lkIn19--2b74eeb80fc0d6954ea32266662985ca97eeda2a\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/css.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjEwLCJwdXIiOiJibG9iX2lkIn19--2b74eeb80fc0d6954ea32266662985ca97eeda2a\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/css.png","rating_count":89,"members_count":57008,"rating_value":5},"id":345,"name":"Использование CSS в HTML","locale":"ru","instructions":"Добавьте в редактор тег `
<\/p>` и, используя атрибут `style`, установите размер шрифта в 12 пикселей.\n","theory":"\nЯзык стилей CSS не связан с HTML напрямую. Необходимо указать браузеру, откуда нужно загрузить и интерпретировать стили. Для этого есть три способа:\n\n1. Указать стили в качестве значения атрибута `style`. Такую запись называют «инлайн» (inline), что означает запись правила в одну строку с использованием атрибута `style`.\n2. Использовать специальный тег `
CSS – это мощный и гибкий язык стилей, который используется для оформления веб-страниц и интерфейсов. С его помощью ты создашь красивые и адаптивные сайты, добавишь анимации и эффекты, а также научишься делать удобные пользовательские интерфейсы. CSS легко освоить, он востребован в веб-разработке, а его сочетание с HTML и JavaScript открывает широкие возможности для карьеры в IT
Чему вы научитесь на курсе “Основы CSS”
Разберётесь в базовом синтаксисе CSS — это фундаментальный навык, который позволит вам оформлять веб-страницы и управлять их внешним видом. После курса вы сможете задавать стили для текста, блоков и элементов, настраивать их размеры, отступы и цвет, а также располагать элементы на странице с помощью Flexbox
Cascading Style Sheets (CSS) — каскадные таблицы стилей, которые позволяют оформлять содержимое страницы в соответствии с описанными правилами. Стили текста, расположение блоков на странице, анимация — всё это описывается с помощью каскадных таблиц стилей.
Платформа: Теория, Практика, ИИ
Удобный формат
Всё, что нужно для освоения новых тем, — на одном экране. Теория, практика и живые примеры идут рука об руку. Чёткая структура помогает учиться последовательно и не упускать важные детали
Практика в браузере
Вам не нужно ничего устанавливать — все задания выполняются прямо в браузере. Встроенный редактор кода, консоль и автоматические тесты делают обучение комфортным. А если что-то не получается, всегда можно посмотреть решение учителя
Помощь AI без ограничений
AI объясняет темы, подсказывает, как решить задания, и помогает в любой момент — как личный наставник 24/7
Попробуйте демо-урок без регистрации. Практика включена
Знание CSS необходимо каждому, кто хочет работать во фронтенде, заниматься веб-дизайном или версткой. Это базовый навык, без которого невозможно создать интерфейс сайта. Освоив CSS, вы сможете делать адаптивные макеты, настраивать внешний вид элементов и работать в команде с разработчиками и дизайнерами. Эти навыки востребованы в digital-сфере, IT и креативных индустриях.
Почему стоит выбрать именно CSS?
CSS — это незаменимый инструмент для стилизации веб-страниц. Он прост в освоении и позволяет создавать красивые, адаптивные и удобные интерфейсы. CSS используется повсеместно: от лендингов и интернет-магазинов до крупных веб-приложений. Он легко сочетается с HTML и JavaScript, а его изучение — обязательный этап на пути к профессии фронтенд-разработчика. Даже минимальные знания CSS дают ощутимый результат в работе с визуальной частью сайтов.
Что делать после прохождения курса «Основы CSS»?
После курса вы сможете уверенно применять стили к веб-страницам, работать с шрифтами, цветами, блоками и сетками. Следующим шагом станет изучение современных инструментов, таких как Flexbox и Grid, а также переход к адаптивной верстке и анимации. Это позволит вам создавать профессиональные макеты, а в дальнейшем перейти к изучению JavaScript и собирать полноценные интерфейсы.
Выдается ли сертификат по окончании курса?
Сертификат не выдается, но вы получаете практические знания, с которыми сможете самостоятельно создавать и оформлять веб-страницы. Вы научитесь работать со стилями, разбираться в иерархии и наследовании, использовать классы, медиазапросы и другие базовые инструменты CSS. Это станет важным шагом в вашем развитии как разработчика или дизайнера.
Как быстро можно освоить CSS с нуля?
Основы CSS можно освоить за одну-две недели при регулярной практике. Это интуитивно понятный язык, и первые результаты видны сразу, что делает процесс обучения особенно вдохновляющим. Чтобы уверенно работать с макетами, адаптацией и сложными стилями, потребуется немного больше времени, но первые шаги даются легко.
Какие знания нужны перед началом изучения CSS?
Для старта будет полезно знать основы HTML, поскольку стили применяются именно к HTML-элементам. Однако если вы только начинаете, это не проблема — курс подойдёт и для полного новичка. Все темы объясняются пошагово, с примерами и задачами, поэтому вы быстро разберётесь, как работает CSS и как его применять на практике.
Можно ли изучать CSS без знания HTML и JavaScript?
Начать изучение CSS без знания JavaScript можно, а вот без HTML — нет. HTML и CSS работают в связке: HTML задаёт структуру страницы, а CSS — её внешний вид. Лучше всего изучать их параллельно, чтобы сразу видеть, как структура и стили взаимодействуют друг с другом.
Можно ли использовать CSS для создания мобильных приложений?
CSS не используется для создания нативных мобильных приложений, но он активно применяется при разработке адаптивных сайтов и веб-приложений, которые отлично работают на мобильных устройствах. Кроме того, CSS используется в гибридных технологиях, где веб-код запускается внутри мобильного приложения. Это делает CSS важным инструментом при создании кроссплатформенных интерфейсов.
