---
- CSS (Cascading Style Sheets) → HTML yapısına stil ve tasarım ekler.
- HTML = iskelet 🦴, CSS = giydirme 🎨.
- Web sayfasının renk, yazı tipi, düzen, boyut gibi görsel yönlerini kontrol eder.
CSS 3 farklı şekilde eklenebilir:
<p style="color: red;">Bu kırmızı yazı</p><head>
<style>
p { color: blue; }
</style>
</head><head>
<link rel="stylesheet" href="style.css">
</head>/* Etiket seçici */
p {
color: green;
}
/* Class seçici */
.uyari {
color: red;
font-weight: bold;
}
/* ID seçici */
#baslik {
font-size: 24px;
text-align: center;
}body {
background-color: #f0f0f0; /* Açık gri */
}
h1 {
color: darkblue;
font-family: Arial, sans-serif;
}
p {
color: #333;
line-height: 1.5;
}Her HTML elemanı görünmez bir kutudur:
- content (içerik)
- padding (iç boşluk)
- border (kenarlık)
- margin (dış boşluk)
.kutu {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 15px;
}.block { display: block; } /* Yeni satır kaplar */
.inline { display: inline; } /* Satır içinde devam eder */
.flex { display: flex; } /* Esnek düzen */.kutu1 { position: static; } /* Varsayılan */
.kutu2 { position: relative; top: 10px; left: 10px; }
.kutu3 { position: absolute; top: 0; right: 0; }
.kutu4 { position: fixed; bottom: 0; left: 0; }✔️ Dış CSS dosyası kullan, inline’dan kaçın.
✔️ Renkleri hex (#ff0000) veya rgb (rgb(255,0,0)) ile tanımla.
✔️ Class kullan → Tekrarlayan stillerde işini kolaylaştırır.
❌ ID ile stil vermek → Çok katı olur, esnekliğini kaybedersin.
❌ Fazla !important → Kodunu karmaşık hale getirir.
- Bir kutu oluştur (
div),200pxgenişlik, kırmızı arka plan ver. - Bir yazıyı ortala ve mavi renkte yap.
- Üç kutuyu yan yana dizmek için flexbox kullan.
CSS, web sayfana hayat verir ✨.
HTML sadece “ne var?” derken, CSS “nasıl görünecek?” sorusunu cevaplar.
Flexbox, Grid gibi modern CSS özellikleri sayesinde çok daha kolay düzen kurabilirsin. 🚀
- CSS (Cascading Style Sheets) → Adds style and design to the HTML structure.
- HTML = skeleton 🦴, CSS = dressing 🎨.
- Controls visual aspects of a web page such as color, font, layout, and size.
CSS can be added in 3 different ways:
<p style="color: red;">This red text</p><head>
<style>
p { color: blue; }
</style>
</head><head>
<link rel="stylesheet" href="style.css">
</head>/* Tag selector */
p {
color: green;
}
/* Class selector */
.warning {
color: red;
font-weight: bold;
}
/* ID selector */
#title {
font-size: 24px;
text-align: center;
}body {
background-color: #f0f0f0; /* Light gray */
}
h1 {
color: darkblue;
font-family: Arial, sans-serif;
}
p {
color: #333;
line-height: 1.5;
}Every HTML element is an invisible box:
- content (content)
- padding (inner space)
- border (border)
- margin (outer space)
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 15px;
}.block { display: block; } /* Span new line */
.inline { display: inline; } /* Continues within the line */
.flex { display: flex; } /* Flexible layout */.box1 { position: static; } /* Default */
.box2 { position: relative; top: 10px; left: 10px; }
.box3 { position: absolute; top: 0; right: 0; }
.box4 { position: fixed; bottom: 0; left: 0; }✔️ Use an external CSS file, avoid inline.
✔️ Define colors with hex (#ff0000) or rgb (rgb(255,0,0)).
✔️ Use a class → Makes it easier for repeating styles.
❌ Styling with an ID → It's too rigid, and you lose flexibility.
❌ Too much !important → It makes your code more complex.
- Create a box (
div), give it a width of200px, and a red background. - Center the text and make it blue.
- Use flexbox to line up three boxes side by side.
CSS brings your web page to life ✨. HTML just asks, "What's there?", while CSS answers the question, "How will it look?" You can create layouts much more easily thanks to modern CSS features like Flexbox and Grid. 🚀