Css Bagian 2 (Basic Selector)

untuk mengidentifikasi selector pada CSS menggunakan beberapa cara yaitu: Universal Selector,Element Type Selector, Class Selector, ID Selector dan lainnya. dengan menggunakan selector mempermudah dalam hal pembuatan style layout/konten.

Universal Selector

<html>
  <head>
    <style>
    * {
      color: blue;
      background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h3> Data Diri </h3>
    <p> Nama Saya <b> Ariel </b></p>
  </body>
</html>

 Element Type Selector

<html>
  <head>
    <style>
    h1 { 
      text-decoration: underline;
      }
 
    p { 
      color:blue;
      font-size:14px;
      }
    </style>
  </head>
  <body>
    <h1> curriculum vitae </h1>
    <h3> Data Diri </h3>
    <p> Nama Saya <b> Ariel </b></p>
  
  </body>
</html>

 Class Selector

<html>
  <head>
    <style>
    .coba1 { 
      color:green;
      font-size:20px;
      font-weight:bold;
      }
 
    .coba2 { 
      color:blue;
      font-size:15px;
      }
    </style>
  </head>
  <body>
    <h3> Data Diri </h3>
    <p class="coba1"> Nama Saya Ariel </p>
    <p class="coba2"> Berasal dari Kota Pangkalpinang </p>
  </body>
</html>

 ID Selector

<html>
  <head>
    <style>
    #coba1 { 
      color:green;
      font-size:20px;
      font-weight:bold;
      }
 
    #coba2 { 
      color:blue;
      font-size:15px;
      }
    </style>
  </head>
  <body>
    <h3> Data Diri </h3>
    <p id="coba1"> Nama Saya Ariel </p>
    <p id="coba2"> Berasal dari Kota Pangkalpinang </p>
  </body>
</html>

Contoh Membuat Tabel dengan selector Class. misalnya kita membuat file style.css untuk membuat garis pada tabel.

.boxd {
  position: relative;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-bottom: 2px solid  #000;
}

.boxt {
  position: relative;
  border-right: 2px solid #000;
  border-bottom: 2px solid  #000;
}

misalnya ada class .boxd dimana bordernya left, right, bottom, top dengan warna hitam 2px sementara untuk kelas boxt hanya border rigdt dan bottom yang bergaris hitam 2px;

<html>
<head> 
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>
  <p> Membuat Tabel </p>
  <table border="1">
    <tr>
      <td> Test</td>
      <td> test2</td>
    </tr>
    <tr>
      <td> Test</td>
      <td> test2</td>
    </tr>
  </table>
 
 <p> Membuat Tabel dengan Selection CSS </p>
  <table>
    <tr>
      <td class="boxd"> Test</td>
      <td> test2</td>
    </tr>
    <tr>
      <td> Test</td>
      <td class="boxt"> test2</td>
    </tr>
    <tr>
      <td class="boxd"> Test</td>
      <td class="boxt"> test2</td>
    </tr>
  </table>
 
 </body>
 </html>

Hasilnya sebagai berikut:

 

Nilai Ujian (Passing Grade 70)