HTML sayfalarını CSS ile DüzenlemeHtml içerisinde düzenleme yaparken sayfanın stilini oluşturmak için css yapısını kullanacağız. Html de Css kod yapısı 3 şekil de kullanılmaktadır.
1. Inline Html sayfası içerisinde ayrı bir css dosyası oluşturmadan <h1> etiketleri arasında aynı sayfa içerisin de düzenleme yapmamıza yardımcı olur bunu bir örnekle aşağıda belirttiğimiz de daha iyi anlaşılacak.
Örnek<h1 style="color:blue;">HTML Dersleri</h1>Aynı Sayfa içerisinde yazılacak yazının rengini başka bir düzenlemeye gerek kalmadan mavi olarak yazmasını istedik.
2. Internal Css de ise dahili css kodlarını <head> altına <style > etiketleri arasına yazacağımız css kodlarını aynu html sayfası içerisinde alt alta yazarak kullanmak
örnek<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red;}
h1 {color: white;}
p {color:black;}
</style>
</head>
<body>
<h1>HTML Dersleri</h1>
<p>Css yi Html sayfasına dahil etme</p>
</body>
</html>
External CSS (Harici css dosyaları oluşturma)
Burada hazırlamış olduğumuz Html projesinde bir çok html sayfasının harici bir css dosyasıyla yönetilmesinin sağlanması.
Örnek<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>HTML Dersleri</h1>
<p>Css Harici stil dosyası oluşturma/p>
</body>
</html>
Buradaki ayrıntı uzantısı "
styles.css" olan bir veya birden fazla stil dosyası harici olarak hazırlanıp ana dosyadan "
<link rel="stylesheet" href="styles.css"> "kodula çağrılarak sayfa stilini oluşturmaktan ibarettir.
Alttaki kodlar html kodu içermeden ayrı bir dosya halinda uzantısı "
styles.css" olarak oluşturulur.
body {
background-color: red;
}
h1 {
color: white;
}
p {
color: black;
}Css Fonts (Css Yazı Tipleri)
color = Renk Özelliğini Belirtmek İçin Kullaılır.
font-family = Yazı Tipini Belirlemek İçin Kullanılır.
font-size = Yazı Boyutunu Belirlemede Kullanılır.
Örnek<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 200%;
}
p {
color: red;
font-family: courier;
font-size: 120%;
}
</style>
</head>
<body>
<h1>HTML Css Desleri</h1>
<p>Css Yazı Fontları</p>
</body>
</html>
CSS Border (Css Kenarlıklar)
Border = Yazılarınızı kutu içerisine alır bir başka değişle kenerlıklar ekler.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Css border</h1>
<p>Css border</p>
<p>Css border</p>
<p>Css border</p>
</body>
</html>
CSS Padding (dolgu ,Boşluk)
Metinle Kenarlık arasındaki mesafe ayarını yapar
Örnek<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 40px;
}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<p>CSS Padding</p>
<p>Metin ile Kenarlık arasında </p>
<p>Boşluk,Dolgu yapar, sınırı ayarlar</p>
</body>
</html>
CSS Margin= Kenarlıklar arasındaki boşluk miktarını belirler
Örnek<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
margin: 40px;
}
</style>
</head>
<body>
<h1>CSS Margin</h1>
<p>CSS Margin</p>
<p>CSS Margin</p>
<p>CSS Margin</p>
</body>
</html>
Linkback:
HTML sayfalarını CSS ile Düzenleme
