CSS Başlangıç

CSS Dersleri Başlangıç CSS kodlama dili dâhili ve harici olarak kullanılabilir. Dahili olarak ‘head’ etiketinin içerisinde yada direk olarak html kodlarına yazılabilir. Harici olarak ise farklı bir css dosyası oluşturularak yapılabilir. Dâhili olarak kullanım şekilleri;
‘head’ etiketi içerisine yazılması:

<head>
   <style type=”text/css”>
      .yazi {
         font-size: 15px; /*yazının boyutunu ayarlar.*/
	     font-family: arial; /*yazının tipini ayarlar.*/
	     float: left; /*yazının sağa, sola yada oraya ayarlanmasını sağlar.*/
	     color: red; /*yazı rengini ayarlar.*/
	     background: blue; /*arka plan rengini ayarlar.*/
	     opacity: 1; /*saydamlık özelliğini ayarlar.*/
	  }
   </style>
</head>

<-- Yukarıda ki css kodumuzu html dosyamızda aşağıdaki gibi kullanacağız -->
<body>
   <span class=”yazi”> Yazımız… </span>
                
   <!-- Visual Studio Browser Link -->
   <script type="application/json" id="__browserLink_initializationData">
       {"appName":"Chrome","requestId":"90a69cd463ee4414afa9d7621d5b8932"}
   </script>
   <script type="text/javascript" src="http://localhost:53872/8daea1b12b1c4e189af505efd4688aed/browserLink" async="async"></script>
   <!-- End Browser Link -->

</body>

Görmüş olduğunuz gibi ‘body’ etiketinin içerisinde span yabi boş etiket tagının içerisinde css class’ımızı kullanmış olduk.
Şimdi ise HTML kodlarımıza direkten CSS kodlarımızı yazalım.

<body>
   <b style=”color:red;  float:left; font-size:10px;”>Yazımız…</b>
</body>

<--
Yukarıda görmüş olduğunuz gibi direk olarak html kodumuzun içerisinde css kodlarımızı yazmış olduk.
Bir sonra ki ve en iyi yöntem olan harici CSS yöntemini göstereceğim. Bu yöntemde farklı bir not defteri açıp css kodlarımızı oraya yazacağız sonra not defterimizi kaydederken style.css diye kaydettiğimizde css dosyamız oluşmuş olacaktır. CSS Dosyamızı ise aşağıda ki kodlar gibi kullanacağız;
   -->


   .yazisol
      {
         float:left;
         color:red;
         text-decoration:none; //bu kod yazıda altı çizili gibi özellikleri kaldırır sade halini almasını sağlar.
      }
   .yazisag
      {
         float:right;
         color:blue;
         bgcolor:yellow;
         font-size:18px;
      }

<--
Bu kodlarımızı CSS dosyamıza yazdıktan sonra HTML dosyamıza geliyoruz ve ‘head’ etiketinin içerisine aşağıda ki gibi yazıyoruz -->

<head>
   <link href=" style.css" type="text/css" />
</head>
                    

Yukarıda ki kodu yazdıktan sonra tüm CSS bölümlerimizi CSS dosyamızda yönetiyoruz ve HTML dosyasına CSS yazmayarak fazla karışıklığı önlemiş oluyoruz. Harici CSS kullanımı farklı bir dosyadan CSS kodlarımızı çağırarak daha düzenli bir kodlama yapabilmemize olanak sağlar. CSS kodlarımız ayrı HTML kodlarımız ayrı olduğu sürece kodlamada değişiklik yapılacağı zaman yazılıma daha kolay ulaşmayı ve daha etkili bir biçimde yazılımı değiştirmemizi sağlar. CSS e giriş yapmak için yukarıda ki bilgileri hafızanıza kazımanız sizler için çok önemli olacaktır. Temel bilgiler yukarıdaki gibidir. Lakin CSS de daha öğreneceğiniz çok kodlama vardır. CSS yazarken bir kodu sadece bir işlev için kullanmayın hayal gücünüzün sınırlarını zorlayın ve aynı kodu farklı ne gibi işlevlerde kullanabilirim diye düşünün. Bir yerde takılıp kaldığınızda en basit kodlamalar bile işi çözebilir. Onun için birazcık sakin kafa ile düşünmek her zaman yararlı olur.