Преглед на кода на CSS – Да облечем скелета със стил и душа

[[Category:Уеб програмиране]]
[[Category:WIKI-TONI]]
{{Футър}}

= 🎨 CSS – Да облечем скелета със стил и душа =

== 🧠 HTML е структура. CSS е личност. ==

Ако HTML е тухлата, CSS е облицовката.  
Ако HTML е скелетът, CSS е кожата, дрехите и излъчването.  
С помощта на CSS сайтът не просто **изглежда добре** – той започва да **говори визуално.**

<blockquote style="background-color:#fff5f5; border-left:4px solid #e60039; padding:10px;">
<strong>CSS</strong> (Cascading Style Sheets) е езикът, чрез който задаваме визията – цветове, размери, подредба, шрифтове и анимации на HTML елементите.
</blockquote>

== ✨ Да преобразим HTML страницата ==

Първо, ще създадем външен CSS файл: `style.css`  
И ще го свържем в HTML-а така:

<pre><nowiki>
<head>
  <meta charset="UTF-8">
  <title>Моята стилна страница</title>
  <link rel="stylesheet" href="style.css">
</head>
</nowiki></pre>

След това в `style.css` пишем следното:

<pre><nowiki>
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;
}
</nowiki></pre>

== 🌈 Резултатът? ==

- Нежен фон  
- Приятен шрифт  
- Ясни заглавия  
- Стилни линкове  
- **Атмосфера. Чувство. Стил.**

== 📦 За какво още можем да използваме CSS? ==

• Създаване на responsive дизайн  
• Анимации и преходи  
• Flexbox / Grid подредба  
• Теми – светъл/тъмен режим  
• Мобилна оптимизация

== 💡 Съвет от мен: ==

> Стилът не е просто визуална украса.  
> Той е **съобщение без думи**.  
> Подбери цветове, които говорят.  
> Подреди, за да водиш погледа.  
> CSS е дизайн с душа – и душата си си ти.

–––––––––––––––––––––––––––––––––––––––––

<b>Следваща стъпка: [[JavaScript – Да вдъхнем живот на страницата]]</b>