CSS’ye Yeni Başlayanlar Kılavuzu

Bir web siteniz varsa, şüphesiz CSS’den bahsedildiğini duymuş veya görmüşsünüzdür. Ve bilmiyorsanız, CSS basamaklı stil sayfaları anlamına gelir.

Elbette, aranızdaki deneyimli web geliştiricileri, CSS’nin ne anlama geldiğini ve ne işe yaradığını tam olarak bilecektir. Ancak basamaklı stil sayfaları terimi sizin için hiçbir şey ifade etmiyorsa, kavram kafa karıştırıcı olabilir. İşte CSS’nin ne olduğuna ve web tasarımını basitleştirmek için nasıl kullanıldığına dair bir başlangıç ​​kılavuzu.

CSS nedir?

CSS, web tarayıcılarına bir web sayfasının nasıl sunulması gerektiğini söylemek için kullanılan bir stil sayfası dilidir. Başka bir deyişle, bir sayfanın görünümünü tanımlayan CSS’dir.

CSS’den önce, bir web sayfasının hemen hemen her stil özelliği, tek tek sayfanın kendisinde tanımlanmak zorundaydı. Bu nedenle, web sitesi kodlamasında çok fazla tekrar vardı. Ancak CSS, geliştiricilerin bir sitedeki tüm sayfalara uygulanabilecek stil tanımlarını içeren stil sayfaları oluşturmasına olanak tanır. Böylece metinlerin, listelerin, tabloların ve resimlerin stili merkezi olarak tanımlanabilir ve kontrol edilebilir.

CSS’nin Faydaları Nelerdir?

CSS, bir sayfanın stilini içerikten ayırır. Böylece, her sayfa için kodlama basitleştirilmiştir. Ve web sitesindeki stil sabittir ve merkezi olarak kontrol edilir. Web sayfalarının stilini yönetmek için CSS kullanarak bir web sitesi geliştirmenin en önemli faydaları şunlardır.

Zaman Kazandırır

Bir web sitesinin tüm sayfalarda tutarlı olan birçok yönü vardır. Gerçekten de, tutarlı bir görünüm ve his, iyi bir web tasarımının kritik bir unsurudur. Ancak CSS olmadan renk, yazı tipi boyutları, öğe hizalamaları ve kenarlık stilleri gibi şeylerin her sayfada tanımlanması gerekiyordu. Bununla birlikte, CSS ile, bunun gibi stil seçenekleri yalnızca bir kez belirtilir, böylece muazzam miktarda geliştirme süresinden tasarruf edilir.

Sayfalar Daha Hızlı Yükleniyor

CSS, bir sayfanın görünümünün her yönünü tanımlamak için HTML (Köprü Metni İşaretleme Dili) etiket niteliklerini kullanma ihtiyacını ortadan kaldırır. Bu nedenle, tek tek sayfalar daha az kod içerir, bu da sayfaların yüklenme hızını artırır. Ve sayfa yükleme hızları, kullanıcı deneyimi ve arama motoru optimizasyonu (SEO) için kritik öneme sahiptir.

Bakımı Basitleştirir

Tahmin edebileceğiniz gibi, CSS bir sitenin görünümünü güncelleme görevini önemli ölçüde basitleştirir. Örneğin, görünüşte küresel bir değişikliğin gerekli olduğunu varsayalım. Biçimlendirme her sayfanın HTML’sinde kodlanmış olsaydı, genel bir değişiklik son derece zaman alıcı bir görev olurdu. Bununla birlikte, CSS ile, tüm siteyi değiştirmek için yalnızca bir kod parçasının değiştirilmesi gerekir.

Tutarlılığı Korur

Yukarıda belirtildiği gibi, tutarlılık kullanıcı deneyimini iyileştirir. Ancak, bir sitenin her sayfasını ayrı ayrı biçimlendirmeye çalışırsanız, tutarlılığı sağlamak zor olabilir. Ancak CSS, tüm sayfaların merkezi kontrolünü sağlar. Bu nedenle, bir öğenin stilini CSS ile değiştirdiğinizde, o öğenin görünümü web sitesinde aynı olacaktır.

Global Web Tasarım Standartlarına Uyar

HTML niteliklerinin kullanımı amortismana tabi tutulmaktadır. Bu, CSS aynı iş için daha iyi kullanılabilir olduğunda HTML niteliklerini kullanmanın artık en iyi uygulama olmadığı anlamına gelir. Ve gelecekte, bazı tarayıcılar, kullanımdan kaldırılan HTML özelliklerini doğru şekilde yorumlamayabilir. Bu nedenle, CSS küresel standart haline geldiğinden, HTML nitelikleri yerine CSS kullanılması tavsiye edilir.

CSS Ne İçin Kullanılır?

CSS’yi tanımlamanın en iyi yolu, içeriğin kemiklerini aşan dış görünümdür. Gerçekten de, CSS’nin faydalı özelliklerinden biri, içeriği stilden ayırmasıdır. Ardından CSS, bir sayfadaki HTML’nin görünümünü değiştirir. Tipik CSS kullanımları, bir web sayfasındaki metin, başlıklar, resimler ve diğer öğelerin stilini belirlemeyi içerir.

CSS Nasıl Çalışır?

CSS, HTML’ye uygulanabilen koddur. Ve bu kod, harici, dahili veya satır içi olmak üzere üç temel düzeyde kullanılabilir.

Harici stil sayfaları, CSS uzantısıyla ayrı dosyalara kaydedilir. Harici stil sayfalarında tanımlanan stil, bir web sitesinin tüm sayfalarına uygulanabilir. Bir sayfayı biçimlendirmek için harici bir stil sayfası kullanırken, ilgili stil sayfası sayfanın başlığında bildirilmelidir. Ve bunu yapmak için kod şöyle görünebilir:

<kafa>

<link rel=”stylesheet” type=”text/css” href=mysitestyleone.css”>

</head>

Dahili stil sayfaları, tek bir sayfanın stilini tanımlar ve ilgili sayfanın başlığına yazılır. Stil, seçicilere göre sayfadaki öğelere uygulanır. Aşağıdaki örnekte, seçiciler “Gövde” ve “P” olduğundan stil, gövde arka planına ve paragraf metnine göre uygulanacaktır.

<kafa>

<stil>

Gövde arka plan rengi:AliceBlue;

P yazı tipi boyutu:20 piksel; siyah renk;

</style>

</head>

Satır içi CSS yalnızca tek bir örneğe uygulanacaktır. Satır içi CSS stilleri, HTML satırına yazılmış küçük kod parçalarıdır. Örneğin, aşağıdaki kod yalnızca bir başlığı biçimlendirir.

<h1 style=”font-size:40px;color:Salmon;”>Bu, Somon Renkli Bir Başlık!</h1>

CSS ve HTML Arasındaki Farklar Nelerdir?

Bazı insanlar yanlışlıkla HTML ve CSS’nin aynı şeyler olduğuna inanırlar. Ancak, HTML ve CSS, bir web sitesi tasarımında birlikte kullanılan iki farklı dildir. İşte iki dil arasındaki temel farklar.

İçerik Vs. görseller

HTML, bir web sayfasının yapısını ve içeriğini tanımlamak için kullanılır. CSS ise bu içeriğin nasıl görüntüleneceğini tanımlar.

Sayfa Yükleme Hızları

HTML kodu genellikle CSS kodundan daha fazla yer kaplar. Sonuç olarak, web sayfalarını biçimlendirmek için CSS kullanmak genellikle sayfa yükleme sürelerini kısaltır.

Dahili ve harici

CSS dahili veya harici olabilir. Böylece bir parça CSS kodu birçok sayfaya uygulanabilir. HTML kodu yalnızca aynı sayfadaki bir örnek için geçerlidir.

değiştirilebilirlik

Bir HTML dosyasında CSS kodunuz olabilir. Ancak, bir CSS stil sayfasında HTML kodunuz olamaz.

Kullanım kolaylığı

Yeni başlayanlar için bile HTML’yi takip etmek nispeten kolaydır. Bununla birlikte, CSS’nin sözdizimi ve işlevleri, dile aşina olmayan kişiler için biraz daha kafa karıştırıcı olabilir.

Çözüm

HTML’nin birincil işlevi, web sayfalarının temel yapısını oluşturmaktır. Ardından, sayfaların görünümünü ve düzenini kontrol etmek için üst kısımda CSS uygulanır. Yani, bir ev inşa ediyor olsaydınız, HTML temelleri, duvarları ve tavanları inşa ederdi. Ve evi dekore etmek için CSS kullanılacaktı. Ve elbette, herhangi bir yapısal değişikliğe gerek kalmadan herhangi bir zamanda bir ev yeniden dekore edilebilir.

CSS’ye Yeni Başlayanlar Kılavuzu