CSS – Да облечем скелета със стил и душа
📚 Това съдържание е част от личния архив и база знания на Тони Ангелчовски, създадено в рамките на проекта WIKI-TONI. Уики платформата е достъпна само за четене. Не се поддържат регистрации или външни редакции. ⚠️ Забранява се копирането, възпроизвеждането или използването на текстовете без предварително писмено разрешение от автора. Благодарим, че уважаваш авторството и вдъхновението зад всяка дума.
🎨 CSS – Да облечем скелета със стил и душа
🧠 HTML е структура. CSS е личност.
Ако HTML е тухлата, CSS е облицовката. Ако HTML е скелетът, CSS е кожата, дрехите и излъчването. С помощта на CSS сайтът не просто **изглежда добре** – той започва да **говори визуално.**
CSS (Cascading Style Sheets) е езикът, чрез който задаваме визията – цветове, размери, подредба, шрифтове и анимации на HTML елементите.
✨ Да преобразим HTML страницата
Първо, ще създадем външен CSS файл: `style.css` И ще го свържем в HTML-а така:
<head> <meta charset="UTF-8"> <title>Моята стилна страница</title> <link rel="stylesheet" href="style.css"> </head>
След това в `style.css` пишем следното:
body {
background-color: #f2f2f2;
font-family: 'Segoe UI', sans-serif;
color: #333;
padding: 40px;
}
h1 {
color: #004080;
text-transform: uppercase;
border-bottom: 2px solid #00ccff;
padding-bottom: 10px;
}
p {
font-size: 18px;
line-height: 1.6;
}
a {
color: #e60039;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
🌈 Резултатът?
- Нежен фон - Приятен шрифт - Ясни заглавия - Стилни линкове - **Атмосфера. Чувство. Стил.**
📦 За какво още можем да използваме CSS?
• Създаване на responsive дизайн • Анимации и преходи • Flexbox / Grid подредба • Теми – светъл/тъмен режим • Мобилна оптимизация
💡 Съвет от мен:
> Стилът не е просто визуална украса. > Той е **съобщение без думи**. > Подбери цветове, които говорят. > Подреди, за да водиш погледа. > CSS е дизайн с душа – и душата си си ти.
–––––––––––––––––––––––––––––––––––––––––
Следваща стъпка: JavaScript – Да вдъхнем живот на страницата