CSS nedir?

CSS’nin ne olduğunu ve aslında ne işe yaradığını anlayalım. İnternette web sayfaları görmüş olmalısınız. Örneğin, Facebook’u açtığınızda, görüntüleri görebileceğiniz, videoyu oynatabileceğiniz, yorum yazabileceğiniz ve çeşitli etkinlikler yapabileceğiniz etkileşimli bir ekranla karşılaşıyorsunuz. Dostum, buna web sayfası diyoruz. Bu nedenle, bir web sayfası oluşturmak için, web sayfasının yapısını oluşturmak için kullanılan bir biçimlendirme dili olan HTML’ye ihtiyacımız var.

HTML ile ilgili sınırlama, web sayfasına yalnızca şekil ve boyut verebiliriz, ancak onu çekici gösteremeyiz ve işte burada devreye giriyor. web sayfasının güzel, çekici veya profesyonel görünmesini sağlayın. Tabloların veya bölümlerin yapısını değiştirmek, metni renklendirmek, kenar boşluğunu ve dolguyu ayarlamak, metin yazı tipini seçmek, bunun yardımıyla yapabileceğimiz birkaç şeydir.

Bu, web sayfasının görünümünü veya yapısını değiştirmek için kullanılan stil sayfası dili olarak tanımlanabilir. Çok basit bir ifadeyle, web sayfasını süslemek için kullanılan dil budur. Web sayfası genellikle yapı, tasarım ve müşteri sitesi işlevselliğinden oluşur. HTML yapıyı sağlar, istemci sitesi işlevselliği JavaScript adlı bir betik dili tarafından sağlanır ve tasarım CSS tarafından sağlanır.

CSS’nin şu anki sürümü, 24 Mart 2017’de piyasaya sürülen CSS 4’tür. En son sürüm, CSS 3 olan son sürümden daha hızlıdır. Tek başına kullanılamaz ve etkisini uygulamak için HTML ile entegre edilmelidir. HTML ile entegrasyon şekline göre üç türü vardı: Satır İçi, Dahili ve Harici. Inline’da kodlar aynı satıra yazılmalıdır; dahili olarak, kodların head etiketinin içindeki stil etiketi ile harici arasında tanımlanması gerekir, dosyanın HTML sayfasına bağlanması gerekir.

CSS çalışmayı nasıl bu kadar kolaylaştırıyor?

Basamaklı stil sayfası, web sayfası etkileşimini biraz daha kolaylaştırır. Web sayfasını iyi bir kullanıcı deneyimi sunacak şekilde tasarlamamıza ve kullanıcının kolayca gezinmesine olanak tanır. Ayrıca, web sayfasını yalnızca HTML ile yapılamayacak kadar iyi bir şekilde portreler. Yararına ek olarak, sayfayı biraz daha ağırlaştırır, ancak diğer yandan web sayfası boyutunu yönetmek için de kullanılabilir.

Bir yandan kullanıcılara iş kolaylığı sunarken diğer yandan web tasarımcılarına da uygulama kolaylığı sağlamaktadır. Kaç tane CSS kodu eklemeniz gerektiğine bağlı olarak satır içi, dahili ve harici CSS stili arasından seçim yapabilirsiniz. Her stil modu ile, web sayfasında stili tanıtmak için çok kolay bir mekanizma sunar.

CSS ile neler yapabilirsiniz?

Bu bölümde özellikle CSS kullanarak neler yapabileceğimizi göreceğiz. Buraya kadar CSS’nin özellikle web sayfasını süslemek için kullanıldığını anladık. Şimdi bunun bize nasıl yardımcı olabileceğini kontrol etme zamanı. Aşağıda, CSS’nin yeteneklerini gösteren birkaç nokta bulunmaktadır.

1. Web sayfası yapısını değiştirme

Web sayfasına yapıyı veren tablo ve div’lerin şeklini değiştirebiliriz. Dikdörtgenin köşelerini eğmek ve buna benzer pek çok şey yapmak için kullanılabilecek nitelikler sunar.

2. Yazı tipiyle çalışma

Yazı tipini ve metnin rengini değiştirmemizi sağlar. Renklerden birini sadece adını ilgili niteliğe yazarak seçebiliriz. Basit bir deyişle, metinleri de süsleyebilir.

3. Kullanıcı deneyimini iyileştirir

Sayfa geliştirici, basamaklı stili kullanarak, sonunda harika bir kullanıcı deneyimi ile sonuçlanacak olan web sayfasının kalitesini artırabilir. Ayrıca kullanıcılar için gezinmeyi kolaylaştırır.

4. İyi efektler yaratın

CSS kullanarak, nesnelerin çok çekici görünmesini sağlayan gölge efekti gibi efektler uygulanabilir. Gölge üretimi yapıda ve metin gibi diğer öğelerde yer alabilir.

CSS ile Çalışmak

İşte bize CSS ile gerçekte nasıl çalışabileceğimiz, onu nasıl uygulayabileceğimiz veya web sayfasını onunla nasıl entegre edebileceğimiz hakkında bir fikir verecek olan en kullanışlı ve önemli bölüm geliyor. Burada farklı bir stil ile nasıl çalışılacağını göreceğiz. Öyleyse başlayalım.

1. Satır içi CSS

Satır içi CSS’de, CSS kodlarını HTML etiketiyle birlikte bir satıra koyarız. Genellikle, bu biçimi yalnızca bir kez kullanmamız gerektiğinde veya biçimlendirmenin eklenmesi için yalnızca birkaç özniteliğe ihtiyaç duyduğunda satır içi CSS’yi kullanırız. Gerçek web geliştirmede çok sık kullanılmasa da , her şeyi öğrenmemiz gerekiyor.

Giriş

İşte giriş için görüntü; kodların Lavanta renginde yazıldığını ve HTML kodu ile birlikte sunulduğunu görebileceksiniz.

Başlığa marj sağlamak için sol marj-sol özniteliği kullanılmış olup, özniteliğin değeri, marjın ne kadar uzun olması gerektiğini tanımlayan 50 PX’dir.

Başlığın rengini değiştirmek için color özelliği kullanılmıştır. Kırmızı, başlığın kırmızı görünmesini sağlayan özelliğin değeridir.

2. Dahili CSS

Özellikler herhangi bir etikete atandığında basamaklı stil sayfasının dahili olduğu söylenir, böylece etiket nerede tanımlanırsa tanımlansın, varsayılan olarak o etikete atanan tüm özellikleri devralır. Dahiliyi tanıtmak için, CSS kodunun head bölümündeki stil etiketinin arasına yazılması gerekir.

Giriş

Burada, satır içi CSS örneğinde yaptığımız aynı öznitelikleri h1 etiketine uyguladık. Tek fark, web sayfasında tanımlanma şeklidir.

Dahili uygulamak için bu kod <style> </style> arasında yazılır.

h1 { öznitelikler..} öznitelikler ne olursa olsun anlamına gelir; h1 etiketi arasına yazılan tüm metinlere otomatik olarak uygulanacaktır.

3. Harici CSS

Harici olarak adlandırılır, çünkü bu tipte, tanımlanmış etiketlerin özelliğini tanıtmak için daha sonra web sayfasına bağlanan bir CSS dosyası oluşturulmalıdır. Ana web sayfasının boyutunu çok hafif hale getirir, çünkü o web sayfasına hiçbir CSS kodu yazılması gerekmez. Tüm kod, o web sayfasına bağlanacak ayrı bir CSS dosyasında yer alacaktır.

HTML dosyası girişi

CSS dosyası Girişi

Burada, ana HTML sayfasına link etiketini ve onun gerçek ve stil özniteliğini kullanarak bağlanan test.css adında ayrı bir dosya oluşturduk.

CSS dosyasındaki h1 etiketi için öznitelikler tanımlanmıştır.

CSS dosyası HTML dosyasına başarılı bir şekilde bağlandıktan sonra, h1 etiketinin özelliklerini test.css dosyasından devralır.

Avantajlar

Web sayfasına nezaket katar. Web sayfasını, kullanıcıların web uygulamasıyla çalışırken kendilerini rahat hissedebilecekleri daha iyi bir etkileşim platformu haline getirir. CSS kullanarak elde edilebilecek pek çok şey var. CSS’yi web tasarımının veya özellikle UI geliştirmenin çok önemli bir parçası yapan ortak faydalarından bazılarına dikkat edeceğiz.

1. Kullanıcı arayüzünü basitleştirir

Bazen yalnızca HTML kullanılarak tasarlanan web sayfasıyla çalışmak çok korkunç görünebilir. Web sayfasına hayranlık katar ve kullanıcının işine odaklanabilmesi için harika ve basit görünmesini sağlar.

2. Web sayfasını dekore edin

Basamaklı stil sayfası dili, web sayfasının düzgün görünmesi için dekorasyonunda kullanılır. Web sayfasını tasarlamak için toplu olarak kullanılabilecek CSS’de birkaç özellik vardır.

3. Web sayfası düzenini özelleştirin

Web sayfasının yapısı ile çalışan ve onu geliştiricinin istediği şekilde yapan çeşitli özelliklere sahiptir. Web tasarımcılarının uygulama arayüzünü istenen etki alanına uyacak şekilde özelleştirmesine olanak tanır.

4. Kolay entegrasyon

Bu bize birçok fayda sağladığı için CSS’yi HTML ile entegre etmek biraz zor değil . Web sayfasında CSS’yi tanıtmanın çeşitli yolları vardır ve her ikisi de çok kolay kullanılabilir.

5. Kolay kodlama

CSS’nin bir programlama dili değil, bir stil dili olduğunu zaten anladık. CSS kodlamasını gerçekten çok kolaylaştıran, hatırlanması gereken sabit ve sınırlı sayıda nitelik vardır.

İstenen yetenekler

• Onunla çalışmak için ne tür bir beceri setine ihtiyacımız olduğunu anlamak çok önemlidir. Pekala, bu bölümde, CSS’de kodlama yapmak için neye ihtiyacımız olacağı hakkında bir fikrimiz var. Ancak yine CSS kodlamada bize yardımcı olabilecek becerilerin üzerinden geçeceğiz.
• Daha önce tartışıldığı gibi, CSS bir programlama dili değildir, bu nedenle burada mantığa gerek olmayacağı açıktır, ancak evet, hatırlanması gereken bazı niteliklere sahiptir. Gereksinime bağlı olarak, karşılık gelen öznitelik için değerleri ayarlayabileceksiniz, ancak herhangi bir özniteliğe değer eklemeden önce, ne tür değerleri kabul ettiğini bilmeliyiz.
• Bunu kodlamak için, HTML’yi anlamamız gerekir, çünkü CSS, HTML tarafından sağlanan düzen ile güzel bir şekilde bütünleştirmekle ilgilidir, böylece iyi bir web sayfası oluşturulabilir. Böylece CSS’de kodlamamız gereken temel beceriler.

Kapsam

Web sayfasını tasarlamamıza izin veren, her zaman yeşil kalan bir stil dilidir. Hepimiz biliyoruz ki, internet çağdaş dönemde büyük bir şey ve büyümeye devam edecek. İnternet esas olarak web siteleri tarafından sağlanan bilgilere erişim ile ilgili olduğundan, web tasarımcısı çeşitli fırsatlar elde etmeye devam edecektir. Bir web tasarımcısı olmanın yanı sıra, kullanıcı arayüzü geliştirmede kariyerlerini de geliştirebilir.

CSS teknolojilerini öğrenmek için doğru hedef kitle kimdir?

Herhangi bir şey öğrenmeye hevesli olan herkesin en iyi izleyici olabileceği çok açık, ancak daha spesifik olmak gerekirse, konularında web tasarımı olan öğrenciler CSS öğrenebilir. Profesyonel düzeyde, web tasarımcıları için olmazsa olmaz bir teknolojidir. Bu eğitim veya CSS teknolojisi için en iyi hedef kitle olabilmek için her zaman kendi web sitelerini yapmak isteyen birçok insan gördüm.

Bu teknoloji kariyer gelişiminde size nasıl yardımcı olacak?

Bu, web tasarımında hayati bir rol oynar. İnternet kullanıcılarının katlanarak artmasıyla birlikte web sitelerinin sayısının da artması bekleniyor. Ve talep artıyorsa, fırsatlar ve büyüme kesinlikle şiddetle gelecektir. Önümüzdeki birkaç yıl içinde, bir web tasarımcısının sayısının hızla artması bekleniyor.

Ayrıca, herhangi bir kuruluşta web tasarımcısı olarak çalışan kişiler bu teknolojide çok yetkin hale gelir ve genellikle serbest çalışmayı da yaparlar. Freelancer.com, upwork.com vb. gibi çevrimiçi platformlar, serbest çalışanları, serbest çalışanları işe almak isteyen kişiye bağlar. Web tasarımı uzaktan da yapılabilen bir şey, bu yüzden yurtdışından proje alma şansı çok yüksek.