CSS'yi Nasıl Kullanabilirsiniz – Yeni Başlayanlar İçin Web Tasarım İpuçları ve Püf Noktaları

Yeni başlayanlar için bu CSS ipuçlarıyla siz bile web sayfalarınıza stil vermek için CSS'yi nasıl kullanacağınızı öğrenebilirsiniz.

Bilgisayar kodu hakkında hiçbir şey bilmenize gerek yok. Bilmeniz gereken tek şey nasıl kopyalayıp yapıştıracağınızdır.

Ama önce, CSS nedir?

Basamaklı Stil Sayfaları (CSS), tema geliştiricilerin bir HTML belgesinin sunumunu veya görünümünü tanımlamak ve değiştirmek için kullandıkları bir stil sayfası dil kodudur.

CSS ne yapar?

Basit bir ifadeyle, CSS dosyası HTML sayfalarının güzel görünmesini sağlar.

Hangi blog platformunu kullanıyor olursanız olun, blogunuzun daha da iyi görünmesini sağlamak için CSS özelliklerinizi değiştirebilirsiniz.

Hangi blog platformunu kullandığınız önemli değil.

Tema ayarlarınızda Özel CSS veya Ek CSS için bir seçeneğiniz olacaktır.

Bu seçeneğe hiç bakmamış olabilirsiniz.

Veya sahipseniz, kodlamayı öğrenmenin çok zor olduğunu düşünebilirsiniz.

Ama çok kolay.

Web geliştirme veya CSS sözdizimi hakkında hiçbir şey bilmiyorum, ancak bir stil özelliğini saniyeler içinde değiştirebilirim.

Tek yapmanız gereken, Chrome veya Firefox web tarayıcısı Geliştirici Araçlarınızı kullanmak ve birkaç basit CSS hilesi ve ipucu öğrenmek.

Ne kadar kolay olduğuna bakalım.

Blogunuzun CSS'sini nasıl düzenleyeceğinizi neden öğrenmek isteyesiniz?

Muhtemelen blogunuzun temasında pek çok ayar vardır.

Ancak eksik olabilecek birçok küçük öğe var.

WordPress için premium temalarda bile bazı seçenekler standart seçeneklerde mevcut değildir.

Bu nedenle, kendi düzenlemelerinizi ve değişikliklerinizi yaparak CSS'nizin daha iyi çalışmasına yardımcı olabilirsiniz.

Harici bir stil sayfasını değiştirerek tüm HTML sayfalarınıza başvurabilir.

Bir sayfada HTML başlıklarınızda değişiklik yaparsanız, tüm sayfalarınızdaki HTML etiketini değiştirir.

Referansa sözde öğe denir.

Bu, H2 başlığınızın görünümünü değiştirirseniz, sitenizdeki tüm H2 başlıklarını değiştireceği anlamına gelir.

Ancak bu komplikasyonlar hakkında her şeyi öğrenmenize gerek yok.

Bilmeniz gereken tek şey, çalıştığı ve kodlama hakkında hiçbir şey bilmeden blogunuzu tam olarak nasıl görünmesini istediğinize göre şekillendirebileceğinizdir.

Yeni başlayanlar için bazı kolay CSS ipuçlarına başlayalım.

Satır içi CSS'nizi nasıl kolayca değiştirirsiniz?

İlk adım, blogunuzu Firefox, Chrome veya Microsoft Edge'de açmaktır.

Aşağıdaki örneklerde Firefox kullandım. Kullanımı Chrome'dan biraz daha kolay buluyorum.

Ancak ikisi de benzer şekilde çalışır.

Blogunuzu yeni bir sekmede veya pencerede açın. Değiştirmek istediğiniz sayfaya gidebilirsiniz.

Şimdi Firefox'ta Araçlar menüsünden veya Chrome'da Görünüm menüsünden Geliştirici Araçları, Müfettiş'i açın.

Araçlar bölmesini açmak için Müfettiş'e tıklayın.

Araçlar bölmesinin sol üst kısmındaki seçici oku kullanarak sayfanızdaki herhangi bir satır içi stil öğesini seçebilirsiniz.

Bir öğe seçmek için imlecinizi sayfanızda hareket ettirin. Veya listedeki tek tek öğelere tıklayabilirsiniz.

Web sayfanızın tarayıcı görünümünde seçtiğiniz her öğenin mavi renkle vurgulandığını göreceksiniz.

Artık sayfanızın görünümünde değişiklik yapmaya hazırsınız.

CSS seçiciyi kullanma

Örneğimde, H2 başlık öğesinin görünümünü değiştireceğim.

H1 öğesini, gövde metnini veya bir resim başlığını değiştirmeyi seçebilirsiniz.

Yazı tipi boyutunu değiştirerek başlamak istiyorum. Tek yapmanız gereken font-size stil etiketine tıklamak ve sayıyı değiştirmek.

Boyutu 33 pikselden 56 piksele değiştirdim. Başlığın boyutunun artık daha büyük olduğunu görebilirsiniz.

Merak etme. Canlı blog sayfanızı değiştirmediniz. Tarayıcı bölmenizde gördükleriniz, yaptığınız değişikliklerin yalnızca bir önizlemesidir.

Herhangi bir HTML öğesiyle istediğiniz kadar oynayabilirsiniz.

Tarayıcı bölmesinde gördüğünüz her şey, bir CSS kuralında yaptığınız değişikliklerin nasıl görüneceğinin yalnızca bir önizlemesidir.

Şimdi metnin rengini değiştirmek istiyorum.

Renk etiketi ve numara arasındaki renk noktasına tıklarsanız, renk seçiciyi açarsınız.

Şimdi sadece kullanmak istediğiniz rengi seçin.

HTML öznitelik renginizi değiştirmek basittir. Burada siyahtan maviye değiştim.

Güzel görünüyor, ancak hat yüksekliği daha iyi olabilirdi. değiştireceğim

Geçerli ayar, satırlar arasında çok fazla boşluk olan 1.2'dir. Çizgilerin birbirine daha yakın olmasını istiyorum.

O yüzden 1.0 olarak değiştireceğim.

Bu çok daha iyi görünüyor.

H2 başlığımın önizleme modunda nasıl göründüğüne dair üç değişiklik yaptım. Yazı tipi boyutunu, rengini ve satır aralığını değiştirdim.

Şimdi bu değişiklikleri canlı siteme ekleme zamanı.

Siteniz için kod nasıl alınır?

Değiştirdiğiniz kod satırlarını kopyalamanız gerekir.

Tüm kodu seçin ve kopyalayın. Son parantez dahil tüm satırları kopyaladığınızdan emin olun.

Şimdi onu bir metin düzenleyiciye yapıştırın. PC'de Not Defteri'ni veya Mac'te Metin Düzenleyici'yi kullanabilirsiniz.

Yaptığımız diğer değişiklik de renk oldu. Bu satırı da kopyalamamız gerekiyor.

Renk için satırı kopyalamanız yeterlidir.

Yukarıdaki resimde H2 öğesinin kalın olduğunu görebilirsiniz. Bu, ilk kodumuzla aynı sözde öğe olduğu anlamına gelir. Böylece bunları birlikte kullanabilirsiniz.

Satırı kopyalayın.

Şimdi satırı metin düzenleyicinize ekleyin.

Renk çizginizin aynı girintili olması için birkaç boşluk eklemeniz veya silmeniz gerekebilir.

Artık bu üç değişikliği canlı sitenize eklemeye hazırsınız.

Kodu sitenize ekleyin

Tema seçeneklerinize gidin ve CSS seçeneklerinizi seçin.

WordPress temalarında, Tema Özelleştirici'de bulunur ve Ek CSS veya Özel CSS olarak adlandırılır.

Diğer blog platformlarında buna benzer bir ad verilecek.

Şimdi metin editörünüzdeki tüm kodu kopyalayın ve Özelleştirici sekmenize yapıştırın.

Kodu yapıştırır yapıştırmaz önizleyiciniz yaptığınız değişiklikleri size gösterecektir.

Yayınla'yı tıklayın ve yaptınız.

İşte değişikliklerimden önceki ve sonraki karşılaştırma.

çok daha fazlasını yapabilirsin

Yeni başlayanlar için CSS ipuçlarım HTML'nizi düzenlemeye adım adım giriş CSS stiliniz yalnızca başlangıçtır.

Denemek ve diğer unsurları değiştirmeye çalışmak istiyorsanız çok daha fazlasını yapabilirsiniz.

Görüntülere kenarlık veya gölge eklemek, metni sola veya sağa taşımak veya gövde metni genişliğinizi yeniden boyutlandırmak kolaydır.

Kenar boşluklarını hareket ettirebilir veya dolguyu azaltabilir veya artırabilir ve hizalamayı değiştirebilirsiniz.

Düzenlemek için seçebileceğiniz yüzlerce seçenek vardır.

Geliştirici Araçlarında çalışırken sitenizi etkilemeyeceğinizi unutmayın.

Yaptığınız tüm değişiklikler bir önizlemedir ve yalnızca o tarayıcı penceresinde görseldir.

Ne denediğiniz veya işe yarayıp yaramadığı önemli değil.

Web sitenizi veya blogunuzu şekillendirmek için daha ne kadar yapabileceğinizi öğrenmek için bunu bir oyun alanı olarak düşünün.

Meraklı olun ve yeni başlayanlar için bu CSS ipuçlarıyla bu yeni beceriyi öğrenirken eğleneceksiniz.

Geliştirici Araçları ile büyük bir bonus ipucu

Artık Geliştirici Araçları çerçevenizi açtığınıza göre, yapabileceğiniz çok güzel bir şey var.

Site hızınızı test edebilirsiniz.

Tek yapmanız gereken Ağ sekmesine tıklamak.

Ardından CTRL + R'ye tıklayın.

Alt kısımda okla işaretli satırda tam dolu sayfa hızı sürenizi kırmızı renkte göreceksiniz.