Pengertian CSS dan Cara Penggunaannya

Setelah sebelumnya kita telah membahas mengenai apa itu HTML, selanjut nya kita juga akan membahas mengenai apa itu CSS dan cara menggunakan CSS. CSS (Cascading Style Sheet) merupakan sebuah dokumen yang digunakan untuk mendesain sebuah halaman website sehingga tampilan website lebih menarik lagi dan ditulis dengan markup language. CSS sering digunakan dalam dokumen html untuk memanipulasi tag pada html dalam arti setiap tagname yang ada di html dapat diubah menggunakan CSS.
pengertian css (Cascading Style Sheet)
CSS (Cascading Styele Sheet)
Dalam pengguan CSS (Cascading Style Sheet) akan memudahkan saat mendesian layout website yang ingin kita buat dan bukan hanaya itu juga kita dapat melakukan perubahan warna dan font pada setiap tag html sesuai dengan yang inginkan

Penggunaan CSS

Cara menggunakan CSS itu sangat lah mudah setidak nya ada tiga cara penggunaan CSS yang kita pelajari disini yaitu menggunakan css dengan menambahkan properti 'style' pada tagname html,penggunaan CSS dangan tag <style></style> pada tag head html, dan yang terakhir menggunakan link untuk memanggil CSS. Selanjutnya kita bahas satu persatu carang penggunaan CSS tetapi sebelum itu kita harus mengetahui syntax penulisan CSS, Syntax penulisan CSS adalah dengan menggunakan tanda kurung kurawal "{}". 

Penggunaan CSS dengan Menambahkan Properti Style

Misalkan kita menulis tag <p> yang mendeskripsikan sebuah paragraf, lalu didalam tag <p> tersebut kita menuliskan subuah kalimat misalnya "Ini adalah paragraf" dan kita menginginkan kalaimat atau paragraf tersebut kita ubah warna menjadi warna merah apakah bisa? jawabanya ya lalu bagaimana cara? caranya sangat lah mudah yakni teman-teman ketikan pada text-editor script dibawah ini kemudian save dalam bentuk ekstensi dot(.)html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Membuat Table Dengan HTML</title>
    </head>
    <body>
        <!-- tag p tanpa css -->
        <p>Ini adalah paragraf</p>
        <!-- tag p dengan properi style -->
        <p style="color:red">Ini adalah paragraf</p>
    </body>
</html>
menggunakan css dengan menabahkan properti style
Gambar diatas merupakan hasil dari script yang kita tuliskan tadi, pada tag awal ketika belum ditambahkan properti "style" pada tag <p> warna adalah warna hitam karna merupakan warna default, dan ketika di tambahkan properti style dengan atribut "color:red" makan text akan berubah menjadi warna merah pada browser kita.
Sampai disini kita sudah bisa menggunakan CSS pada HTML, namun cara ini sangatlah kurang efektif digunakan karena ketika kita menulis HTML yang banya tag nya maka disetiap tag tersebut kita juga harus menambahkan properti "style" agar kita bisa melakukan pendesaian, bayangkan jika kita membuat tag html lebih dari 100 atau bahkan ribuan betapa banyak nya properti "style" yang kita buat juga, lalu bagaimana cara kita mengatasinya? ya, cara nya sangat lah mudah yakni kita gunakan cara yang kedua penggunaan CSS dangan tag <style></style> pada tag head html.

Penggunaan CSS dangan Tag <style> pada Tag Head HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Membuat Table Dengan HTML</title>
        <style type="text/css">
            h1 {
                color: red;
            }
            p {
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>Ini adalah heading 1</h1>
        <p>Ini adalah paragraf</p>
    </body>
</html>
coba teman-teman perhatikan script diatas, antara tag <head> dan </head> terdapat sebuah tag dengan nama <style> yang mendefenisikan CSS kita, maksud dari script diatas adalah memberikan elemen h1 dengan warna merah dan elemen p dengan warna hijau. Namun menggunakan cara ini juga tidak efektif dikarenakan jika kita ingin membuat website yang file HTML nya lebih dari 1 maka setiap file HTML yang kita buat harus menambahakan tag style beserta isi lagi dantara tag head, lalu bagaiman kita mengatasi nya? untuk mengatsinya kita menggunakan cara yang ketiga yakni menggunakan  link untuk memanggil file CSS kita.

Menggunakan Link untuk Memanggil CSS

Bagaimanakah penggunaan link untuk memanggil file css kita? mungkin pertanyaan itu yang muncul di benak teman-teman semua, jawabanya adalah hampir sama dengan penggunaan tag style pada head HTML, namun yang kita gunakan adalah tag link, lalu bagaimana penulisan link CSS pada html? untuk lebih jelas nya lihat script berikut ini.
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Membuat Table Dengan HTML</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Ini adalah heading 1</h1>
        <p>Ini adalah paragraf</p>
    </body>
</html>
dari script diatas kita sudah melakukan pemanggilan CSS,namun kita belum bisa melakukan style pada HTML kita,lho kenapa? bukankah kitas sudah memanggil CSS nya? HTML diatas memang belum bisa untuk di style dikarenakan kita belum membuat dokumen atau file CSS nya, solusinya adalah  teman-teman buat dulu file CSS nya dengan nama sesuai dengan properti href yakni "style.css" dan letakan file CSS tersebut di dalam folder yang sama dengan file HTML nya. Nah, jika kita sudah membuat file CSS nya maka kita tidak perlu lagi membuat tag <style> di antar head, karena sudah digantikan dengan link.
Muncul lagi sebuah pertanyaan, jika tidak menambahkan tag "<style>" pada HTML, lalu bagaimana melakukan penulisan style nya? jawabanya simpel sekali, pada file CSS yang kita buat tadi contoh kasus "style.css" teman hanya menuliskan misalhnya h1 lalu ditambah dengan tanda "{}" kurung kurawal. Untuk Memperjelas lihat Script dibawah ini.
h1 {color: red;}
p {color green}

penjelasannya CSS tolong caraikan saya element dari HTML dengan tag h1 lalu lakukan ubah warna text nya menjadi warna merah,begitu juga dengan tag p, kira-kira seperti itu penjelasan nya. Penggunan link untk memanggil CSS ini sangat efektif jika dokument html yang kita buat melebihi dari satu halaman.
Sekian pembahasan tentang Pengertian CSS dan Cara Penggunannya, untuk selanjutnya nanti kita akan membahas tentang pengunaan CSS dengan properti class dan id pada elemen html, jadi selalu update tutorial terbaru di Serba Ngoding. Happy Coding!.

2 Responses to "Pengertian CSS dan Cara Penggunaannya"

  1. Mau tanya bang gimana ya caranya buat navbar jadi responsive

    BalasHapus
    Balasan
    1. Next tutorial bang, update terus ya di serba ngoding

      Hapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel