CSS Class Kullanımı

3 Mart 2021 1149 kez okundu

HTML kodlarımızın içerisinde CSS ile özelleştirmeler yaptığımız zaman, özelleştirme bölümlerini tanımlamak için iki tane öznitelik kullanmaktayız. Bunlardan birincisi: Class özniteliği , ikincisi: ID özniteliğidir.
Class özniteliği, bir HTML öğesi için tek veya birden fazla sınıfın adı belirtmek için kullanılabilir. Tek bir sınıf içinde kullanabiliriz, birden fazla sınıfı özelleştirmek ve düzenlemek içinde kullanabiliriz. Class özniteliği, grup halinde bulunan HTML kod bloğuna CSS kodu tanımlamak için kullanılır.

<p class="paragraf1"> Merhaba ! Bu bir class bölümüdür.</p>

1	<p class="paragraf1"> Merhaba ! Bu bir class bölümüdür.</p>

<style> … </style> etiketlerinin içerisinde ( . ) nokta işaretiyle belirtilir.

Birden fazla örnek ile Class kullanımının nasıl olduğuna ayrıntılı bir şekilde bakalım.

İçindekiler

1Class bölümü oluşturmak ve özelleştirmek

İlk olarak body içerisinde h1 etiketiyle bir class oluşturalım.

<html> 
 <head> 
  <title>CSS | Class Kullanımı | KodKampusu.COM</title> 
 <head>

 <body>
   <h1 class="baslik1">CSS Class Kullanımı</h1> <!-- h1 etiketinde bir class bölümü oluşturduk -->
 </body>

</html>

<html>

<head>

<title>CSS | Class Kullanımı | KodKampusu.COM</title>

<head>

<body>

<h1 class="baslik1">CSS Class Kullanımı</h1>

</body>

</html>

Ardından CSS özelleştirmelerini yapmak için, <head> … </head> bölümü içerisinde
<style> … </style> bölümü açalım.

<html> 
 <head> 
  <title>CSS | Class Kullanımı | KodKampusu.COM</title> 
   <style> 
         /*CSS Kodlarının yazılacağı bölümü oluşturduk*/
   </style>
 <head>

 <body>
   <h1 class="baslik1">CSS Class Kullanımı</h1>
 </body>

</html>

<html>

<head>

<title>CSS | Class Kullanımı | KodKampusu.COM</title>

<style>

/*CSS Kodlarının yazılacağı bölümü oluşturduk*/

</style>

<head>

<body>

<h1 class="baslik1">CSS Class Kullanımı</h1>

</body>

</html>

Şimdi oluşturduğumuz style bölümü içerisinde, h1 başlığımızın özelleştirmelerini yapalım.

<html> 
 <head> 
  <title>CSS | Class Kullanımı | KodKampusu.COM</title> 
   <style> 
         .baslik1 {
           color: purple; /*Yazının rengini mor yaptık*/
           background-color: yellow; /*Arkaplanını sarı yaptık*/
           text-align: left; /*Yazının hizasını sola yaslı yaptık*/
                  }
   </style>
 <head>

 <body>
   <h1 class="baslik1">CSS Class Kullanımı</h1>
 </body>

</html>

<html>

<head>

<title>CSS | Class Kullanımı | KodKampusu.COM</title>

<style>

.baslik1 {

color: purple; /*Yazının rengini mor yaptık*/

background-color: yellow; /*Arkaplanını sarı yaptık*/

text-align: left; /*Yazının hizasını sola yaslı yaptık*/

}

</style>

<head>

<body>

<h1 class="baslik1">CSS Class Kullanımı</h1>

</body>

</html>

CSS Class Kullanımı

2Birden fazla farklı etiketlere Class tanımlama

CSS ile özelleştirmeler yaparken, birbirlerinden farklı etiketleri ayrı ayrı özelleştirebiliriz. Birden fazla class bölümü oluşturarak özelleştirmelerimizi yapmak mümkündür.
<html> <head> <title>CSS | Class Kullanımı | KodKampusu.COM</title> <style> /*CSS Kodlarının yazılacağı bölüm*/ </style> <head> <body> <h1> Class Örnekleri </h1> <h3 class="baslik1">CSS Class Kullanımı</h3> <p class="paragraf1">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p> <h4 class="baslik2">CSS Class Kullanımı 2</h4> <p class="paragraf2">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
  <title>CSS | Class Kullanımı | KodKampusu.COM</title>
   <style>
         /*CSS Kodlarının yazılacağı bölüm*/
   </style>
<head>

<body>
   <h1> Class Örnekleri </h1>
   <h3 class="baslik1">CSS Class Kullanımı</h3>
      <p class="paragraf1">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
      non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
      augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p>

   <h4 class="baslik2">CSS Class Kullanımı 2</h4>
      <p class="paragraf2">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
      Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
      ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
      euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p>

</body>

</html>
Body içerisinde içeriklerimizi girdik. Şimdi bunların ayrı ayrı özelleştirmelerini yapalım.
<html> <head> <title>CSS | Class Kullanımı | KodKampusu.COM</title> <style> .h1 { /* !! Class ismi vermeden de, h1 başlıklarını bu şekilde düzenleyebiliriz !! */ color: black; background-color: cyan; text-decoration: underline; text-align: center; } .baslik1 { color: red; background-color: purple; letter-spacing: 10px; text-align: right; } .paragraf1 { color: DarkSlateBlue; } .baslik2 { color: Maroon; background-color: pink; letter-spacing: 20px; text-align: left; } .paragraf2 { color: orange; } </style> <head> <body> <h1> Class Örnekleri </h1> <h3 class="baslik1">CSS Class Kullanımı</h3> <p class="paragraf1">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est.</p> <h4 class="baslik2">CSS Class Kullanımı 2</h4> <p class="paragraf2">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis.</p> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
  <title>CSS | Class Kullanımı | KodKampusu.COM</title>
   <style>
         .h1 { /* !! Class ismi vermeden de, h1 başlıklarını bu şekilde düzenleyebiliriz !! */
           color: black;
           background-color: cyan;
           text-decoration: underline;
           text-align: center;
              }

         .baslik1 {
           color: red;
           background-color: purple;
           letter-spacing: 10px;
           text-align: right;
              }

         .paragraf1 {
           color: DarkSlateBlue;
              }

         .baslik2 {
           color: Maroon;
           background-color: pink;
           letter-spacing: 20px;
           text-align: left;
              }

         .paragraf2 {
           color: orange;
              }
   </style>
<head>

<body>
   <h1> Class Örnekleri </h1>
   <h3 class="baslik1">CSS Class Kullanımı</h3>
      <p class="paragraf1">Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi
      accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor.
      Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est.</p>

   <h4 class="baslik2">CSS Class Kullanımı 2</h4>
      <p class="paragraf2">Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac,
      aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a
      tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis
      ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis.</p>

</body>

</html>
Class Örnekleri
CSS Class Kullanımı
Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi
accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor.
Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est.
CSS Class Kullanımı 2
Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac,
aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a
tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis
ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis.

3Class ismi vermeden özelleştirme yapmak

Yukarıda bulunan örnekte bulunan h1 başlığında bir class ismi vermeden tanımlama yapmıştık. Etiketlere herhangi bir isim tanımlaması yapmadan sadece etiketinin belirterek özelleştirme yapabiliriz.
<html> <head> <title>CSS | Class Kullanımı | KodKampusu.COM</title> <style> /*CSS Kodlarının yazılacağı bölüm*/ </style> <head> <body> <h1> Class Örnekleri </h1> <h3>CSS Class Kullanımı</h3> <p>Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p> <h4>CSS Class Kullanımı 2</h4> <p>Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p> <ol> <li>Çay</li> <li>Kahve</li> <li>Su</li> </ol> <ol> <li>Limonata</li> <li>Meyve suyu</li> <li>Gazoz</li> </ol> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head>
  <title>CSS | Class Kullanımı | KodKampusu.COM</title>
   <style>
         /*CSS Kodlarının yazılacağı bölüm*/
   </style>
<head>

<body>
   <h1> Class Örnekleri </h1>
   <h3>CSS Class Kullanımı</h3>
      <p>Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
      non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
      augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p>

   <h4>CSS Class Kullanımı 2</h4>
      <p>Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
      Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
      ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
      euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p>

      <ol>
<li>Çay</li>
<li>Kahve</li>
<li>Su</li>
      </ol>

      <ol>
<li>Limonata</li>
<li>Meyve suyu</li>
<li>Gazoz</li>
      </ol>

</body>

</html>
Bu örneğimizde ayrıca listeler de ekledik. Listelere de birer özelleştirme tanımlayacağız.
<html> <head> <title>CSS | Class Kullanımı | KodKampusu.COM</title> <style> .h1 { color: gold; background-color: MediumVioletRed; text-shadow: 3px 3px; text-align: left; } .h3 { color: DarkRed; background-color: BurlyWood; text-decoration: line-through; text-align: right; } .p { color: Indigo; background-color: PapayaWhip; } .ol { background-color: MediumSeaGreen; } .li { color: black; } </style> <head> <body> <h1> Class Örnekleri </h1> <h3>CSS Class Kullanımı</h3> <p>Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p> <h3>CSS Class Kullanımı 2</h4> <p>Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis. Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen, euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p> <ol> <li>Çay</li> <li>Kahve</li> <li>Su</li> </ol> <ol> <li>Limonata</li> <li>Meyve suyu</li> <li>Gazoz</li> </ol> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
<head>
  <title>CSS | Class Kullanımı | KodKampusu.COM</title>
   <style>
         .h1 {
           color: gold;
           background-color: MediumVioletRed;
           text-shadow: 3px 3px;
           text-align: left;
              }

         .h3 {
           color: DarkRed;
           background-color: BurlyWood;
           text-decoration: line-through;
           text-align: right;
              }

         .p {
           color: Indigo;
           background-color: PapayaWhip;
             }

         .ol {
               background-color: MediumSeaGreen;
             }

         .li {
               color: black;
             }
   </style>
<head>

<body>
   <h1> Class Örnekleri </h1>
   <h3>CSS Class Kullanımı</h3>
      <p>Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
      non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
      augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.</p>

   <h3>CSS Class Kullanımı 2</h4>
      <p>Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
      Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
      ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
      euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat</p>

      <ol>
<li>Çay</li>
<li>Kahve</li>
<li>Su</li>
      </ol>

      <ol>
<li>Limonata</li>
<li>Meyve suyu</li>
<li>Gazoz</li>
      </ol>

</body>

</html>
Class Örnekleri
CSS Class Kullanımı
Merhaba burası 1. Başlığın içeriğidir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum sit amet sapien vitae mi efficitur placerat. Suspendisse potenti. Morbi accumsan, enim
non malesuada blandit, metus purus interdum ex, eu facilisis risus elit non tortor. Ut scelerisque
augue ut euismod faucibus. Proin interdum at sem vel suscipit. Mauris faucibus, est non maximus.
CSS Class Kullanımı 2
Merhaba burası 2. Başlığın içeriğidir. Donec id lectus lacinia, pharetra sem ac, aliquet felis.
Mauris ac lacus vitae dolor pretium pulvinar ac eget elit. Nunc libero leo, accumsan a tellus quis
ortis dapibus eros. Pellentesque orci quam, sollicitudin vitae odio eget, finibus sagittis ante ruen,
euismod ante est, ut faucibus metus dapibus ac. Donec sollicitudin sapien vel mauris sagittis, feugiat
Çay
Kahve
Su
Limonata
Meyve suyu
Gazoz
Post Views: 1.149