CSS by mikel

Pengertian CSS

CSS, singkatan dari "Cascading Style Sheets," adalah bahasa yang digunakan untuk membuat style atau gaya dari html.

Jenis-jenis CSS

Terdapat tiga jenis utama dari CSS yang digunakan dalam pengembangan web, yaitu:

1. CSS Internal.

Ini adalah jenis CSS yang didefinisikan langsung di dalam tag HTML dengan menggunakan atribut style didalam tag head html. contohnya:

<head>
    <title>Contoh CSS Internal</title>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
        p {
            color: red;
        }
    </style>
</head>

2. CSS External:
CSS eksternal adalah jenis CSS yang didefinisikan dalam file yang terpisah yaitu file .css. Berkas CSS ini kemudian dikaitkan dengan HTML menggunakan tag <link>. contohnya:
<link rel="stylesheet" href="mystyle.css">
mystyle.css
body {
    background-color: lightblue;
  }
 
  h1 {
    color: navy;
    margin-left: 20px;
  }
3. CSS Inline:
CSS inline (atau Inline CSS) adalah metode penggunaan CSS yang memungkinkan Anda untuk mendefinisikan gaya langsung pada elemen HTML individual menggunakan atribut "style".
Contoh:
 <!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Modul 4, 5, 7, 8

Gambar
Modul 4   Mini project dengan menggunakan javascript: 1. Konversi celscius ke derajat < body >     < script src = "script.js" ></ script >     < h2 > Project 1 </ h2 >     < button onclick = "suhu()" > Convert </ button >     < p id = "total" ></ p > </ body > < script > function suhu() {     var cel = prompt ( "Masukan suhu farenheit" )     var far = ( cel - 32 )* 5 / 9     if ( isNaN ( far )){         alert ( "tidak valid" )     } else {         document . getElementById ( "total" ). innerHTML = "jadi " + cel + " derajat farenheit adalah " + far.toFixed(2) + " derajat celcius"     }   } </script> Hasil dari kode tersebut adalah 2. Membuat sebuah list, dan sebuah button. Jika button diklik, setiap item list yang genap akan berubah menjadi biru dan tebal.  ...
Baca selengkapnya

Mini Project Dengan JS by Mikel ibrahim

Gambar
                                Java Script Introduction • Javascript merupakan bahasa pemrograman yang khusus dibuat untuk mengembangkan website.  • Javascript merupakan komponen ke-3 yang harus dikuasai oleh seorang web developer setelah HTML dan CSS.  • Perbedaan fungsi dari Javascript dengan 2 komponen lain adalah sebagai berikut: 1. HTML: Berfungsi untuk mendefinisikan konten/layout darisebuah web  2. CSS: Berfungsi untuk memberikan style/mempercantik halaman website  3. Javascript: Berfungsi untuk mengatur behaviour dari sebuah halaman web. Bagaimana menggunakan Javascript?  • Sama seperti CSS, anda bisa menggunakan Javascript dengan 3 cara.  1. Di dalam elemen body, menggunakan tag script.  2. Di dalam elemen head, menggunakan tag script.  3. Menggunakan file terpisah dengan menggunakan ekstensi .js. Misal main.js. Nama file bisa bebas. Kemudian anda harus menam...
Baca selengkapnya

Membuat sistem yang meng generate list sesuai input yang di masukkan menggunakan JavaScript

Gambar
  Pada saat awal, item list dibuat kosong  Menambahkan input teks dan jumlah. Jika input teks dan jumlah dirubah, maka secara otomatis mengenerate item dengan teks dan jumlah yang sesuai dengan input tadi. Warna hover dan warna teks tetap sama dengan Mini Project 1 Berikut adalah kode html nya:     < label for = "text" > Input Teks: </ label >     < input type = "text" id = "text" placeholder = "Masukkan teks" >     < label for = "quantity" > Input Jumlah: </ label >     < input type = "number" id = "quantity" placeholder = "Masukkan jumlah" min = "1" value = "1" >     < button onclick = " generateListItem ()" > Generate Item </ button > < br >     < ul id = "myList2" ></ ul >     < input onclick = " ChangeBlue ()" type = "radio" name = "color" id = ...
Baca selengkapnya