Macam-Macam CSS dan Cara Menggunakan CSS (Cascading Style Sheet). CSS adalah

Macam CSS dan Cara Menggunakan CSS - Kali ini saya akan membahas tentang bahasa pemrograman yaitu CSS. Apa itu css? Banyak orang yang awam tentang hal ini, dan untuk para programer web sudah tidak asing lagi dengan bahasa pemrograman web ini dalam pemrograman web selan terdapat CSS juga terdapat bahasa lain yang diantara yaitu PHP, Java script, dll.

CSS merupakan kepanjangan dari Cascading Style Sheet yaitu adalah bahasa pemrograman WEB yang berfungsi untuk memperindah tampilan pada sebuah website, seperti mengatur background, border, color, height, width, opacity, animasi, dll.

Aplikasi pengembang pemrograman web memiliki banyak pilihan yang sering saya gunakan yaitu atom anda juga dapat menggunkan notepad++, notepad, sublime, Vim, gEdit dan masih ada banyak lagi untuk software text editor.

Sebelum belajar lebih dalam lagi mengenai Code-Code CSS anda harus mengerti bagaimana code css tersebut dipanggil agar muncul pada tampilan web yang sedang dibuat. Dalam CSS terdapat 3 jenis dalam penggunaannya yaitu inline style sheet,external style sheet, embedded style sheet.

Inline style sheet

Yang pertama adalah Inline style sheet yaitu sebuah pemangilan code pemrograman yang terletak pada objek itu langsung. Maksudnya saat kita membuat sebuah elemen paragraf misalnya, dan anda ingin mengganti ukuran font dan warna pada elemen paragraf tersebut, anda cukup melakukan editing langsung pada elemen paragraf tersebut dengan menambahkan perintah Style=“” tanpa harus mengeditnya pada halaman / page yang lain.

Contoh penerapan :

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>uji coba inponow</title>
  </head>

  <body>

      <!-- ini merupakan contoh inline css -->

      <p style="font-size:45px;color:#3d63d5;padding:20px;">Gibran Aldi</p>

  </body>

</html>

External style sheet

Jenis CSS selanjutnya adalah External style sheet yaitu pemanggilan code css yang terletak pada luar css/luar dari laman coding yang akan dipanggil dengan code <link rel="stylesheet" href=“namahalamancss.css"> yang di dukung atau dapat di panggil melalui elemen id dan class. Cara ini sering digunakan oleh banyak programmer web design karena lebih praktis ( hanya dengan satu halaman yaitu bernama style.css anda dapat mendesain lebih dari 3 halaman web ).

Contoh penerapan :

External style sheet

Dan yang terakhir, Embedded style sheet yaitu pemanggilan code css yang biasanya terletak tepat dibawah <head></head> akan tetapi masih berada pada satu laman yang sama, yang dapat dipanggil dengan code id, class.

Contoh penerpan :

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">
    <title>uji coba CSS inponow</title>

  </head>

    <style media="screen">

      .paragraf {
        font-size:45px;
        color:#3d63d5;
        margin: 50px;
        font-family: Product Sans; 
      }

    </style>

  <body>

     <!-- ini merupakan contoh Embedded style sheet -->

      <p class="paragraf">Gibran Aldi</p> 

  </body>

</html>

Kode diatas kemudian akan di panggil memalui <link rel="stylesheet" href=“paragraf.css"> dimana paragraf.css merupakan nama file css yang saya buat dan dapat dirubah sesuai keinginan teman-teman. Gambar dibawah ini merupakan hasil dari koding di atas :

Jika kalian semua mulai tertarik untuk belajar lebih lanjut mengenai CSS dan bahasa pemrograman lainnya anda dapat belajar di w3scool.com, codepen.com, freecodecamp.org dan masih banyak lagi situs situs penyedia pembelajaran pemrograman web, atau request aja pada saya. Mungkin itu saja yang dapat saya sampaikan pada artikel Cara Memakai CSS dan Jenis - Jenis CSS (Cascading Style Sheet), semoga dapat bermanfaat.

Macam-Macam CSS dan Cara Menggunakan CSS (Cascading Style Sheet)

Inline style sheet

External style sheet

External style sheet

Comments