CSS Dasar

CSS Dasar


CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk menentukan tampilan dan format elemen pada halaman web yang dibuat menggunakan HTML. Dengan CSS, pengembang web dapat memisahkan konten (HTML) dari desain atau gaya visual, sehingga memudahkan pengelolaan tampilan halaman web.

Fungsi CSS

1. Membuat Tampilan Menarik:

    CSS digunakan untuk menata warna, font, margin, padding, layout, dan elemen visual lainnya.

2. Memisahkan Konten dan Desain:

    Memisahkan struktur HTML dari desain, sehingga konten lebih mudah dikelola dan diperbarui.

3. Mengurangi Pengulangan Kode:

    Satu file CSS dapat digunakan untuk banyak halaman, sehingga efisien dalam pengelolaan desain.

4. Meningkatkan Konsistensi Desain:

    Dengan menggunakan CSS, semua halaman web dapat memiliki desain yang seragam.

5. Mendukung Responsivitas:

    Membantu membuat desain yang ramah untuk berbagai perangkat (desktop, tablet, ponsel).


Macam-Macam CSS

CSS terdiri dari beberapa jenis berdasarkan cara penerapannya:

1. Inline CSS:

CSS ditulis langsung di dalam elemen HTML menggunakan atribut style.

Contoh : 

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS || Muhammad Fahmi 'Ainunnajib</title>
</head>

<body>
    <h1 style="color: red;">Inline CSS</h1>
</body>

</html>

Hasil: 



2. Internal CSS:

Ditulis dalam elemen <style> di bagian <head> dari dokumen HTML.

Contoh : 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>Internal CSS</h1>
</body>

</html>

Hasil : 



3. External CSS:

Disimpan di file terpisah dengan ekstensi .css dan dihubungkan ke file HTML menggunakan tag <link>.

Contoh : 

Code HTML : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eksternal CSS || Muhammad Fahmi 'Ainunnajib</title>
    <link rel="stylesheet" href="css/eksternal.css">
</head>

<body>
    <h1>Eksternal CSS</h1>
</body>

</html>

Code Css : 

h1 {
    color: red;
}

Hasil : 


Comment CSS

Comment CSS adalah catatan atau teks yang ditambahkan ke dalam kode CSS untuk memberikan penjelasan, tetapi tidak dieksekusi oleh browser. Comment CSS membantu pengembang memahami, mendokumentasikan, dan mengelola kode dengan lebih mudah. comment bisa diketik secara manual atau bisa saja dengan shortcut ctrl + /.

Contoh : 

/* h1 {
    color: red;
} */

Hasil : 

ID di CSS

ID dalam CSS adalah salah satu cara untuk memberikan gaya khusus pada elemen HTML tertentu. id adalah atribut unik yang digunakan untuk mengidentifikasi elemen tunggal di halaman web. Setiap id hanya boleh digunakan sekali per halaman, sehingga id ideal untuk menargetkan elemen tertentu dengan presisi. id dilambangkan dengan simbol # dalam css.

Contoh : 

Code : 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Id CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        #judul {
            font-size: 30pt;
            color: blueviolet;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h1 id="judul">Ini Adalah Contoh ID</h1>
</body>

</html>

Hasil : 



Class di CSS


Class dalam CSS adalah salah satu cara untuk memberikan gaya khusus pada elemen HTML. Tidak seperti ID, class dapat digunakan pada beberapa elemen di dalam halaman, sehingga cocok untuk memberikan gaya yang sama pada beberapa elemen sekaligus. Class dilambangkan dengan simbol "." .

Contoh : 

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        .judul {
            font-size: 30pt;
            color: blueviolet;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <h1 class="judul">Ini Adalah Contoh Class</h1>
    <h1>Ini Adalah Contoh tanpa Class</h1>
    <h1 class="judul">Ini Adalah Contoh Class</h1>
</body>

</html>


Hasil : 



Multiple Class di CSS


Multiple Class CSS adalah teknik di mana sebuah elemen HTML dapat memiliki lebih dari satu class yang diterapkan secara bersamaan. Ini memungkinkan Anda untuk menggabungkan beberapa gaya yang berbeda pada elemen yang sama, sehingga mempermudah penulisan dan pengelolaan kode CSS.

Contoh : 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        .judul {
            font-size: 30pt;
            color: blueviolet;
            background-color: aqua;
        }

        .tengah {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 class="judul tengah">Ini Adalah Contoh Class</h1>
    <h1>Ini Adalah Contoh tanpa Class</h1>
    <h1 class="judul">Ini Adalah Contoh Class</h1>
</body>

</html>

Hasil : 


Universal Selector 


Universal Selector dalam CSS adalah selector yang digunakan untuk memilih semua elemen pada halaman web. Ini diwakili dengan tanda bintang (*). Selector ini sangat berguna jika Anda ingin menerapkan gaya (style) ke semua elemen HTML tanpa memandang jenisnya.

Contoh : 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        * {
            text-align: center;
            color: aqua;
            background-color: brown;
        }
    </style>
</head>

<body>
    <h1>Ini Adalah Contoh Universal</h1>
</body>

</html>

Hasil : 



Group Selector CSS

Group Selector dalam CSS digunakan untuk menerapkan gaya yang sama pada beberapa elemen HTML yang berbeda secara bersamaan. Dengan menggunakan grup selector, Anda dapat menulis satu aturan CSS yang berlaku untuk beberapa elemen, yang akan menghemat kode dan memudahkan pemeliharaan.

Contoh : 

Code : 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Group CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        h1,
        p {
            text-align: center;
            color: aqua;
            background-color: brown;
        }
    </style>
</head>

<body>
    <h1>Ini Adalah Contoh Group</h1>
    <p>Ini Adalah Contoh Group</p>
</body>

</html>

Hasil : 



Color di CSS


Color dalam CSS adalah properti yang digunakan untuk menentukan warna teks pada elemen HTML. Properti ini memungkinkan Anda untuk mengubah warna teks agar sesuai dengan desain halaman web.
color di css ada bebarapa macam, yaitu bisa disebutkan langsung warnanya, lalu dengan hexacode, HSL, RGB, dan RGBA

Contoh : 

Code : 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color CSS || Muhammad Fahmi 'Ainunnajib</title>
    <style>
        h1 {
            color: red;
        }

        h2 {
            color: rgb(0, 0, 255);
        }

        h3 {
            color: #800080;
        }

        h4 {
            color: rgba(0, 128, 0, 1);
        }
    </style>
</head>

<body>
    <h1>Ini Adalah Contoh Color</h1>
    <h2>Ini Adalah Contoh Color</h2>
    <h3>Ini Adalah Contoh Color</h3>
    <h4>Ini Adalah Contoh Color</h4>
</body>

</html>

Hasil : 





Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM

Gambar
Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM 1. Membuat 2 mikrotik 2. Setting network di mikrotik 1 3. Setting network di mikrotik 2 4. Jalankan mikrotik 1 lalu ubah nama mikrotiknya  5. Setting interface-nya 6. Tambah IP address lalu ping default getway 7. Setting IP route lalu ping 8.8.8.8 8. Setting IP dns lalu ping website/domain 9. Tambah ip address untuk ethernet 2   10. Pindah ke mikrotik 2 lalu ubah nama mikrotik 2 11. Setting interface   12. Setting IP address lalu ping default getway  13. Setting IP route, dan IP dns lalu coba ping ke 8.8.8.8 dan masih gagal karena di mikrotik 1 belum di setting IP firewall nat 14. Setting IP firewall nat di mikrotik 1 15. Lalu kembali ke mikrotik 2 lalu ping ke 8.8.8.8 dan ke domain atau web 
Baca selengkapnya

Konfigurasi 3 Mikrotik

Gambar
Konfigurasi 3 Mikrotik 1. Siapkan Mikrotik 2. Ubah Settingan network di 3 Mikrotik 3. Setting di mikrotik 1, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke detik.com 4. Setting IP address di mikrotik1 untuk ke mikrotik lainnya dan juga setting ip firewall nat 5. Setting di mikrotik 2, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com 6. Setting di mikrotik 3, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com catatan : Mohon maaf tidak sesuai dengan topologi, karena jika saya menggunakan ip 192.168.10.1/30 dan 192.168.10.6/30 di mikrotik 2 dan 3 nya timeout, jadi saya ubah ke ip 192.168.43.1/30 dan 192.168.43.6/30
Baca selengkapnya

Form HTML

Gambar
 Form HTML Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form atau formulir pada halaman Web. Jenis-Jenis atau Type Input pada Form  <input type="text"> : yang berfungsi untuk input teks bari tunggal <input type="submit">  : yang berfungsi sebagai tombol <input type="email">  : yang berfungsi sebagai tempat input email <input type="color">  : yang berfungsi sebagai tempat input color atau warna <input type="datetime">  : yang berfungsi sebagai tempat input tanggal dan waktu/jam <input type="time">  : yang berfungsi sebagai tempat input waktu atau jam <input type="file">  : yang berfungsi sebagai tempat input / upload file <input type="email">  : yang berfungsi sebagai tempat input email <input type="hidden">  : yang berfungsi sebagai tempat input yang tidak terlihat oleh user <input type="number">  : ...
Baca selengkapnya