Modul CSS: Belajar CSS dari NOL bersama wiBlogger.com

MATERI PENDUKUNG

Modul belajar HTML

Modul belajar CSS ini merupakan lanjutan dari Modul belajar HTML. Pastikan anda telah mengikuti semua materi dan praktek yang telah disampaikan pada halaman tersebut.

TARGET

Mengerti tentang peranan CSS pada dokumen HTML
Mengetahui bagian-bagian dalam deklarasi CSS
Mengetahui bagaimana cara membuat file .css
Mengetahui bagaimana cara menambahkan CSS pada dokumen HTML

Fungsi CSS

CSS adalah bahasa yang digunakan untuk mengatur tampilan (layout/dekorasi) elemen-elemen HTML. Dengan CSS, kita dapat memberikan warna background, border, mengatur posisi elemen, font, dan lain sebagainya.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Deklarasi CSS

Deklarasi CSS adalah aturan atau ketentuan yang ditetapkan terkait elemen tertentu. Deklarasi CSS tidak lain adalah serangkaian kode yang digunakan untuk mengatur elemen-elemen pada dokumen HTML.

Sintak

  
selektor1 {
  properti1 : value;
  properti2 : value;
  propertiN : value;
}

selektor2 {
  properti1 : value;
  properti2 : value;
  propertiN : value;
}

selektorN {
  properti1 : value;
  properti2 : value;
  propertiN : value;
}

Keterangan:

Selektor Elemen yang hendak diatur.
Properti Hal apa yang hendak diatur terkait elemen (selektor) yang bersangkutan. Beberapa contoh properti yang tersedia adalah seperti width (lebar), height (tinggi), background (latar belakang), color (warna) dan masih banyak lagi.
Value Nilai atau ketentuan yang diberikan untuk properti yang bersangkutan.
Blok kode {...} merupakan blok kode, semua konfigurasi didefinisikan di dalam blok kode.

Contoh

	  
      <div>Belajar CSS</div>
      <p>Belajar CSS dari NOL bersama wiBlogger.com</p>

	  
      div {
        color: blue; /*warna text biru*/
        font-weight :bold; /*font tebal*/
        font-size: 22px; /*ukuran font 22px*/
        text-align: center; /*text rata tengah*/
      }
      
      p {
        color: white; /*warna text putih*/
        background: blue; /*latar biru*/
        padding: 20px; /*jarak ke bagian dalam 20px*/
        text-align: center; /*text rata tengah*/
      }

Belajar CSS

Belajar CSS dari NOL bersama wiBlogger.com

Menambahkan CSS pada Dokumen HTML

Pada modul belajar HTML, kita telah membuat dokumen HTML sederhana tanpa penerapan CSS. Disini, kita akan mulai menerapkan CSS pada dokumen yang bersangkutan.

LANGKAH-LANGKAH

Pada folder latihan HTML yang sudah dibuat sebelumnya, Buat file baru dengan format .css, disini, nama yang digunakan adalah nama main.css. Copy dan paste kode CSS di bawah ke dalam kode area dan simpan - (Lihat).

        
body {
    margin: 0;
    padding: 0;
    background: #141414;
}

h1 {
	text-align: center;
    font-size: 70px;
    margin: 0;
    margin-top: 40px;
    color: #83afff;
}

p {
    text-align: center;
    font-size: 20px;
    color: #8d8d8d;
}

Pada file index.html, tambahkan kode di bawah ke dalam elemen head - (Lihat).

        
    <link rel="stylesheet" href="main.css"/>

Simpan dan buka index.html pada browser. Hasil dari penambahan CSS ini kurang lebih seperti berikut:

Metode Penambahan CSS

Sampai disini, anda telah mengetahui bagaimana cara menambahkan CSS pada dokumen HTML. Terkait penambahan CSS, terdapat 3 metode yang bisa digunakan, 3 metode ini adalah Eksternal, Internal, dan Inline.

Eksternal CSS Pada metode eksternal, kode CSS dibuat menjadi sebuah file dengan format .css. URL file ini nantinya akan di-link dengan menggunakan elemen HTML link yang ditempatkan di bagian head (baris ke-5 pada kode di bawah). Metode inilah yang kita gunakan pada prosedur penambahan CSS di atas.
```
        
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <link rel="stylesheet" href="url-file.css"/>
  </head>
  <body>
    <h1>Modul CSS</h1>
    <p>Modul Belajar CSS Mulai dari Nol</p>
  </body>
</html>
        
      
```

Internal CSS Pada metode internal, kode CSS langsung didefinisikan pada dokumen HTML. Konfigurasi diletakkan didalam elemen HTML style dan menempatkannya pada bagian head (baris 5-10 pada kode di bawah).

        
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <style>
      p {
        color: blue;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Modul CSS</h1>
    <p>Modul Belajar CSS Mulai dari Nol</p>
  </body>
</html>

Inline CSS Pada metode inline, konfigurasi CSS langsung ditempatkan pada elemen yang bersangkutan melalui atribut style (baris ke-8 pada kode di bawah).

        
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
  </head>
  <body>
    <h1>Modul CSS</h1>
    <p style='color:blue;text-align:center;'>
      Modul Belajar CSS Mulai dari Nol
    </p>
  </body>
</html>

Untuk metode inline, CSS langsung dideklarasikan tanpa selektor dan blok kode.

SELANJUTNYA