Уявіть собі веб-сайти без CSS – це був би нудний, одноманітний світ. Саме мова стилів CSS надає веб-сторінкам індивідуальності, визначаючи вигляд тексту, його розмір, колір і розташування.
Що таке CSS?
CSS (Cascading Style Sheets), або каскадні таблиці стилів – це мова, яка диктує, як саме HTML-елементи повинні відображатися на екрані комп’ютера чи на папері. CSS була розроблена консорціумом World Wide Web Consortium (W3C) у 1996 році.
HTML-елементи, на момент свого створення, не мали вбудованих інструментів для форматування веб-сторінок. Розробники лише створювали розмітку сторінки. Впровадження тегів на кшталт <font> в HTML 3.2 створило для них нові виклики.
Коли веб-сторінки почали використовувати кольорові фони, різноманітні шрифти та різні стилі, переписування коду стало дорогим та складним процесом. W3C розробили CSS, щоб вирішити ці проблеми, і ця технологія продовжувала розвиватися з часом.
Чому CSS є необхідним?
#1. Ефективність CSS
CSS звільняє нас від необхідності постійно додавати теги, такі як <font>, а також вирівнювання елементів, рамки, кольори, стилі фону та розміри на кожній веб-сторінці.
#2. Економія часу
Ви можете легко змінити зовнішній вигляд всього веб-сайту, редагуючи лише один файл CSS.
#3. Сумісність з різними пристроями
Сучасні користувачі переглядають веб-сайти на пристроях з різною діагоналлю екранів, таких як персональні комп’ютери, планшети та смартфони. CSS дозволяє створювати веб-сторінки, які адаптуються до розмірів екрана пристрою.
#4. Зручне обслуговування веб-сайтів
Веб-додатки постійно оновлюються і змінюються. CSS дозволяє легко модифікувати окремі елементи або навіть весь веб-сайт, не змінюючи при цьому базову структуру коду.
Як CSS взаємодіє з HTML для створення веб-сайтів?
HTML є стандартною мовою розмітки, яка використовується для створення структури веб-сторінок. CSS, в свою чергу, визначає, як саме ці веб-сторінки мають виглядати. Веб-сторінка, створена з використанням HTML і CSS, зазвичай складається з HTML-файлу з текстом, посиланнями на зображення та HTML-тегами.
HTML-файл може мати окремий CSS-файл, який пов’язаний з ним за допомогою тегу <link>, або використовувати внутрішні чи вбудовані стилі CSS. Наприклад, HTML-файл може містити заголовок <h1> та абзац, позначений тегом <p>. За допомогою CSS можна налаштувати, щоб увесь текст абзацу був відображений жирним шрифтом, а текст заголовка мав розмір 50 пікселів і зелений колір.
Далі ми покажемо, як саме взаємодіють HTML та CSS на практиці.
Типи CSS
#1. Зовнішній CSS
Для використання зовнішнього CSS потрібен окремий файл HTML та окремий CSS-файл з розширенням .css, наприклад, style.css. CSS-файл пов’язується з HTML-документом за допомогою тегу <link>.
Приклад зовнішнього CSS-файлу:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS-файл може бути пов’язаний з HTML-документом таким чином:
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
Тег <link> пов’язує зовнішню таблицю стилів з HTML-документом, а атрибут href визначає її розташування.
Веб-сторінка відобразиться наступним чином:
Зовнішній CSS є найоптимальнішим підходом, оскільки він полегшує створення багаторазових компонентів та внесення глобальних змін у кодову базу.
#2. Внутрішній CSS
Внутрішній CSS підходить для випадків, коли потрібно унікально стилізувати один HTML-документ. Правила стилів записуються всередині HTML-документа, у розділі <head>.
Приклад внутрішнього CSS:
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
Веб-сторінка виглядатиме так:
Внутрішній CSS не є оптимальним рішенням, оскільки робить HTML-код занадто великим, що може вплинути на швидкість завантаження веб-сторінки.
#3. Вбудований CSS
Вбудований CSS означає, що CSS-стилі додаються безпосередньо в тілі HTML-документа. Наприклад, можна стилізувати абзац, заголовок або навіть елемент <div> за допомогою вбудованого CSS.
<title>Inline CSS</title>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
Відображення веб-сторінки буде таким:
Вбудований CSS не підходить для масштабування веб-застосунків, оскільки додавання CSS-властивостей до кожного HTML-тегу займає значний час.
Далі розглянемо найкращі онлайн-курси та книги для вивчення CSS.
Створення адаптивних веб-сайтів за допомогою HTML та CSS
Цей курс навчить вас створювати адаптивні веб-сайти, що коректно відображаються на будь-яких пристроях, з використанням HTML5 та CSS3. Для проходження курсу не потрібні попередні знання з веб-розробки. Ви опануєте такі концепції, як блокова модель, розв’язання конфліктів селекторів, схеми позиціонування та успадкування.
Це ідеальний курс для тих, хто хоче навчитися планувати, малювати, кодувати, тестувати та оптимізувати професійні веб-сайти.
Розширений CSS та Sass
Курс «Розширений CSS та Sass» допоможе вам зрозуміти, як CSS працює за лаштунками, вивчаючи такі теми, як каскадування, специфічність та успадкування.
Курс охоплює сучасні методи CSS для створення потужних та адаптивних веб-сторінок. Він також познайомить вас із Saas та його використанням у проектах, зокрема розробку CSS, глобальні змінні та керування медіа-запитами.
Цей курс буде корисним, якщо ви хочете вивчити анімацію CSS, адже він торкається @keyframes, анімації та переходів.
Вивчення CSS
Курс “Вивчення CSS” від Codecademy навчить вас, як перетворювати HTML-елементи на візуально привабливі веб-сайти. Курс складається з 8 уроків і 6 практичних проектів, які допоможуть перевірити ваші знання.
Ви навчитеся додавати стилі до HTML-елементів, об’єднувати файли HTML і CSS, а також створювати унікальні макети веб-сторінок.
Створення першої веб-сторінки з HTML та CSS
Курс “Створення першої веб-сторінки” навчить вас використовувати HTML5 та CSS3 для розробки адаптивних веб-сайтів. Цей безкоштовний курс складається з 4 модулів і займає приблизно 10 годин для проходження. Попередні знання програмування не потрібні.
Основи CSS
Курс “Основи CSS” розроблено W3Cx. Тут ви вивчите кращі практики веб-дизайну, основні селектори CSS та способи вибору властивостей CSS. Курс розділений на 5 модулів і потребує близько 5 тижнів навчання, якщо ви приділятимете 5-7 годин на тиждень.
Знайомство з CSS3
Цей курс знайомить вас з каскадними таблицями стилів. Ви навчитеся писати CSS-правила, розвивати хороші звички кодування та тестувати свій код. Для проходження цього курсу потрібно близько 12 годин, а по його закінченню ви отримаєте сертифікат.
Знайомство з HTML та CSS
Цей вступний курс з HTML та CSS навчить вас створювати стильні та добре структуровані веб-сайти. Ви дізнаєтеся, як створювати веб-сайти на основі деревоподібної структури, а потім стилізувати їх за допомогою CSS.
Цей безкоштовний курс підходить для початківців та побудований на самостійному навчанні. Для завершення знадобиться близько 3 тижнів, а викладачами є експерти галузі.
Підручник CSS
«CSS Tutorial» — це безкоштовний курс на W3schools. Він поділений на розділи для кращого розуміння. Кожен розділ містить приклади та вправи. На платформі є онлайн-редактор, де можна експериментувати з різними концепціями за допомогою кнопки «Спробуйте самі».
CSS: повне керівництво
Книга “CSS: The Definitive Guide” стане у нагоді, якщо ви хочете вивчити основи CSS, починаючи від селекторів і закінчуючи каскадами. У книзі також детально описано flexbox, позиціонування та способи обтікання елементів.
Ця книга стане вам у нагоді, якщо ви хочете навчитися використовувати CSS для створення 2D та 3D трансформацій, переходів та анімацій. “Повне керівництво” доступне як у версії для Kindle, так і в друкованому вигляді.
Адаптивний веб-дизайн з HTML5 та CSS
У цій книзі ви дізнаєтеся, як створювати адаптивні веб-сайти з використанням HTML5 і CSS. Ви навчитеся розробляти веб-сайти, які ідеально працюють на комп’ютерах, планшетах та смартфонах.
Книга написана у доступному форматі та доступна як у друкованому вигляді, так і у форматі Kindle.
HTML та CSS: дизайн та створення веб-сайтів
Ця книга про HTML та CSS ідеально підійде всім, незалежно від вашого рівня, чи ви любитель, студент або професіонал.
Автор використовує інфографіку та фотографії для наочної ілюстрації різних концепцій, що робить сприйняття матеріалу легшим. Книга має унікальну структуру, що полегшує навігацію по розділах.
Сучасний CSS
Книга “Сучасний CSS: опануйте ключові концепції CSS для сучасної веб-розробки” навчить вас CSS на прикладах коду, діаграмах та скріншотах.
У перших розділах книги розглядаються кольори, селектори, блокові моделі, комбінатори та специфічність. Далі йде вивчення стилів тексту, позиціонування, градієнтів, рамок, Z-індексу та контекстів стекування. Ви також навчитеся складним темам, таким як переходи, анімації, трансформації, flexbox та сітки CSS.
Заключні слова
Важко переоцінити роль CSS у сучасному веб-дизайні. Окрім того, що він робить веб-сторінки візуально привабливими, CSS полегшує навігацію по сайтах.
Вивчення CSS може бути легким, якщо ви скористаєтесь наведеними вище ресурсами. Деякі з цих курсів є безкоштовними, а інші — платними.
Також, ви можете переглянути шпаргалки CSS для розробників і дизайнерів.