HTML ve CSS Nedir? Kullanım Alanları ve Daha Fazlası

CSS, aslında web tasarımda olmazsa olmaz bir dil. CSS nedir, açıklığa kavuşturduğumuzda bunu daha iyi anlayacaksınız.

İnternette gezinirken birbirinden şık sitelere denk gelmiş olabilirsiniz. Bu sitelerin nasıl ve hangi dillerle tasarlandığını hiç merak ettiniz mi? Merak etmemiş olsanız bile bunu öğrenmek size birçok noktada fayda sağlayacaktır. Özellikle web geliştiricisi olmak isteyenler için CSS konusu normalden çok daha önemli.

Aslında CSS, tasarımı detaylı hale getiren ve güzelleştiren bir dil olarak tanımlanabilir. Bu konuyu detaylı bir şekilde öğrenmek için sizi içeriğimizi okumaya davet ediyoruz. Ayrıca, yazımızda bazı örnek kodlar bulabilir ve bu kodların anlamlarını da öğrenebilirsiniz. Burada lafı daha fazla uzatmayalım ve CSS dilinin detaylarını beraber öğrenelim.

CSS Nedir? Ne İşe Yarar?

Açılımı Cascading Steel Sheets olan CSS, temel olarak bir biçimlendirme dilidir. Bir site tasarlarken bazı diller kullanılır. HTML dili, sitelerin kemik yani temel yapısını oluşturmaya yarar. Ancak, HTML dilini tek başına kullanmak yeterli değildir.

CSS, HTML ile oluşturulan bileşenlerin konumunu, rengini, boyutunu ve daha birçok şeyini değiştirmenize olanak tanır. Bu konuyu biraz detaylandırmak istiyoruz. HTML dilini kullanarak bir siteye başlıklar, metinler ve hatta butonlar ekleyebilirsiniz. CSS, bu eklediklerinizin rengini, boyutunu ve daha birçok şeyini düzenlemenizi sağlar.

CSS’i aslında tasarımın temeli olarak düşünebilirsiniz. Bu dil sayesinde, site tasarımı çok daha şık ve detaylı bir hale getirilebilir. Bu kısımda son olarak CSS dilinin temel olarak bir programlama dili olmadığını belirtmemizde fayda var.

StyleCSS Nedir?

CSS nedir gibi konuları geçtikten sonra merak edilen farklı bir konuya değinmek istiyoruz. StyleCSS, aslında CSS kodlarının yazıldığı dosyadır. Style yani stil dosyası olarak bilinen bu dosyanın içerisinde CSS’in kodları bulunur. Bu dosyaya yazdığınız kodlar sayesinde bir sitenin tasarımını birçok farklı şekilde düzenleyebilirsiniz. Bir site tasarlarken stil dosyası oluşturabilir ve içerisine CSS kodlarını yazabilirsiniz. Daha sonra, bu tek dosya sayesinde sitenin tasarımını baştan aşağıya özelleştirebilirsiniz.

HTML Nedir?

İçeriğimizde sizlere HTML ve CSS nedir konusunu birlikte açıklamamız şart. Çünkü bu iki dilin birbirini tamamladığını söyleyebiliriz. HTML açılımı Hyper Text Markup Language’dir.  Bir programlama dili olmayan HTML, basit bir biçimlendirme dili olarak tanımlanabilir. HTML, web sayfalarında paragraflar, tablolar, başlıklar, bağlantılar ve daha birçok şey oluşturmaya olanak tanır.

Bu dili sitenin kemik yapısı olarak düşünebilirsiniz. Bir site sayfasının temeli (paragraflar vb.) bu dil kullanılarak oluşturulur. Daha sonra, HTML dilinin üzerine CSS kullanılır ve tasarım çok daha detaylı ve şık bir hale getirilir.

JavaScript Nedir?

İçeriğimizde bahsetmek istediğimiz bir diğer dil, JavaScript dili. Çünkü bu dil, genel olarak HTML ve CSS diliyle birlikte kullanılıyor. Web tasarımda genellikle HTML, CSS ve JavaScript dilleri bir arada kullanılır. JavaScript, dinamik web sayfaları oluşturmak için hazırlanmış bir dildir. Bu dil sayesinde web sayfaları kullanıcılarla etkileşimli bir hale getirilebilir.

Örneğin, JavaScript kullanılarak web sayfalarında açılır menüler ve daha birçok şey oluşturulabilir. HTML, bir web sayfasının temel yapısını oluşturur. CSS, bu temel yapının tasarımını geliştirir daha detaylı ve şık bir hale getirir. JavaScript ise, web sayfasını canlandırır ve sayfadaki öğelerle etkileşime girmemizi sağlar. JavaScript dili olmasaydı, web sayfalarındaki her öğe hareketsiz ve etkileşimsiz kalabilirdi. Ancak bu dil sayesinde, sayfalar çok daha dinamik hale getirilebiliyor.

CSS ile Neler Yapılabilir?

CSS dili özellikle web tasarım için kullanılır. CSS nedir kısmında bu dille neler yapılabileceğini az çok anlamışsınızdır. Bu dili kullanarak web sayfalarındaki öğeleri daha renkli, canlı ve düzgün bir hale getirebilirsiniz.

Örneğin, CSS kodlama ile bir web sayfasında yazı renklendirme, yazı boyutu değiştirme, başlık stilleri ve farklı geçiş efektleri gibi şeyler yapabilirsiniz. Böylece, web sayfasının tasarımını daha canlı ve farklı bir hale getirebilirsiniz. CSS aslında bir tasarım için boya kutusu gibidir. Basitçe açıklamak gerekirse, HTML tasarımı çizer, CSS ise boyar ve geliştirir.

CSS Örnekleri

Yazımızda son olarak örnek CSS kodları paylaşmak istiyoruz. Bu sayede, CSS’in yapısını daha iyi anlayabilirsiniz.

CSS Kodları ve Anlamları

background-color: #ffffff;

• Yukarıdaki kod, elementin arka planını beyaz olarak ayarlar.

text-align: center;

• Yukarıdaki kod, elementin içeriğinin ekranın ortasında görüntülenmesini sağlar.

font-size: 16px;

• Yukarıdaki kod, elementin font boyutunu 16px olarak değiştirir.

width: 100%;

• Yukarıdaki kod, elementin genişliğini ekranın tam genişliğine eşit olarak ayarlar.