HTML Stilleri - CSS

Hazırlayan: Mücahit Akca

Web sayfalarının görünümünü belirlemek için HTML ve CSS kullanılır. HTML, web sayfalarını yapmak için kullanılan temel dildir ve web sayfalarındaki içerikleri belirler.

CSS ise, web sayfalarının stilini kontrol etmek için kullanılır. HTML stilleri, web sayfalarında yer alan öğelerin (başlık, paragraf, resim vb.) görünümünü değiştirmek için kullanılır. Örneğin, bir başlık metnini büyük ve kalın yapmak isterseniz, bunu HTML stilleri kullanarak yapabilirsiniz. CSS ise, HTML kodunun görünümünü daha detaylı bir şekilde kontrol etmenizi sağlar. Bu, daha karmaşık stiller oluşturmanızı ve web sayfalarının daha görsel açıdan çekici olmasını sağlar. Örneğin, sayfadaki tüm başlıkları büyük ve kalın hale getirmek istediğinizde, CSS kullanarak tüm başlıkları etkileyen bir stil tanımlayabilirsiniz.

CSS aşağıdaki şekillerde belirtilebilir:

1. Harici CSS: CSS kodu, ayrı bir dosyada saklanır ve HTML koduna "link" etiketi ile bağlanır.
2. İç CSS: CSS kodu, HTML kodunun 'head' etiketi içinde 'style' etiketi ile belirtilir.
3. Satır içi(Inline) CSS: Her bir HTML öğesi için ayrı ayrı belirlenen stillerdir. Bu stiller HTML öğesi içinde 'style' özelliği kullanılarak belirtilir.

Harici CSS

Bir CSS dosyası oluşturmak, web sayfalarının görüntüsünü düzenlemenin en iyi yoludur. Ayrı bir '.css' dosyası oluşturarak stil özelliklerini ayrı tutmak, web sayfasının daha kolay yönetilmesini sağlar.

Bir CSS dosyası oluşturmak için aşağıdaki adımları izleyin:

İlk olarak, bilgisayarınızda bir metin editörü (Notepad, Sublime Text, VSCode vb.) açın.
Dosya menüsünden 'Yeni' seçeneğini tıklayarak yeni bir dosya oluşturun. Dosyanın adını, '.css' uzantısı ile birlikte belirleyin. Örneğin, 'style.css' gibi.
Oluşturduğunuz CSS dosyasını açın ve web sayfanızdaki her bir öğe için belirlemek istediğiniz stilleri ekleyin.

HTML dosyanızın <head> bölümüne 'link' elementi ekleyerek CSS dosyanızı HTML dosyanıza bağlayabilirsiniz. 'link' elementi, 'rel' özelliğine 'stylesheet' değerini, 'href' özelliğine de CSS dosyasının yolu ve adını içerir. Örneğin:

index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Bu kod, CSS dosyanızı HTML dosyanıza bağlar. 'rel' özelliği 'stylesheet' değerini almalıdır, 'href' özelliği ise CSS dosyanızın yolu ve adını içermelidir. Bu örnekte, 'style.css' dosyasının bulunduğu klasörde olduğunu varsaydığımız için sadece dosya adını belirttik. Eğer CSS dosyanızın farklı bir konumda olduğunu belirtmek isterseniz, yolunu tam olarak belirtmeniz gerekir.

Bu dosyada, tüm sayfanın stilleri belirtilir.

style.css

body {

color: blue;

}

Çıktısı:

İç CSS

İç CSS, HTML sayfanızın <head> etiketi içinde yer alan <style> etiketi kullanılarak oluşturulan CSS kodlarıdır. Bu şekilde, CSS kodlarınızı ayrı bir dosyada saklamak yerine, HTML dosyanızın içinde de tanımlayabilirsiniz. Örneğin:

index.html

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

Çıktısı:

Yukarıdaki örnekte, 'style' etiketi içinde 'h1' etiketi için 'color' özelliği belirlenir ve 'red' olarak ayarlanır. Bu stil, sadece 'h1' etiketleri için geçerli olacaktır.

İç CSS'nin avantajı, CSS kodlarınızın ayrı bir dosyada olması gerektiği harici bir dosyaya ihtiyaç duymadan, HTML dosyanızın içinde düzenlenebilmesidir. Ancak, birden fazla sayfada aynı stilleri kullanmanız gerekiyorsa, CSS kodlarınızı ayrı bir dosyada saklamak daha iyi bir seçenek olabilir.

Satır içi(Inline) CSS

Satır içi CSS, HTML öğelerine doğrudan stil özellikleri eklemek için kullanılır. Bu, belirli bir HTML öğesine özel bir stil tanımlamak için kullanılır.. Örneğin:

index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 style="color: green;">Hello World!</h1>

</body>

</html>

Çıktısı:

Yukarıdaki örnekte, 'h1' etiketi içinde 'style' özelliği kullanılarak 'color' özelliği belirlenir ve 'green' olarak ayarlanır. Bu stil, sadece bu 'h1' etiketi için geçerli olacaktır.

Satır içi CSS, sadece küçük stil değişiklikleri yapmak istediğinizde veya belirli bir öğenin stilini değiştirmek istediğinizde kullanışlıdır. Ancak, bir web sitesindeki tüm öğelerin stilini değiştirmek istediğinizde, harici veya iç CSS kullanmak daha uygun olabilir.

CSS Özellikleri

CSS, HTML elementlerinin görünümünü ve davranışını belirlemek için kullanılan birçok özellik sunar. Bazı popüler CSS özellikleri şunlardır:

color: Metin rengini belirler.

background-color: Arka plan rengini belirler.

font-size: Yazı tipi boyutunu belirler.

font-family: Yazı tipini belirler.

text-align: Metin hizalamasını belirler.

padding: İç boşlukları belirler.

margin: Dış boşlukları belirler.

border: Kenarlık özelliklerini belirler.

Özetle HTML stilleri, HTML elementlerinin görünümünü belirlemek için kullanılan özelliklerdir ve doğrudan HTML dosyasında veya 'style' özelliği içinde tanımlanabilirler. CSS, HTML elementlerinin görünümünü ve davranışını belirlemek için kullanılan bir dildir ve ayrı bir '.css' dosyasında tanımlanabilir ve HTML dosyasına link elementi aracılığıyla bağlanabilir. CSS, HTML elementlerinin birçok özelliğini belirlemek için bir dizi özellik sunar.

Page updated

Report abuse