Scribd Logo
Unggah

Selamat datang di Scribd!

  • Konsep CSS

    Diunggah oleh

    Dina Butterfly
    8 tayangan28 halaman

    Judul Asli

    2. Konsep CSS

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    8 tayangan28 halaman

    Konsep CSS

    Diunggah oleh

    Dina Butterfly

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 28

    Konsep CSS

    Oleh: Mujahid Robbani Sholahudin, S.Pd

    Kelas Coding MTs Istiqlal Jakarta


    Bagian Web - Pertemuan ke-2
    Apa itu CSS?
    • CSS adalah singkatan dari Cascading Style Sheets
    • CSS adalah bahasa yang kita gunakan untuk menata dokumen HTML.
    • CSS menjelaskan bagaimana elemen HTML ditampilkan di layar,
    kertas, atau di media lain
    • CSS menghemat banyak pekerjaan. CSS dapat mengontrol tata letak
    beberapa halaman web sekaligus
    • Stylesheet eksternal disimpan dalam file CSS
    Perhatikan Halaman Web Berikut

    Apakah
    tampilannya
    menarik??
    Bagaimana jika seperti ini?
    Kalau begini?
    Yg ini?
    Dan yang ini?
    Keindahan itu bisa diwujudkan dengan CSS
    • Aturan CSS terdiri dari selector
    dan declaration block.

    Belajar Sintaks • Selector menunjuk ke elemen


    HTML yang ingin Anda

    CSS
    modifikasi.
    • Declaration Block berisi satu
    atau lebih deklarasi yang
    dipisahkan oleh titik koma.
    • Setiap deklarasi menyertakan
    nama properti CSS dan nilai,
    dipisahkan oleh titik dua.
    • Beberapa deklarasi CSS
    dipisahkan dengan titik koma,
    dan declaration block dikelilingi
    oleh kurung kurawal.
    Contoh CSS
    p {
      color: red;
      text-align: center;
    }

    • p adalah selector dalam CSS (menunjuk ke elemen HTML yang ingin


    dimodifikasi: <p>).
    • color adalah properti, dan red adalah nilai properti
    • text-align adalah properti, dan center adalah nilai properti
    Selector CSS
    • Selektor CSS digunakan untuk "menemukan" (atau memilih) elemen
    HTML yang ingin dimodifikasi.
    • Terdapat 4 Selector Dasar:
    • Elemen
    • Id
    • Class
    • Universal
    Selector Elemen
    • Selector Elemen memilih elemen HTML berdasarkan nama elemen.

    Contoh:
    p {
      text-align: center;
      color: red;
    }
    Selector Id
    • Selector id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
    • Id dari sebuah elemen adalah unik dalam sebuah halaman, jadi selector id digunakan
    untuk memilih satu elemen unik!
    • Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id
    elemen.
    Contoh:
    #para1 {
      text-align: center;
      color: red;
    }

    Catatan: Nama id tidak boleh diawali dengan angka!


    Selector Class
    • Selector class memilih elemen HTML dengan atribut class tertentu.
    • Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class. Contoh:
    .center {
      text-align: center;
      color: red;
    }
    • Kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang harus terpengaruh oleh suatu
    class. Contoh:
    p.center {
      text-align: center;
      color: red;
    }
    • Elemen HTML juga dapat merujuk ke lebih dari satu class

    Catatan: Nama class tidak boleh dimulai dengan angka!


    Selector Universal
    • Selector universal (*) memilih semua elemen HTML pada halaman.
    Contoh:
    * {
      text-align: center;
      color: blue;
    }
    Penggabungan Selector
    • Selector Group memilih semua elemen HTML dengan definisi style
    yang sama. Lihat kode CSS berikut (elemen h1, h2, dan p memiliki
    definisi style yang sama)
    • Akan lebih baik untuk mengelompokkan selector, untuk
    meminimalkan kode. Untuk mengelompokkan selector, pisahkan
    setiap selector dengan koma. Contoh:
    h1, h2, p {
      text-align: center;
      color: red;
    }
    Daftar Selector CSS Sederhana
    Cara Menyisipkan CSS
    • Eksternal CSS
    • Internal CSS
    • Inline CSS
    Eksternal CSS
    • Dengan eksternal CSS, mengubah tampilan seluruh • Eksternal CSS dapat ditulis dalam text editor apa pun,
    situs web hanya dengan mengubah satu file dan harus disimpan dengan ekstensi .css.
    • Setiap halaman HTML harus menyertakan referensi ke • File .css eksternal tidak boleh berisi tag HTML apa pun.
    file eksternal CSS di dalam elemen <link>, di dalam • Berikut adalah tampilan file "mystyle.css":
    bagian head.
    body {
    <!DOCTYPE html>   background-color: lightblue;
    <html> }
    <head>
    <link rel="stylesheet" href="mystyle.css" h1 {
    >   color: navy;
    </head>   margin-left: 20px;
    <body> }
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body> Catatan: Jangan tambahkan spasi antara nilai properti
    </html> dan unit
    Internal CSS
    • Internal CSS dapat digunakan jika satu h1 {
    halaman HTML memiliki style yang unik.   color: maroon;
    • Internal CSS didefinisikan di dalam   margin-left: 40px;
    elemen <style>, di dalam bagian head. }
    </style>
    <!DOCTYPE html> </head>
    <html> <body>
    <head>
    <style> <h1>This is a heading</h1>
    body { <p>This is a paragraph.</p>
      background-color: linen;
    } </body>
    </html>
    Inline CSS
    • Inline CSS dapat digunakan untuk menerapkan style unik untuk satu elemen.
    • Untuk menggunakan inline CSS, tambahkan atribut style ke elemen yang relevan.
    • Atribut style dapat berisi properti CSS apa pun.
    <!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>

    Inline CSS kehilangan banyak keuntungan dari CSS (dengan mencampur konten dengan presentasi). Gunakan
    metode ini sesuai kebutuhan.
    Multiple CSS
    • Jika beberapa properti telah ditentukan untuk selector (elemen) yang sama di CSS yang
    berbeda, nilai dari CSS yang terakhir dibacalah yang akan digunakan.
    • Contoh, jika di external CSS sebagai berikut
    • Lalu di internal CSS sebagai berikut
    • <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
    h1 {
      color: orange;
    }
    </style>
    </head>
    • Jika internal CSS ditentukan setelah link ke external CSS, elemen <h1> akan menjadi "oranye":
    Komentar di CSS
    • Komentar CSS tidak ditampilkan di browser, tetapi dapat membantu
    mendokumentasikan kode kita.
    • Komentar digunakan untuk menjelaskan kode, dan dapat membantu
    saat kita mengedit kode di kemudian hari.
    • Komentar diabaikan oleh browser.
    • Komentar CSS ditempatkan di dalam elemen <style>, dan dimulai
    dengan /* dan diakhiri dengan */
    • Komentar juga dapat menjangkau beberapa baris
    Manipulasi Background
    • background-color  Mengubah warna latar belakang dari elemen
    • background-image  Mengubah latar belakang menjadi gambar
    • background-repeat  Mengatur pengulangan gambar latar
    belakang
    • background-position  Mengatur posisi gambar latar belakang
    • background  Mengatur seluruh property tentang background
    Manipulasi Text
    • color  Mengubah warna teks
    • font-size  Mengubah ukuran teks
    • text-align  Mengatur perataan teks secara horizontal
    • direction  Mengatur arah teks
    • font-family  Mengubah jenis font teks
    Manipulasi Elemen
    • border-width  Mengatur ketebalan pinggiran elemen
    • border-style  Mengubah style pinggiran elemen
    • border-radius  Mengatur kelengkungan pojok elemen
    • border  Mengatur seluruh property tentang border
    • opacity  Mengatur transparansi elemen
    • margin  Membuat ruang di sekitar elemen, di luar batas yang ditentukan
    • padding  Membuat ruang di sekitar konten elemen, di dalam batas yang ditentukan
    • width  Mengatur panjang elemen
    • height  Mengatur tinggi elemen
    • display  Mengubah jenis tampilan elemen
    Box Model
    !important
    • !important di CSS digunakan untuk menambahkan nilai penting ke properti/nilai dari biasanya.
    • Bahkan, jika kita menggunakan !important, itu akan menimpa SEMUA aturan styling
    sebelumnya untuk properti tertentu pada elemen itu!
    #myid {
      background-color: blue;
    }

    .myclass {
      background-color: gray;
    }

    p {
      background-color: red !important;
    }

    Anda mungkin juga menyukai