Ücretsiz bir şekilde siteni daha güzel hale hale getirmek için css dili öğren.
KODYAZAR HTML CSS PHP C#

CSS

Hoşgeldin kodyazar. Bu derste css dilinden bahsedeceğim. CssHtml derslerini takip ettiyseniz bir örnek vermiştim modifiye edilmemiş araba. Evet o araba. İşte o arabayı burada modifiye edeceğiz. Cascading Style Sheet mânası metin ve format biçimlendirme diyebiliriz. Html kodlarında değişikler yaparız. Web sitemiz daha hoş bir görüntüye kavuşur. Css kodları harici ve dahili olmak üzere 2'ye ayrılır. Nedir bu harici ve dahili css ?

Gelin tanımlayalım

Dahili css

Adından da anlaşılacağı gibi html kodlarının içinde dahil olur. Head etiketlerinin arasında style etiketi açılır ve kodlar buraya yazılır. Dezavantajı html içinde karmaşıklık sağlar.

Harici css

Html kodlarının dışında ayriyetten kodlar yazılır. Html kodlarına import edilir. İmport ederken head etiketlerinde link etiketi yoluyla çağırırız. Html içindeki karmaşıklığı önler.

Dahili ve harici css tanımını öğrendiğimize göre css'in nasıl kullanıldığını öğrenelim. Css kodları süslü parantezler {özellikler} içinde yazılır. Özellikleri hangi class'a yani sınıfa tanımlayacağımızı belirtmek için özelliklerden önce bir sınıf yazmalıyız.

            p{
              renk : siyah;
              yazının boyutu : 18px;
            }
          

Yukarıda örnek verdim burada türkçe terimler kullandım. Tabii ki daha rahat anlaşılması için türkçe terimler kullandım fakat kodlama yaparken ingilizce karşılıklarını kullanacağız. Renk yerine color, yazının boyutu yerine font-size gibi terimler kullanacağız. Burada dikkatinizi çeken bir şey olması lazım. Ne o ? Süslü parantezden önce p classını kullandık. Yani öğrenmiş oluyoruz ki html etiketlerine bu şekilde özellikler tanımlayabiliyoruz. Sadece html etiketlerine mi özellikler tanımlayabiliyoruz ? Bunlarla mı sınırlı css ? Tabii ki hayır. Kendi sınıfınızı oluşturabilirsiniz. Bunun için süslü parantezden önce "." veya "#" işareti kullanılır. Gelin o konuyada değinelim. . ile kullanacaksak bu tüm html etiketlerini etkiler. # kullanacaksak istediğimiz html etiketlerinde kullanabiliriz bir paragraf seçeriz veya bir img etiketi seçeriz sadece oraya özellik veririz. Aradaki farklı anladık dimi? Biri tüm html etiketlerini etkiliyor. Biri ise bizim istediğimiz html etikerini etkiliyor.

            1 .sinifadi{
            2   color: black;
            3   font-size: 18px;
            4 }
          
1. kullanımda class şeklinde kullandık. Önündeki . class olduğunu belirtir. Html kısmında sinifadi classıyla çağrılır ve tüm sinifadi etkilenir.
            1 #sinifadi{
            2   color: black;
            3   font-size: 18px;
            4 }
          
2. kullanımda id şeklinde kullandık. Önündeki # id olduğunu belirtir. Html kısmında sinifadi classıyla çağrılır ve sadece istediğiniz sinifadi etkilenir.

Not

Html taglerine özellik verirken css kısmında . veya # kullanmamıza gerek yok. Html taglerine özellik verirken css kısmında sadece tag{özellik} olarak kullanabiliriz.

Dahili Css Kullanımı
index dosyası
          1 <!DOCTYPE HTML>
          2 <html lang="en">
          3 <head>
          4     <meta charset="UTF-8">
          5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
          6     <title>Dahili Css Kullanımı</title>
          7     <style>
          8     p{
          9         color: black;
         10          font-size: 18px;
         11      }
         12      </style>
         13  </head>
         14  <body>
         15       <p>Merhaba KodYazar</p>
         16  </body>
         17  </html>
          

Dahili css örneği verdiğimiz için head etiketleri arasında style etikleri kullandık. Style etiketlerinin içinde ise css kodlarını yazdık. 9. satırda p etiketine siyah renk verdik. 18 px yazı boyutu verdik. Bunu nereden anlamalıyız head etiketleri arasında style tagleri yer alıyor ve p classına özellikler verdik.

Harici Css Kullanımı
index dosyası
            1 <!DOCTYPE HTML>
            2 <html lang="en">
            3 <head>
            4     <meta charset="UTF-8">
            5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
            6     <title>Harici Css Kullanımı</title>
            7     <link rel="stylesheet" href="style.css">
            8 </head>
            9 <body>
            9     <p>Merhaba KodYazar</p>
           10 </body>
           11 </html>
            
style.css dosyası
              1 p{
              2  color: black;
              3  font-size: 18px;  
              4 }
            

Harici css kullanırken ne yaptığımızı anlatıyım. "index" dosyasında 7.satırda head etiketlerinin arasında link etiketi kullandık ve css dosyamızın nerede olduğunu belirttik ve href="style.css" ile css dosyamızı çağırdık. Css dosyanız başka bir yerdeyse href="klasoryolu" yazabilirsiniz.

Not

index ve style.css dosyamızın aynı klasörde olmasına özen gösterelim.