CSS Eğitimi: CSS'yi Sıfırdan Öğrenin

Bir web sitesinin genel tasarımı, renkleri, düzeni, kullanıcı arayüzü ve çekici görünen diğer unsurlarından hiç etkilendiniz mi? Ancak siteye nasıl çeşitli grafikler eklendiğini merak ediyor musunuz? CSS adı verilen bir kodlama dili aracılığıyla yapılır.

Bu blog, CSS'nin ne olduğunu, temellerini, avantajlarını ve web sitenizi tasarlamak veya web sitesi tasarımında kariyer yapmak için CSS'yi nasıl kullanabileceğinizi anlamanıza yardımcı olur.

Dünyanın En İyi Üniversitelerinden Online Yazılım Geliştirme Kursları öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

CSS nedir?

Basamaklı stil sayfaları (CSS), bir web sitesinin ayrılmaz bir parçasını oluşturur. Web sayfaları, renkler, yazı tipi boyutu, metinler arasındaki boşluk, çeşitli öğeler ve bunların konumları, arka planı ve ekran boyutu gibi web sitesinin tüm düzenini tasarlamak için HTML ve JavaScript ile birlikte kullanılan bir kodlama dilidir.

Basamaklı terimi, üst metne eklenen bir stili, sonraki metinlere kademeli olarak ifade eder. CSS, web sayfalarını tasarlamayı ve düzenlemeyi kolaylaştırır. CSS'den önce, web tasarımcıları etiketleri, yazı tipini, renkleri, hizalamayı ve diğer stil kurallarını tüm web sayfalarına manuel olarak kopyalamak zorundaydı. Çok zaman ve çaba harcadı. CSS, stil kurallarını kopyalayarak ve bunları farklı sayfalara uygulayarak bu sorunu çözer. Bir sayfanın üslup kuralları değiştirilse bile, değişiklikler web sitesindeki diğer sayfalara otomatik olarak uygulanır. CSS, işletmelerin web siteleri ve mobil uygulamaları için çekici bir kullanıcı arayüzü oluşturmasına olanak tanır.

Popüler Yazılım Mühendisliği Kurslarımızı keşfedin

Aşağıdakiler, CSS'nin diğer birkaç önemli avantajıdır:

• Gelişmiş hız:

  CSS, web sitesine renk ve stil katar ve web sayfalarının yüklenme hızını artırarak daha kullanıcı dostu hale getirir. Ayrıca sorunsuz bir gezinme deneyimi sunarak web sitesi trafiğini organik olarak artırır.

• Kolay bakım:-

  Web siteniz için CSS kullanmanın bir diğer önemli avantajı, web sitesinin bakımını kolaylaştırmasıdır. Tüm bir web sitesinin düzenini tek bir satır koduyla değiştirebilirsiniz.

• Cihaz Uyumluluğu:-

  Masaüstünde belirli bir düzene sahip gibi görünen bir web sitesi, cep telefonunda veya tablette aynı olmayabilir. Web sitesi düzeni ekran boyutuna göre değişir. Bu nedenle, web sitesi tasarımcıları, düzenin tüm cihazlar için tutarlı kalmasını sağlamalıdır. CSS yardımıyla mümkün kılınmıştır.

Farklı CSS Türleri Nelerdir?

• Satır içi CSS: -

  Tüm bölüm yerine HTML'de tek bir öğeye stil vermek için kullanılır. Tasarımcılar, devam eden tek öğeye stil vermek için satır içi CSS kullanır.

• Dahili CSS:-

  Ayrıca gömülü CSS olarak da adlandırılır ve stil içinde bulunur. Belgenin en üstüne eklenerek tek sayfada kullanılır.

• Harici CSS: -

  Satır içi ve dahili CSS'den farklı olarak harici CSS, farklı web sayfalarında aynı stil kurallarını uygular. Tasarımcıların değişiklikleri birkaç dosyaya uygulamak yerine tek bir dosyada değişiklik yapmasını kolaylaştırdığı için en yaygın kullanılan CSS türüdür.

Farklı CSS türlerinin yardımıyla çeşitli stilleri bir HTML belgesiyle ilişkilendirebilirsiniz. Daha yüksek önceliği alan CSS, satır içi stildir. Gömülü CSS ve harici CSS'deki stil kurallarını geçersiz kılar. Sonraki, harici sayfalardaki kuralları geçersiz kılan dahili veya gömülü CSS'dir. Son olarak, diğer iki stil sayfasını geçersiz kılamayan harici CSS gelir.

CSS'de sözdizimi

CSS'deki sözdizimi, bir web sayfası tasarlanırken bir tarayıcının yorumladığı çeşitli stil kurallarını veya öğelerini ifade eder. Aşağıdakiler, CSS'nin üç temel öğesidir:

• Seçici:-

  CSS'deki seçiciyi, stil kurallarının uygulandığı tek öğeyi seçen HTML'de bir etiket olarak anlayabilirsiniz. CSS'deki farklı seçici türleri şunlardır:

• Evrensel seçici:-

  Öğeleri türe göre seçmez. Bunun yerine, aynı ada sahip tüm öğeleri seçer.

• Soy seçici: -

  Bu seçiciler, yalnızca belirli başka bir öğenin içinde mevcut olduğunda bir öğeye stil kuralı uygulamak için kullanılır.

• Sınıf seçiciler:-

  Adından da anlaşılacağı gibi, bu seçiciler, stil kuralını belirli bir sınıfın tüm öğelerine uygular. Örneğin, H2 olarak işaretlenen bir web sayfasındaki tüm öğeler 12 yazı tipi boyutuna sahip olacaktır.

• Kimlik seçiciler:-

  Bu seçiciler, stil kurallarını benzer kimliğe göre uygular.

• Mülk:-

  CSS özellikleri, renk, boyut, kenarlık ve hizalama gibi HTML etiketlerinin çeşitli niteliklerine veya özelliklerine atıfta bulunur.

• Değer:-

  Bunlar, CSS özelliklerine atanan değerlerdir. Örneğin, belirli bir renk veya boyut #A2A2 değerine sahip olacaktır.

CSS Renk Kodları

CSS dilinde kullanılan çeşitli renklere belirli bir değer veya kod atanır. Web sitesi tasarımcısının arka plan, metin veya kenarlıklar gibi öğeler için belirli renkler ayarlamasını sağlar. Aşağıdakiler, CSS'de renk değerleri atamak için kullanılan çeşitli biçimlerdir:

• Hex Kodları: -

  Bunlar, bir renk değerini temsil etmek için kullanılan altı haneli kodlardır. Kodun ilk iki basamağı (RR) kırmızı renk değerini temsil eder ve ardından Yeşil (GG) için iki değer ve mavi (BB) için son iki değer gelir. Adobe ve Advanced Paint Brush gibi çeşitli grafik yazılımlarından onaltılık değerler kullanabilirsiniz. CSS'deki onaltılık kodların bir kare işaretiyle başladığını not etmek önemlidir.

• RGB Değerleri: -

  Bu özellikte, kırmızı, yeşil ve mavi olmak üzere üç rengin her biri için belirli bir değer vardır.

CSS ile Arka Plan Rengi Nasıl Ayarlanır?

Çeşitli CSS özelliklerini kullanarak, bir web sayfasında görüntünün arka plan rengini, görüntüsünü, konumunu veya kaydırmasını şekillendirebilirsiniz. Örneğin, rengi ayarlamak için arka plan rengi özelliğini kullanmanız gerekir. İşte nasıl uygulayabileceğiniz.

<p style="background-color: blue;">. Söz konusu metne veya etikete mavi bir arka plan rengi verecektir. Benzer şekilde, arka plan görüntüsünü ayarlamak için "background-image" özelliğini kullanmanız gerekir. Görüntüyü arka planda tekrarlamak için “background-repeat” özelliğini kullanabilirsiniz.

Yazı tiplerini biçimlendirmek için kullanılan çeşitli CSS özellikleri şunlardır:

• Yazı tipi ailesi, yazı tipinin yüzünü değiştirir.
• Yazı tipi boyutu, fiyat metin boyutunu artırmak veya azaltmak için kullanılır.
• Yazı tipi varyantı, metni küçük büyük harflerle yapar.
• font-style özelliği, fontu kalın veya italik yapar. Yazı tipi ağırlığı, metnin kalınlığını artırmaya veya azaltmaya yardımcı olur.

Metin ve Resimlere Stil Vermek için CSS Özellikleri

CSS ayrıca bir öğenin metnine stil vermek için çeşitli özelliklere sahiptir.

• 'Renk' özelliği rengi belirlerken, yön özelliği metnin 'yönünü' biçimlendirmek için kullanılır.
• Metin girintisi ve metin hizalama özellikleri, sırasıyla metnin girintisini ayarlamak ve metni hizalamak için kullanılır.
• Letter-space özelliği, kelimeler arasındaki boşluğu artırmaya veya azaltmaya yardımcı olur.
• Metnin altını çizmek veya üstünü çizmek için text-decoration özelliğini kullanabilirsiniz.
• Text-transform özelliği, metni küçük harften büyük harfe veya tam tersine dönüştürmeye yardımcı olur.
• Metnin etrafındaki gölgeyi düzenlemek için text-shadow özelliğini de kullanabilirsiniz.

Web sayfası resimleri, aşağıdaki CSS özellikleri kullanılarak şekillendirilebilir.

• Yükseklik ve genişlik özellikleri, sırasıyla görüntünün yüksekliğini ve genişliğini ayarlar.
• Görüntü kenarlığının genişliğini ayarlamak için border özelliğini kullanabilirsiniz.
• -moz-opacity özelliği, görüntünün saydamlığını veya opaklığını düzeltmeye yardımcı olur.

Ayrıca CSS ile numaralandırılmış veya madde işaretli listeler de hazırlayabilirsiniz. Aşağıdakiler, bilmeniz gereken liste özellikleridir:

• Liste stili türü özelliği, madde işaretinin, sayının veya başka herhangi bir işaretçinin şeklini ayarlamaya yardımcı olur.
• Madde işaretleri veya rakamlar yerine resim eklemek için yukarıdakinin yerine list-style-image özelliğini de kullanabilirsiniz.
• Liste stili-pozisyon özelliği, çeşitli noktaların hizalamasını veya girintisini kontrol eder.

Yazılım Geliştirme ile ilgili Popüler Makalelerimizi okuyun

Çözüm

Web siteleri, özellikle çevrimiçi satın alma trendlerinin artması nedeniyle işletmeler için çok önemli hale geldi. Bu nedenle işletmelerin görsel olarak müşterilere hitap eden bir web sitesi oluşturmaları gerekir. CSS, şirketlerin web sitesi animasyonlarına, kullanıcı arayüzüne ve diğer grafiklere çekerek daha fazla müşteri edinmelerine yardımcı olur.

Web sitesi tasarımı alanında kariyer yapmak istiyorsanız, upGrad tarafından Bilgisayar Bilimleri Yüksek Lisans Programına devam edebilirsiniz.