HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css html ilişkisi
html css relationship
css and html relationship
css relationship to html
css html inline
css html inline style
html css inliner, html inline and css
html css after inline
html inline css align
html inline css text align
html css inline code
html css inline menu
css html internal
html internal css example
html internal css class
css in html internal
css internal code in html
html harici css ekleme
html harici css kullanımı
css html external
html css external example
css html external link
css html selector
css html selector element
css html selectors
css select html comment
css html class selector
css html id selector
css id selector in html

CSS CSS-HTML İlişkisi

CSS CSS-HTML İlişkisi

Html dili Css dili ile eş zamanlı olarak çalışır. Tek başına bir işe yaramaz. Html sayfamıza Css dilini üç farklı şekilde ekleyebiliriz;

1-YEREL CSS(INLINE)

Yerel css ile doğrudan html etiketi içinde sadece o etiketi etkileyecek biçimler verebilirsiniz. Bunu sadece sayfanızda istisna olacak şeyler için kullanabilirsiniz.

Kullanımı:

Css
.contain {
background-color: lightblue;
}
.contain h1{
color: green;
}
p{
color:#CCC;
font-size:16px;
margin-left:10px;
}
Html
<html>
<head>
<style>
#kare{
border:1px red dashed;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="contain">
<h1>Birinci başlık</h1>
<p>Birinci paragraf</p>
<h1>İkinci başlık</h1>
<p>İkinci paragraf</p>
<h1>Üçünçü başlık</h1>
<p>üçüncü paragraf</p>
<div id="kare"></div>
<p style="color:#6624e2;font-weight:bold;">Özel yazı</p>
</div>
</body>
</html>

Html dili Css dili ile eş zamanlı olarak çalışır. Tek başına bir işe yaramaz. Html sayfamıza Css dilini üç farklı şekilde ekleyebiliriz;

1-YEREL CSS(INLINE)

Yerel css ile doğrudan html etiketi içinde sadece o etiketi etkileyecek biçimler verebilirsiniz. Bunu sadece sayfanızda istisna olacak şeyler için kullanabilirsiniz.

Kullanımı:

Css
/*Boş*/
Html
<p style="color:orange;font-size:12px;">mavi renkli küçük paragrafım</p>

2-GENEL CSS(INTERNAL)

Genel css sadece o sayfadaki etiketleri biçimlendirmek için kullanılır. Diğer sayfalardaki etiketleri etkilemez. Bu yöntem ile sayfadaki tüm ilgili etiketleri aynı anda biçimlendirebilirsiniz. Örnek ile daha iyi anlayacaksınız..

Kullanımı:

Css
/*Boş Sayfa*/
Html
<html>
<head>
<style>
h2{
color:#7939f0;
}
p{
color:#721805;
}
</style>
</head>
<body>
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</body>
</html>

3-HARİCİ(EXTERNAL) CSS

Harici css ile html dosyanıza css kodu yazmadan ayrı bir css dosyası ile html dosyanızdaki etiketlerinizi biçimlendirmeniz sağlanır. Genel Css"' den bir farkı yoktur, sadece html kodlarınızı ve css kodlarınızı birbirlerinden ayırmış ve daha düzenli bir hale getirmiş olursunuz. Genelde web siteleri bu yöntem ile biçimlendirilir.

Kullanımı:

Css
/*stil.css*/
h2{
color:#7939f0;
}
p{
color:#721805;
}
Html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</body>
</html>

Html kodlarımızdaki etiketle rin hepsini nasıl aynı anda düzenleyeceğimizi öğrendik.

Peki mesela bütün paragrafları değilde sadece belirlediğim paragrafları nasıl düzenlerim ?

Bunun için id ve class denen seçicilerden yararlanırız. Bu seçiciler ile etiketlerimizi dilediğimiz şekilde guruplandırabilir ve seçebiliriz. Bunları birer örnekle açıklayalım.

1-ID Seçicisi(Selector)

Id seçicisi etiketin bir özelliğidir. Bu seçici sadece bir tek etikete verilebilir. Dikkat edin etiket gurubuna demedim yani sayfadaki tüm <p> etiketlerine bunu veremezsiniz, sadece bir tek <p> etiketine verebilirsiniz. Aşağıdaki örnek ile bir bakışta anlayacaksınız zaten.


Css
#uyari{
color:red;
font-size:16px;
font-weight:bold;
}
Html
<html>
<head>
</head>
<body>
<h1>Birinci başlık</h1>
<p>Birinci paragraf</p>
<h1>İkinci başlık</h1>
<p>İkinci paragraf</p>
<h1>Üçünçü başlık</h1>
<p>üçüncü paragraf</p>
<div id="kare"></div>
<p id="uyari">Dikkat: Lütfen yazım kurallarına uyunuz !</p>
</body>
</html>

2-Class Seçicisi(Selector)

Class seçicisi, etiketleri guruplandırmanızı sağlar. Mesela "Meyveler" başlıklı bir sayfanız var. Her meyve için yazdığınız paragraf etiketlerine "meyve" isminde class değeri verirseniz. Tüm meyve paragraflarını guruplandırmış oluruz, böylece de sadece onları istersek biçimlendirebiliriz. Aşağıdaki örneği incelerseniz daha anlayabilirsiniz.

Kullanımı:

Css
.meyve{
color:#681b1b;
}
h2{
color:#397be9;
}
h1{
color:Red;
}
Html
<html>
<head>
</head>
<body>
<h1>MEYVELER</h1>
<h2>Kivi</h2>
<p class="meyve">kivi hakkında paragraf</p>
<h2>Armut</h2>
<p class="meyve">armut hakkında paragraf</p>
<h2>Çilek</h2>
<p class="meyve">çilek hakkında paragraf</p>
</body>
</html>

Son Olarak..

Html etiketlerinize nasıl Css ile ulaşabileceğinizi bu derste öğrenmiş olduk. Diğer derslerimizde etiketlerimizi nasıl daha iyi biçimlendirebileceğimizi göreceğiz...



Paylaş:

Enes KILIÇ
Webmaster