Belajar CSS 3

BELAJAR LENGKAP CSS



Memasukkan CSS pada HTML

Untuk memasukkan CSS kepada HTML terdapat 3 cara:

  1. Menggunakan CSS inline.
  2. Menggunakan CSS internal.
  3. dan Menggunakan CSS eksternal.

Kalau mau ditambahkan lagi: kita juga bisa mengatur CSS suatu element HTML dengan javascript, umumnya cara ini hanya digunakan pada komponen-komponen yang kompleks misalnya seperti komponen grafik.

1. Menggunakan CSS Inline

Cara pertama dan paling singkat adalah menggunakan CSS Inline.

CSS inline adalah sebuah kode CSS yang kita sematkan pada element apa pun di dalam body HTML, langsung menggunakan atribut style.

Misalkan kita punya dua button yang awalnya seperti ini:

<button>Masuk</button>
<button>Daftar</button>

 

Kita bisa mengubah gaya dari dua tombol di atas dengan menambahkan atribut style secara langsung seperti ini:

<button style="color: red">Masuk</button>
<button style="color: blue; border: 2px solid green">
  Daftar
</button>

 

Nah, cara di atas dinamakan CSS inline, karena kita langsung menyisipkan CSS pada baris itu juga.

2. Menggunakan CSS Internal

Cara yang kedua adalah menggunakan CSS internal. CSS internal adalah CSS yang diletakkan pada bagian <head> suatu halaman HTML.

Misalkan kita memiliki dua buah link seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Dengan hasil keluaran:

Kita bisa tambahkan tag <style> di bagian <head> seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Internal</title>

  <style>
    a {
      padding: 8px 16px;
      border-radius: 4px;
      color: white;
      background-color: #8d68e8;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sehingga hasil keluaran dua tombol di atas menjadi lebih berwarna dan enak dilihat:

Insyaallah kedepannya kita akan membahas CSS lebih detil dalam seri tutorial tersendiri.

3. Menggunakan CSS Eksternal

Dan cara ketiga untuk menambahkan CSS kedalam sebuah halaman HTML adalah menggunakan CSS Eksternal.

Yang dimaksud eksternal adalah kita membuat file tersendiri yang berekstensi .css. Kemudian file tersebut kita hubungkan ke dalam halaman HTML menggunakan tag <link>.

Misalkan kita memiliki struktur direktori seperti berikut:

├── index.html
└── style
    └── app.css

Jadi kita memiliki dua buah file:

  1. Yang pertama index.html
  2. dan yang kedua adalah style/app.css

Kita bisa menambahkan tag <link> pada bagian <head> yang mengarah kepada file style/app.css seperti berikut:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Eksternal</title>

  <link rel="stylesheet" href="./style/app.css">
</head>
<body>
  <a href="#">Beranda</a>
  <a href="#">Tentang Kami</a>
</body>
</html>

Sedangkan isi dari file style/app.css adalah sebagai berikut:

a {
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

a:first-of-type {
  background-color: #1fc296;
}

a:last-of-type {
  background-color: #d45a5a;
}

Catatan: Pada penggunaan CSS eksternal kita tidak perlu menggunakan tag <style>.

Hasil keluaran dari kode di atas adalah:

Catatan: tanda ./ pada ./style/app.css (href tag <link>) menandakan direktori yang sama dengan file index.html. Misalkan file css berada pada “parent” directory, maka kita menggunakan dua buah titik (../) sebagai pengganti.

Misal kita memiliki struktur file seperti ini:

├── blog
│   ├── linux
│   │   └── tutorial-ubuntu.html
│   └── tutorial-python.html
├── index.html
└── style
    └── app.css

Kita memiliki 3 buah file html dan satu buah file css. Maka link yang mengarah ke file css tersebut akan berbeda-beda (relatif terhadap lokasi file yang memanggilnya).

Link pada file index.html akan terlihat seperti kode di bawah:

<link rel="stylesheet" href="./app/style.css">

Sedangkan link pada file blog/tutorial-python.html seperti ini:

<link rel="stylesheet" href="../app/style.css">

Dan yang terakhir, link pada file blog/linux/tutorial-ubuntu.html akan terlihat seperti berikut:

<link rel="stylesheet" href="../../app/style.css">

Link url seperti di atas dinamakan relative uri.

Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya