İnline(Satır içi), İnternal(Sayfa içi) ve Extarnal(Harici/Dosya) CSS :
Selamlar, Bugün biraz 3 farklı CSS türü olan İnline, İnternal ve External CSS ‘i ele alıcağım vede biraz inceleyip farklarından bahsetmek istiyorum.
Öncelikle nedir bunlar?;
CSS Aslında birçoğumuzun da bildiği bir yazılım dilidir.
Aslında bu türleri bir nevi şive dediğimiz konuşma biçimine benzetebilirsiniz belki biraz saçma olucak ama şahsen ben ona benzetiyorum .), konuştuğumuz yazdığımız laf kod aynı hiçbir fark yok sadece Pc mizin onu nerden alıcağına karar veriyoruz.
Hepsi aslında bir CSS yazılım dilinin yazdığımız HTML içinde farklı bir yere sahip türüdür, ne demek istiyorum?
Bir Web sitemizde CSS kullanmak istediğimiz zaman(mutlaka isteyeceğiz)bu üç CSS türünden mutlaka birini kullanmamız gerekiyor vede aralarında öncelik olduğunu söylesem? evet yanlış anlamadınız belki biliyorsunuzdur zaten ama Bir HTML dosyası içinde veya dışında CSS’in bir işleme öncelik sırası vardır bunlar sırasıyla öncelik olarak HTML dosyasına ilk İnline yani Satır İçi’ne yazdığımız CSS ele alıp uygulanacaktır. Bunlar sırasıyla ;
- İnline CSS
- İnternal CSS
- External CSS
‘dir
İnline(Satır İçi)CSS
<body> içerisinde etiketlerin yani (tag)’lerin içerisine style=” ” şeklinde yazılmasıdır
İşte İnline CSS
Burda görmüş olduğunuz h1'e style etiketi ile color yani renk uygulaması gerçekleştiriyoruz.
İnline CSS Özellikleri nedir peki neden İnline?
- Doğrudan sadece yazıldığı etiketi etkiler.
- Ufak çaplı denemelerde genelde tercih edilir.
- En yüksek önceliğe sahiptir(Diğer CSS’ler ile çarpıştığı zaman öncelik onundur).
- Ve bence en önemlisi fazlaca kullanılırsa Kod kalabalığı oluşturur işimizi zorlaştırır vede bir yazılımcı için en önemlisi Clean Code olmaktan çıkar.
Peki ya İnternal CSS ?
CSS kurallarının HTML Sayfası içinde <style> etiketi ile yazılmasıdır(<head> etiketi içerisine)
Get Emirhnbyrm’s stories in your inbox
Join Medium for free to get updates from this writer.
İnline’da yazdığımızdan farklı olarak CSS’ imizi bu sefer HTML’ imizin sayfada gösterilmeyen <body> etiketinin yanı sıra <head> etiketinin içine yazıcağız, ama bu sefer farklı olarak style bir etiket(tag) olduğu için bir açılış birde kapanışı olmalı.
şu şekilde gördüğünüz gibi;
Yeşil açıklama alanında belirttiğim yere CSS kodlarımızı yazdığımız zaman buda İnternal CSS olmuş oluyor hemen örnek;
Özellikleri ise şunlardır;
- Sadece ilgili HTML dosyasını etkiler.
- Kod tek dosyada olduğu için öğrenmesi rahattır.
- Orta ölçekli projelerde kullanılabilir.
- Fakat HTML ve CSS tek bir sayfada olucağı için safya uzunluğu artıcaktır ve karmaşıklığa neden olabilir.
Bu yüzden External CSS
CSS kurallarının farklı bir dosyaya yazılıp HTML dosyasından <link> etiketi ile bağlantı kurulmasıdır.
şu şekilde style.css isminde bir dosya oluşturuyoruz.
dosyamızı oluşturduktan sonra CSS verilerini alması için ise index.html dosyamıza gelip <link> etiketi ile bağlantı kuruyoruz eklememiz gerekiyor.
onu da yaptıktan sonra artık CSS’imizi style.css dosyamızın içine yazmaya başlayabiliriz.
son olarak özellikleri’nden bahsedecek olursak şayet;
- Büyük projelerde en çok tercih edilen CSS türüdür.
- Bence en güzel yanı ise birden fazla HTML dosyasına erişim olanağı sağlamasıdır.
- Ne İnternal gibi sayfa kalabalığına nede İnline gibi karman çorman bi CSS yoktur, düzenlemek de bi okadar kolay olucaktır.
- Lakin öncelik sırasında en sonda gelir mesela 3 tür CSS yazıdığınız zaman İnline içindeki CSS’i işleyecektir daha sonra İnternal en son Extarnal dolayısıyla öncelik konusunda bilgi sahibi değilseniz eğer herhangi türde bir CSS yazdığınızda kodun belkide neden çalışmadığını anlamakta güçlük çekiceksiniz.
SON
Evet bu yazımda elimden geldiğince CSS türü olan üç adet CSS Kavramından bahsettim umarım yararlı olmuştur ben profesyonel bir yazılımcı değilim lakin bu bilgiyi paylaşmamın en azından ihtiyacı olan kişilere yardımım dokunabileceğini düşünerek yazdım başka bir yazımda görüşmek üzere .))
