Merhabalar herkese, bugün Lojistik Tim olarka sizlerle CSS Nedir ? konusunu işleyeceğiz.
Bugün bir çok html web sayfasının tamamlayıcısı olan ve olmazsa olmazlarından olan bu sisteme anlaşılır bir örnek verecek olsaydım eğer html bir inşaat mühendisi ise, CSS'de mimar olarak görev alan bir terim olurdu herhalde. Neyse şimdi gelin CSS tanımına ve nasıl tamamlayıcı bir yapı olduğuna göz atalım.
CSS Nedir ?
Efenim CSS ingilizce açılımı "Cascading Style Sheet" olan güzide Türkçemizde ise "Basamaklı Stil Sayfaları" anlamına gelen ve web sayfalarında "renk,boyut,yazı tipi,arka plan" gibi öğelerde dilediğiniz değişikliğini yapabildiğiniz 1994 Yılında "Hakom Wium Lie" tarafından fikri ortaya atılan ve 1996 yılında ilk örneği piyasaya sürülen bir sistemdir.
Şimdi bu tanım birazcık sizi yordu değil mi ? Şanslısınız çünkü ben CSS ilk gördüğümde okunuşunu ne işe yaradığını bile bilmediğimden şöyle bir muhabbete girmiştim.
+ Sıtayla nokta CeSeSe diye bişi var bak burda.
- CeSeSe ne lan ?
+ Galiba kantır sıtraykın çıkardığı birşey herhalde belki kantır için tema yapıyor olabiliriz.
- Ne alaka oğlum kantır sıtraykla ???
+ E o da CeSe olarak geçiyor ya!
- Heee tamam ok şimdi oldu.
En azından siz gidip Google'ye yazma şansına sahipsiniz (biz o yıllarda google'ye çok bakmazdık nedense) veya buradan okuyarak CSS (Si-Es-Es) nedir öğrenmiş oldunuz
Neyse işin eğlencesini bir kenara bırakalım neler yapar CSS bakalım.
CSS ile neler yapılabilir ?
CSS ile dilediğiniz süslemeleri ve animasyonları yapabilir bunları HTML sayfalarınıza ekleyebilirsiniz.
Hatta mobil uyumlu responsive olmayan sitelerinizi bile CSS düzenlemeleri ekleyerek mobil destekli bir hale getirebilir ve telefon tablet gibi farklı cihazlara bile uyarlayabilirsiniz.
Web sayfanızda kullandığınız elementlere tek tek dokunuşlar ekleyebilir hatta web sayfanızda kullandığınız butonlara bile dinamik tasarımlara dönüştürebilirsiniz.
CSS Kod örnekleri
Css ile bazı temel kod örneklerine göz atalım,
Diyelim yazdığımız bir metinin rengine müdahale edeceğiz o halde;
CSS kodu :
p {
color: red; // Buraya hangi rengi verecekseniz onu yazıyoruz.
}
HTML Kodu ( Sayfamızda kullanacağımız kod)
<p> Html sayfamda yazdığım yazının rengi kırmızı.</p>
Gördüğünüz üzere yazdığımız metnin başına <p> tag'ını ekleyip sonunu yine </p> tagıyla kapattığımız için CSS dosyasında belirtilen rengi vermiş olduk.
Peki genişlik ve yükseklik gibi kavramlar ekleyeceğiz diyelim;
CSS Kodu :
div{
width: 300px; // Genişlik alanı
height: 200px; // Yükseklik alanı
}
HTML Kodu :
<div>Bu bir CSS kod deneme yazısıdır.</div>
Burada da gördüğünüz dibi <div> taglarını kullanarak yazımızı CSS dosyasındaki değerleriyle düzenlemiş oluyoruz.
Yukarıda ki yükseklik genişlik "px" değerlerine isterseniz "auto" yazarak tarayıcıların otomatik ayarlamasını sağlayabilirsiniz.
Aslında daha bir çok örnek mevcut ama dediğimiz gibi CSS bir mimar görevini üstlendiği için ucu bucağı olmayan bir kodlama yapısına sahiptir biz daha fazla uzatıp sizi sıkmamak adına sadece basit örnekleri ele aldık bu yazımızda.
Şimdilik bu konumuzu burada sonlandırıp ilerde farklı CSS örnekleri ile sizlerle tekrar buluşmayı ümit ediyorum.
Okuyan gözlerinize sağlık diyor her zaman olduğu gibi yorum ve beğenilerinizi hatta konuya ekleyebileceğiniz örnekleriniz var ise yorumlarınızda belirtmenizi bekliyorum.
Sağlıcakla kalın.
LOJİSTİK TİM SUNDU
Bugün bir çok html web sayfasının tamamlayıcısı olan ve olmazsa olmazlarından olan bu sisteme anlaşılır bir örnek verecek olsaydım eğer html bir inşaat mühendisi ise, CSS'de mimar olarak görev alan bir terim olurdu herhalde. Neyse şimdi gelin CSS tanımına ve nasıl tamamlayıcı bir yapı olduğuna göz atalım.
CSS Nedir ?
Efenim CSS ingilizce açılımı "Cascading Style Sheet" olan güzide Türkçemizde ise "Basamaklı Stil Sayfaları" anlamına gelen ve web sayfalarında "renk,boyut,yazı tipi,arka plan" gibi öğelerde dilediğiniz değişikliğini yapabildiğiniz 1994 Yılında "Hakom Wium Lie" tarafından fikri ortaya atılan ve 1996 yılında ilk örneği piyasaya sürülen bir sistemdir.
Şimdi bu tanım birazcık sizi yordu değil mi ? Şanslısınız çünkü ben CSS ilk gördüğümde okunuşunu ne işe yaradığını bile bilmediğimden şöyle bir muhabbete girmiştim.
+ Sıtayla nokta CeSeSe diye bişi var bak burda.
- CeSeSe ne lan ?
+ Galiba kantır sıtraykın çıkardığı birşey herhalde belki kantır için tema yapıyor olabiliriz.
- Ne alaka oğlum kantır sıtraykla ???
+ E o da CeSe olarak geçiyor ya!
- Heee tamam ok şimdi oldu.
En azından siz gidip Google'ye yazma şansına sahipsiniz (biz o yıllarda google'ye çok bakmazdık nedense) veya buradan okuyarak CSS (Si-Es-Es) nedir öğrenmiş oldunuz
Neyse işin eğlencesini bir kenara bırakalım neler yapar CSS bakalım.
CSS ile neler yapılabilir ?
CSS ile dilediğiniz süslemeleri ve animasyonları yapabilir bunları HTML sayfalarınıza ekleyebilirsiniz.
Hatta mobil uyumlu responsive olmayan sitelerinizi bile CSS düzenlemeleri ekleyerek mobil destekli bir hale getirebilir ve telefon tablet gibi farklı cihazlara bile uyarlayabilirsiniz.
Web sayfanızda kullandığınız elementlere tek tek dokunuşlar ekleyebilir hatta web sayfanızda kullandığınız butonlara bile dinamik tasarımlara dönüştürebilirsiniz.
CSS Kod örnekleri
Css ile bazı temel kod örneklerine göz atalım,
Diyelim yazdığımız bir metinin rengine müdahale edeceğiz o halde;
CSS kodu :
p {
color: red; // Buraya hangi rengi verecekseniz onu yazıyoruz.
}
HTML Kodu ( Sayfamızda kullanacağımız kod)
<p> Html sayfamda yazdığım yazının rengi kırmızı.</p>
Gördüğünüz üzere yazdığımız metnin başına <p> tag'ını ekleyip sonunu yine </p> tagıyla kapattığımız için CSS dosyasında belirtilen rengi vermiş olduk.
Peki genişlik ve yükseklik gibi kavramlar ekleyeceğiz diyelim;
CSS Kodu :
div{
width: 300px; // Genişlik alanı
height: 200px; // Yükseklik alanı
}
HTML Kodu :
<div>Bu bir CSS kod deneme yazısıdır.</div>
Burada da gördüğünüz dibi <div> taglarını kullanarak yazımızı CSS dosyasındaki değerleriyle düzenlemiş oluyoruz.
Yukarıda ki yükseklik genişlik "px" değerlerine isterseniz "auto" yazarak tarayıcıların otomatik ayarlamasını sağlayabilirsiniz.
Aslında daha bir çok örnek mevcut ama dediğimiz gibi CSS bir mimar görevini üstlendiği için ucu bucağı olmayan bir kodlama yapısına sahiptir biz daha fazla uzatıp sizi sıkmamak adına sadece basit örnekleri ele aldık bu yazımızda.
Şimdilik bu konumuzu burada sonlandırıp ilerde farklı CSS örnekleri ile sizlerle tekrar buluşmayı ümit ediyorum.
Okuyan gözlerinize sağlık diyor her zaman olduğu gibi yorum ve beğenilerinizi hatta konuya ekleyebileceğiniz örnekleriniz var ise yorumlarınızda belirtmenizi bekliyorum.
Sağlıcakla kalın.
LOJİSTİK TİM SUNDU
Son düzenleme:
