Beranda / html / Komputer / Pemrograman / Web

Style HTML - CSS | Tutorial HTML 13

Oleh Sopyan Posting Komentar
Assalamualaikum sobat, di artikel kali ini kami akan membagikan tutorial tentang style HTML dan pengenalan tentang CSS, berikut adalah tutorialnya.

Style HTML - CSS

CSS merupakan singkatan dari Cascading Style Sheet.

Dengan menggunakan CSS kita bisa mengontrol tata letak halaman web sekaligus dan menghemat banyak pekerjaan.

Apa Itu CSS ?

CSS (Cascading Style Sheet) digunakan untuk memformat tata letak halaman web.

Dengan menggunakan CSS, kita bisa mengatur jarak antar elemen, ukuran teks, warna, font, bagaimana elemen ditata dan diposisikan, warna background atau gambar background yang akan digunakan, tampilan berbeda untuk ukuran layar dan perangkat berbeda, dan masih banyak lagi.

Tips : Kata Cascading artinya gaya yang kita terapkan pada elemen induk juga akan diterapkan pada semua elemen turunan di dalam induk. Jadi, ketika kita membuat warna badan teks menjadi "merah", maka semua judul, paragraf dan elemen teks yang ada di dalam induk akan memiliki warna yang sama (kecuali kita mengatur warna yang berbeda untuk elemen-elemennya).

Cara Menggunakan CSS

Ada 3 cara untuk menambahkan CSS ke dalam dokumen HTML, yaitu :
  • Inline - yaitu dengan menggunakan atribut style di dalam elemen HTML.
  • Internal - yaitu dengan cara menggunakan elemen <style> di dalam bagian <head>.
  • Eksternal - yaitu dengan cara menggunakan elemen <link> untuk menautkan ke file CSS eksternal.
Menggunakan file CSS eksternal adalah cara yang paling umum digunakan, namun pada tutorial kali ini kita akan menggunakan cara inline dan internal CSS, agar lebih mudah untuk di demonstrasikan dan kalian lebih mudah mencobanya sendiri.

Inline CSS

Atribut style digunakan pada cara inline CSS.

Inline CSS digunakan untuk menerapkan gaya unik pada satu elemen HTML.

Pada contoh di bawah, kita mengatur warna teks elemen <h1> menjadi merah dan warna teks <p> menjadi hijau.

Contoh Program 1: Inline CSS

<!DOCTYPE html>
<html>
<body>
  <h1 style="color:Red;">Heading warna merah</h1>
  
  <p style="color:Green;">Paragraf warna hijau</p> 
  
</body>
</html>

Hasil Program 2

Hasil Program 1 Inline CSS

Penjelasan Program 2

Contoh Program 1 Inline CSS
  • Di baris 4 kita membuat heading 1 berwarna merah.
  • Di baris 6 kita membuat paragraf berwarna hijau.

Internal CSS

Untuk mengatur gaya satu halaman HTML, CSS internal sangat cocok digunakan.

Untuk membuat CSS internal, kita membuatnya di bagian <head> halaman HTML di dalam sebuah elemen <style>.

Pada contoh berikut kita mengatur semua elemen <h1> berwarna hijau, semua elemen <p> berwarna biru dan latar belakang halaman kita beri warna kuning.

Contoh Program 2 : Internal CSS.

<!DOCTYPE html>
<html>
<head>
  <style>
  body{background-color:yellow;}
  h1{color:Green;}
  p{color:Blue;}
  </style>
</head>

<body>
  
  <h1>Ini heading</h1>
  <p>Ini paragraf</p>
</body>
</html>

Hasil Program 2

Hasil Program 2 Internal CSS

Penjelasan Program 2

Contoh Program 2 Internal CSS
  • Di baris 4 sampai baris 9 kita membuat elemen <style> untuk menampung kode CSS untuk mengatur gaya halaman HTML.
  • Di baris 5 kita membuat latar belakang halaman berwarna kuning.
  • Di baris 6 kita membuat semua elemen <h1> berwarna hijau.
  • Di baris 7 kita membuat semua elemen <p> berwarna biru.
  • Di baris 13 kita membuat sebuah heading.
  • Di baris 14 kita membuat sebuah paragraf 

CSS Eksternal

Untuk mengatur gaya pada banyak halaman eksternal, CSS eksternal sangat direkomendasikan karena hanya dengan sebuah file CSS eksternal kita bisa menggunakannya pada banyak halaman HTML.

CSS eksternal tidak boleh berisi kode HTML apapun dan harus disimpan dengan ekstensi .css, kita bisa membuat CSS eksternal dengan editor apapun selama ekstensinya .css.

Untuk menggunakan CSS eksternal adalah dengan menggunakan elemen <link> di dalam bagian <head> pada setiap halaman HTML.

Pada contoh dibawah kita membuat file CSS eksternal dengan nama gaya.css :

File CSS gaya.css :

body {
  background-color: Yellow;
}
h1{
  color:Blue;
}
p{
  color:Green;
}

Penjelasan file CSS eksternal :

file css
  • Di baris 1 sampai baris 3 kita membuat latar belakang halaman berwarna kuning.
  • Di baris 4 sampai baris 6 kita membuat semua elemen <h1> berwarna biru.
  • Di baris 7 sampai baris 9 kita membuat semua elemen <p> berwarna hijau.
Setelah kita memiliki file CSS eksternal, kita panggil file tersebut di dokumen HTML, seperti contoh di bawah ini :

Contoh Program 3 : CSS Eksternal

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="gaya.css">
</head>

<body>
  
  <h1>Ini adalah heading</h1>
  <p>Ini adalah paragraf</p>
  
</body>
</html>

Hasil Program 3

Hasil Program 3 CSS Eksternal

Penjelasan Program 3

Contoh Program 3 CSS Eksternal
  • Di baris 4 kita memanggil file CSS yang kita simpan dengan nama gaya.css.
  • Di baris 9 kita membuat heading.
  • Di baris 10 kita membuat sebuah paragraf.

Warna, Font dan Ukuran CSS

Disini kita akan mendemonstrasikan penggunaan CSS yang umum digunakan.

Untuk mengatur warna teks, kita dapat menggunakan properti CSS color.

Untuk mengatur jenis font yang digunakan, kita dapat menggunakan properti CSS font-family.

Untuk mengatur ukuran teks, kita dapat menggunakan properti CSS font-size.

Contoh Program 4 : Warna, Font dan Ukuran CSS

<!DOCTYPE html>
<html>
<head>
  <style>
  h1{
    color:Green;
    font-family:Courier;
    font-size:400%;
  }
  
  p{
    color:Red;
    font-family:Verdana;
    font-size:200%;
  }
  </style>
</head>
<body>
  
  <h1>Ini heading</h1>
  <p>Ini paragraf</p>
  
</body>
</html>

Hasil Program 4

Hasil Program 4 CSS warna, font dan ukuran

Penjelasan Program 4

  • Di baris 4 sampai baris 16 kita membuat elemen <style> untuk mengatur gaya di halaman HTML.
  • Di baris 5 sampai baris 9 kita semua mengatur elemen <h1> dengan warna hijau, jenis huruf courier dan ukuran 400%.
  • Di baris 11 sampai baris 15 kita mengatur semua elemen <p> dengan warna merah, jenis huruf verdana dan ukuran 200%.

CSS Border

Kita bisa mengatur batas disekitar elemen HTML dengan menggunakan properti CSS border.

Hampir semua elemen HTML bisa kita beri batas.

Contoh Program 5 : CSS Border

<!DOCTYPE html>
<html>
<head>
  <style>
  h1{
    border:5px solid Green;
  }
  p{
    border:2px solid Red;
  }
  </style>
</head>

<body>
  
  <h1>Ini heading</h1>
  
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  
</body>
</html>

Hasil Program 5

Hasil Program 5 CSS Border

Penjelasan Program 5

Contoh Program 5 CSS Border
  • Di baris 5 sampai baris 7 kita mengatur semua elemen <h1> kita mengatur batas dengan ukuran 5 piksel dengan jenis solid berwarna hijau.
  • Di baris 8 sampai baris 10 kita membuat pembatas untuk semua elemen <p> dengan ukuran 2 piksel berjenis solid berwarna merah.

CSS padding

Untuk mengatur jarak padding (spasi) antara batas dan teks yaitu dengan menggunakan properti CSS padding.

Contoh Program 6 : CSS Padding

<!DOCTYPE html>
<html>
<head>
  <style>
  h1{
    border:5px solid Green;
    padding:30px;
  }
  p{
    border:2px solid Red;
    padding:30px;
  }
  </style>
</head>

<body>
  
  <h1>Ini heading</h1>
  
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  
</body>
</html>

Hasil Program 6

Hasil Program 6 CSS Padding

Penjelasan Program 6

Contoh Program 6 CSS Padding
  • Di baris 5 sampai baris 8 kita mengatur semua elemen <h1> dengan border berukuran 5 piksel berwarna hijau dengan padding 30 piksel.
  • Di baris 9 sampai baris 12 kita mengatur semua elemen paragraf dengan border berukuran 2 piksel berwarna merah dengan padding 30 piksel.
  • Di baris 18 kita membuat heading 1.
  • Di baris 20 sampai baris 22 kita membuat paragraf.

CSS Margin

Untuk mengatur margin (spasi) diluar batas yaitu dengan menggunakan properti CSS margin.

Contoh Program 7 : CSS Margin

<!DOCTYPE html>
<html>
<head>
  <style>
  p{
    border:2px solid Red;
    margin:50px;
  }
  </style>
</head>

<body>
  
  <h1>Ini heading</h1>
  
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  
</body>
</html>

Hasil Program 7

Hasil Program 7 CSS Margin

Penjelasan Program 7

Contoh Program 7 CSS Margin
  • Di baris 5 sampai baris 8 kita mengatur semua elemen <p> dengan border solid berukuran 2 piksel berwarna merah dengan margin 50 piksel.
  • Di baris 14 kita membuat heading 1.
  • Di baris 16 sampai baris 18 kita membuat 3 buah paragraf.

Link Ke CSS Eksternal

Kita bisa menautkan dokumen HTML dengan file CSS eksternal menggunakan URL lengkap atau dengan jalur yang berhubungan dengan halaman web saat ini.

Contoh Program 8 : Menggunakan file CSS dari website

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.filesop.com/html/styles.css">
</head>

<body>
  
  <h1>Ini heading</h1>
  
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>

</body>
</html>

Hasil Program 8

Penjelasan Program 8

Contoh Program 8 CSS Eksternal Sumber Website
  • Di baris 4 kita mengambil file CSS eksternal dari situs web.
  • Di baris 9 kita membuat sebuah heading.
  • Di baris 11 sampai baris 13 kita membuat 3 buah paragraf.

Contoh Program 9 : Link ke folder website saat ini

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/html/gaya.css">
</head>

<body>
  
  <h1>Ini heading</h1>
  
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>

</body>
</html>

Hasil Program 9

Hasil Program 9 CSS Eksternal Sumber Saat Ini

Penjelasan Program 9

Contoh Program 9 CSS Eksternal Sumber Website Saat Inj
  • Di baris 4 kita menautkan file CSS eksternal yang berada di folder html yang berada di website saat ini.
  • Di baris 9 kita membuat sebuah heading.
  • Di baris 11 sampai baris 13 kita membuat 3 paragraf.

Contoh Program 10 : Menautkan file CSS yang berada di folder yang sama dengan file HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="gaya.css">
</head>

<body>
  
  <h1>Ini heading</h1>
  
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>
  <p>Ini paragraf</p>

</body>
</html> 

Hasil Program 10

Penjelasan Program 10

Contoh Program 10 CSS Eksternal Di Dalam Folder Yang Sama
  • Di baris 4 kita menautkan file CSS dengan file HTML yang berada di folder yang sama.
  • Di baris 11 sampai baris 13 kita membuat 3 buah paragraf.

Rangkuman Artikel Style HTML - CSS

  • Atribut style digunakan untuk CSS inline.
  • Elemen <style> digunakan untuk CSS internal.
  • Elemen <link> digunakan untuk merujuk ke file CSS eksternal.
  • Elemen <style> dan <link> ditempatkan pada elemen <head>.
  • Properti CSS color digunakan untuk mewarnai teks.
  • Properti CSS font-family digunakan untuk mengubah jenis huruf.
  • Properti CSS font-size digunakan untuk mengatur ukuran huruf.
  • Properti CSS border digunakan untuk mengatur pembatas (border).
  • Properti CSS padding digunakan untuk mengatur spasi di dalam border.
  • Properti CSS margin digunakan untuk mengatur spasi diluar border.

Tag style HTML

Tag Deskripsi
<style> Digunakan mengatur gaya dokumen HTML
<link> Digunakan untuk menautkan dokumen HTML dengan sumber lain

Itulah tutorial mengenai Style HTML dan pengenalan CSS, semoga artikel ini dapat membantu dan bermanfaat, sampai jumpa di tutorial selanjutnya. Happy a nice day...

Posting Komentar untuk "Style HTML - CSS | Tutorial HTML 13"