Di mana saya bisa mengedit css?

Dengan CSS, Anda dapat mengontrol warna, font, ukuran teks, jarak antar elemen, bagaimana elemen diposisikan dan ditata, gambar latar atau warna latar apa yang akan digunakan, tampilan yang berbeda untuk perangkat dan ukuran layar yang berbeda, dan

Tip. Kata kaskade berarti bahwa gaya yang diterapkan pada elemen induk juga akan diterapkan pada semua elemen anak di dalam induk. Jadi, jika Anda menyetel warna badan teks ke "biru", semua judul, paragraf, dan elemen teks lainnya di dalam badan juga akan mendapatkan warna yang sama (kecuali jika Anda menentukan yang lain)

Menggunakan CSS

CSS dapat ditambahkan ke dokumen HTML dengan 3 cara

• Sebaris - dengan menggunakan atribut style di dalam elemen HTML
• Internal - dengan menggunakan properti
  
  This is a heading

  This is a paragraph.

  
  

  Try it Yourself »

  ---

  External CSS

  An external style sheet is used to define the style for many HTML pages.

  To use an external style sheet, add a link to it in the section of each HTML page:

  Example

  
  
  
   
  
  

  This is a heading

  This is a paragraph.

  
  

  Try it Yourself »

  The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

  Here is what the "styles.css" file looks like:

  "styles.css":

  body {
    background-color: powderblue;
  }
  h1 {
    color: blue;
  }
  p {
    color: red;
  }

  Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

  ---

  CSS Colors, Fonts and Sizes

  Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

  The CSS color_ menentukan warna teks yang akan digunakan

  Properti CSS font-family_ mendefinisikan font yang akan digunakan

  Properti CSS font-size_ menentukan ukuran teks yang akan digunakan

  Contoh

  Penggunaan properti CSS color, font-family dan font-size

  
  
  
  

  
  
  Ini adalah judul

  Ini adalah sebuah paragraf

  
  

  Cobalah sendiri "

  ---

  Perbatasan CSS

  Properti CSS border_ menentukan batas di sekitar elemen HTML

  Tip. Anda dapat menentukan batas untuk hampir semua elemen HTML

  Contoh

  Penggunaan properti perbatasan CSS.  

  p {
  berbatasan. 2px bubuk biru padat;
  }

  Cobalah sendiri "

  ---

  Pengisi CSS

  Properti CSS padding_ mendefinisikan padding (spasi) antara teks dan border

  Contoh

  Penggunaan properti border dan padding CSS

  p {
  berbatasan. 2px bubuk biru padat;
  lapisan. 30px;
  }

  Cobalah sendiri "

  ---

  Margin CSS

  Properti CSS margin_ mendefinisikan margin (spasi) di luar perbatasan

  Contoh

  Penggunaan CSS border dan properti margin

  p {
  berbatasan. 2px bubuk biru padat;
  batas. 50px;
  }

  Cobalah sendiri "

  ---

  Tautan ke CSS Eksternal

  Lembar gaya eksternal dapat direferensikan dengan URL lengkap atau dengan jalur relatif ke halaman web saat ini

  Selesaikan tutorial interaktif ini untuk mempelajari dasar-dasar melihat dan mengubah CSS halaman menggunakan Chrome DevTools

  Lihat CSS elemen

  1. Klik kanan teks Inspect me! di bawah ini dan pilih Periksa. Panel Elemen DevTools terbuka

     Periksa saya

  2. Amati elemen Inspect me!_ yang disorot dengan warna biru pada Pohon DOM

     

  3. Di Pohon DOM, temukan nilai atribut data-message untuk elemen Inspect me!

  4. Masukkan nilai atribut di kotak teks di bawah ini

  5. Di panel Elemen > Gaya, temukan aturan kelas aloha

     Panel Gaya mencantumkan aturan CSS yang diterapkan ke elemen apa pun yang saat ini dipilih di DOM Tree, yang seharusnya tetap menjadi elemen Inspect me!

  6. Kelas aloha_ mendeklarasikan nilai untuk padding. Masukkan nilai ini dan satuannya tanpa spasi di kotak teks di bawah

  Jika Anda ingin memasang jendela DevTools di sebelah kanan area pandang, seperti pada tangkapan layar di langkah pertama, lihat

  Tambahkan deklarasi CSS ke elemen

  Gunakan panel Styles saat Anda ingin mengubah atau menambahkan deklarasi CSS ke sebuah elemen

  1. Klik kanan teks Add a background color to me!_ di bawah ini dan pilih Periksa

     Tambahkan warna latar belakang ke saya

  2. Klik element.style_ di dekat bagian atas panel Gaya

  3. Ketik Inspect me!_0 dan tekan Enter

  4. Ketik Inspect me!_1 dan tekan Enter. Di pohon DOM, Anda dapat melihat bahwa deklarasi gaya sebaris diterapkan ke elemen

  

  Tambahkan kelas CSS ke elemen

  Gunakan panel Gaya untuk melihat tampilan elemen saat kelas CSS diterapkan atau dihapus dari elemen

  1. Klik kanan elemen Inspect me!2 di bawah dan pilih Inspeksi

     Tambahkan kelas ke saya

  2. Klik. cls. DevTools menampilkan kotak teks tempat Anda dapat menambahkan kelas ke elemen yang dipilih

  3. Ketik Inspect me!_3 di kotak teks Tambahkan kelas baru, lalu tekan Enter. Kotak centang muncul di bawah kotak teks Tambahkan kelas baru, tempat Anda dapat mengaktifkan dan menonaktifkan kelas. Jika elemen Inspect me!_2 memiliki kelas lain yang diterapkan padanya, Anda juga dapat mengaktifkannya dari sini

  

  Tambahkan pseudostate ke kelas

  Gunakan panel Gaya untuk secara permanen menerapkan pseudostat CSS ke suatu elemen. DevTools mendukung Inspect me!5, Inspect me!6, Inspect me!7, Inspect me!8, dan lainnya

  1. Arahkan kursor ke teks Inspect me!_9 di bawah ini. Warna latar berubah

     Arahkan kursor ke saya

  2. Klik kanan teks Inspect me!9 dan pilih Inspeksi

  3. Di panel Gaya, klik. hov

  4. Periksalah. arahkan kotak centang. Warna latar belakang berubah seperti sebelumnya, meskipun Anda tidak benar-benar mengarahkan kursor ke elemen tersebut

  

  Mengubah dimensi elemen

  Gunakan diagram interaktif Model Kotak di panel Gaya untuk mengubah lebar, tinggi, pengisi, margin, atau panjang batas elemen

  1. Klik kanan elemen data-message1 di bawah dan pilih Inspeksi

     Ubah margin saya

  2. Untuk melihat Model Kotak, klik tombol

     
     Tampilkan bilah sisi di bilah tindakan pada panel Gaya.
     

  3. Dalam diagram Model Kotak di panel Gaya, arahkan kursor ke padding. Padding elemen disorot di viewport.

     

  4. Klik dua kali margin kiri di Model Kotak. Elemen saat ini tidak memiliki margin, sehingga data-message2 memiliki nilai data-message3

  5. Ketik data-message_4 dan tekan Enter.

     

  Model Kotak secara default menggunakan piksel, tetapi juga menerima nilai lain, seperti data-message5, atau data-message6

  Bagaimana cara mengedit CSS?

  Setelah Anda membuat atau membuka file CSS yang ada, lakukan pengeditan di editor kode. .

  Di konsol kesalahan di sepanjang bagian bawah editor kode

  Di selokan kesalahan di sepanjang sisi kiri editor kode

  Di bilah gulir di sisi kanan editor

  Bagaimana cara mengedit CSS di Chrome?

  Tekan Ctrl + Shift + i untuk Windows/Linux (atau command + option + i untuk Mac). Klik kanan pada elemen di halaman situs web Anda dan pilih Periksa . Sekarang setelah Anda terbiasa mengakses Alat Pengembang Google Chrome, Anda akan dapat memeriksa elemen CSS untuk mengubahnya secara langsung.

  Di mana saya bisa menulis kode CSS saya?

  CSS dapat ditambahkan ke dokumen HTML dengan 3 cara. .

  Sebaris - dengan menggunakan atribut gaya di dalam elemen HTML

  Internal - by using a