10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Setelah Anda mulai mencoba-coba HTML, Anda mungkin akan tertarik untuk menambahkan lebih banyak visual punch ke halaman web Anda. CSS adalah cara terbaik untuk melakukannya. CSS memungkinkan Anda menerapkan perubahan di seluruh halaman Anda tanpa bergantung pada gaya sebaris.





Berikut adalah beberapa contoh CSS sederhana untuk menunjukkan kepada Anda bagaimana membuat beberapa perubahan gaya dasar pada halaman web Anda.



1. Kode CSS Dasar untuk Pemformatan Paragraf Mudah

Menata gaya dengan CSS berarti Anda tidak perlu menentukan gaya setiap kali Anda membuat elemen. Anda bisa mengatakan 'semua paragraf harus memiliki gaya khusus ini' dan Anda siap melakukannya.





Katakanlah Anda ingin setiap paragraf (

, salah satu tag HTML yang harus diketahui semua orang) menjadi sedikit lebih besar dari biasanya. Dan dengan teks abu-abu gelap, bukan hitam.

Terkait: Lembar Cheat HTML



Kode CSS untuk ini adalah:

p { font-size: 120%; color: dimgray; }

Sederhana! Sekarang, setiap kali browser merender paragraf, teks akan mewarisi ukuran (120 persen dari normal) dan warna ('dimgray').



Jika Anda penasaran dengan warna teks biasa mana yang dapat Anda gunakan, lihat ini daftar warna CSS dari Mozilla.

2. Contoh CSS untuk Mengubah Huruf Besar Karakter

Ingin membuat sebutan untuk paragraf yang harus menggunakan huruf kecil? Contoh CSS untuk itu adalah:



p.smallcaps { font-variant: small-caps; }

Untuk membuat paragraf yang seluruhnya menggunakan huruf kecil, gunakan tag HTML yang sedikit berbeda. Berikut tampilannya:

Your paragraph here.

Menambahkan titik dan nama kelas ke elemen menentukan subtipe elemen yang didefinisikan oleh kelas. Anda dapat melakukan ini dengan teks, gambar, tautan, dan apa saja.

Jika Anda ingin mengubah satu set teks ke kasus tertentu, gunakan contoh kode CSS ini:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Yang terakhir menggunakan huruf kapital pada huruf pertama setiap kalimat.

Perubahan gaya tidak terbatas pada paragraf. Ada empat warna berbeda yang dapat ditetapkan untuk tautan: warna standarnya, warna yang dikunjungi, warna hover, dan warna aktifnya (yang ditampilkan saat Anda mengkliknya). Gunakan contoh kode CSS ini:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Dengan tautan, setiap 'a' diikuti oleh titik dua, bukan titik.

Masing-masing dari deklarasi tersebut mengubah warna tautan dalam konteks tertentu. Tidak perlu mengubah kelas tautan untuk membuatnya berubah warna.

Meskipun teks yang digarisbawahi dengan jelas menunjukkan tautan, terkadang terlihat lebih baik untuk menghapus garis bawah itu. Hal ini dicapai dengan atribut 'text-decoration'. Contoh CSS ini menunjukkan cara menghapus garis bawah pada tautan:

a { text-decoration: none; }

Apa pun dengan tag tautan ('a') akan tetap tidak digarisbawahi. Ingin menggarisbawahinya saat pengguna mengarahkan kursor ke atasnya? Cukup tambahkan:

a:hover { text-decoration: underline; }

Anda juga dapat menambahkan dekorasi teks ini ke tautan aktif untuk memastikan garis bawah tidak hilang saat tautan diklik.

Ingin menarik lebih banyak perhatian ke tautan Anda? Tombol tautan adalah cara yang bagus untuk melakukannya. Yang ini membutuhkan beberapa baris lagi:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Mari kita jelaskan kode contoh CSS ini.

Menyertakan keempat status tautan memastikan bahwa tombol tidak hilang saat pengguna mengarahkan atau mengkliknya. Anda juga dapat mengatur parameter yang berbeda untuk mengarahkan kursor dan tautan aktif, misalnya, mengubah tombol atau warna teks.

Warna latar belakang diatur dengan warna latar, dan warna teks dengan warna. Padding mendefinisikan ukuran kotak---teks diisi dengan 10px secara vertikal dan 25px secara horizontal.

Perataan teks memastikan bahwa teks ditampilkan di tengah tombol, bukan di satu sisi. Dekorasi teks, seperti pada contoh terakhir, menghilangkan garis bawah.

perangkat lunak iso-ke-usb

Kode CSS 'display: inline-block' sedikit lebih rumit. Singkatnya, ini memungkinkan Anda mengatur tinggi dan lebar objek. Ini juga memastikan bahwa itu memulai baris baru ketika dimasukkan.

6. Contoh Kode CSS untuk Membuat Kotak Teks

Sebuah paragraf biasa tidak terlalu menarik. Jika Anda ingin menyorot elemen di halaman Anda, Anda mungkin ingin menambahkan batas. Berikut cara melakukannya dengan string kode CSS sederhana:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Yang satu ini langsung. Ini menciptakan batas ungu solid, lebar lima piksel, di sekitar paragraf kelas penting apa pun. Untuk membuat paragraf mewarisi properti ini, cukup nyatakan seperti ini:

Your important paragraph here.

Ini akan berfungsi terlepas dari seberapa besar paragrafnya.

Ada banyak gaya perbatasan berbeda yang dapat Anda terapkan; alih-alih 'padat', coba 'bertitik' atau 'ganda'. Sementara itu, lebarnya bisa 'tipis', 'sedang', atau 'tebal'. Kode CSS bahkan dapat menentukan ketebalan setiap perbatasan satu per satu, seperti ini:

border-width: 5px 8px 3px 9px;

Itu menghasilkan batas atas lima piksel, batas kanan delapan, bagian bawah tiga, dan ukuran batas kiri sembilan piksel.

7. Elemen Rata Tengah Dengan Kode CSS Dasar

Untuk tugas umum, pemusatan elemen dengan kode CSS secara mengejutkan tidak intuitif. Setelah Anda melakukannya beberapa kali, itu menjadi jauh lebih mudah. Anda memiliki beberapa cara berbeda untuk memusatkan sesuatu.

Untuk elemen blok (biasanya gambar), gunakan atribut margin:

.center { display: block; margin: auto; }

Ini memastikan bahwa elemen ditampilkan sebagai blok dan margin di setiap sisi diatur secara otomatis. Jika Anda ingin memusatkan semua gambar pada halaman tertentu, Anda bahkan dapat menambahkan 'margin: auto' ke tag img:

img { margin: auto; }

Untuk mempelajari mengapa ini bekerja dengan cara ini, lihat Penjelasan model kotak CSS di W3C .

Tetapi bagaimana jika Anda ingin memusatkan teks dengan CSS? Gunakan contoh CSS ini:

.centertext { text-align: center; }

Ingin menggunakan kelas 'centertext' untuk memusatkan teks dalam sebuah paragraf? Cukup tambahkan kelas itu ke

menandai:

This text will be centered.

8. Contoh CSS untuk Menyesuaikan Padding

Padding elemen menentukan berapa banyak ruang yang harus ada di setiap sisi. Misalnya, jika Anda menambahkan 25 piksel padding ke bagian bawah gambar, teks berikut akan didorong 25 piksel ke bawah. Banyak elemen dapat memiliki padding, bukan hanya gambar.

Katakanlah Anda ingin setiap gambar memiliki 20 piksel padding di sisi kiri dan kanan, dan 40 piksel di bagian atas dan bawah. Eksekusi kode CSS paling dasar untuk ini adalah:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Namun, ada instruksi CSS yang lebih pendek, yang menyajikan semua informasi ini dalam satu baris:

img { padding: 40px 25px 40px 25px; }

Ini mengatur padding atas, kanan, bawah, dan kiri ke nomor yang tepat. Berkat hanya dua nilai yang digunakan (40 dan 25), Anda dapat membuatnya lebih pendek:

img { padding: 40px 25px }

Bila Anda hanya menggunakan dua nilai, nilai pertama ditetapkan untuk bagian atas dan bawah, sedangkan nilai kedua akan berada di kiri dan kanan.

9. Sorot Baris Tabel Dengan CSS Coding

Kode CSS membuat tabel terlihat jauh lebih bagus daripada kisi default. Menambahkan warna, menyesuaikan batas, dan membuat tabel Anda responsif terhadap layar seluler semuanya mudah. Contoh CSS sederhana ini menunjukkan cara menyorot baris tabel saat Anda mengarahkan mouse ke atasnya.

tr:hover { background-color: #ddd; }

Sekarang setiap kali Anda mengarahkan mouse ke sel tabel, baris itu akan berubah warna. Untuk melihat beberapa hal keren lainnya yang dapat Anda lakukan, lihat Halaman W3C pada tabel CSS mewah .

10. Contoh CSS untuk Menggeser Gambar Antara Transparan dan Buram

Kode CSS juga dapat membantu Anda melakukan hal-hal keren dengan gambar. Berikut adalah contoh CSS untuk menampilkan gambar dengan opacity kurang dari penuh, sehingga tampak sedikit 'putih'. Saat Anda mengarahkan mouse ke gambar, mereka dibawa ke opacity penuh:

img { opacity: 0.5; filter: alpha(opacity=50); }

Atribut 'filter' melakukan hal yang sama seperti 'opacity', tetapi Internet Explorer 8 dan sebelumnya tidak mengenali pengukuran opacity. Untuk browser lama, sebaiknya disertakan.

Sekarang gambarnya sedikit transparan, Anda dapat membuatnya sepenuhnya buram dengan mouse:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 Contoh CSS Dengan Kode Sumber

Dengan contoh kode CSS ini, Anda harus memiliki gagasan yang lebih baik tentang cara kerja CSS. template CSS dapat membantu, tetapi memahami elemen mentah sangat penting.

10 contoh kode CSS mudah itu diringkas:

  1. Pemformatan paragraf yang mudah
  2. Ubah huruf besar kecil
  3. Ubah warna tautan
  4. Hapus garis bawah tautan
  5. Buat tombol tautan
  6. Buat kotak teks
  7. Elemen rata tengah
  8. Sesuaikan bantalan
  9. Sorot baris tabel
  10. Jadikan gambar buram

Meninjaunya lagi, Anda akan melihat beberapa pola yang dapat Anda terapkan pada kode mendatang. Dan saat itulah Anda tahu bahwa Anda benar-benar mulai menjadi master CSS. Tapi mengingatnya bisa jadi sulit. Anda mungkin ingin menandai halaman ini untuk referensi di masa mendatang.

Membagikan Membagikan Menciak Surel Lembar Cheat Properti CSS3 Esensial

Kuasai sintaks CSS penting dengan lembar contekan properti CSS3 kami.

Baca Selanjutnya Topik-topik yang berkaitan
  • Pemrograman
  • Desain web
  • CSS
  • Skrip
Tentang Penulis Christian Cawley(1510 Artikel Diterbitkan)

Wakil Editor untuk Keamanan, Linux, DIY, Pemrograman, dan Penjelasan Teknologi, dan produser Podcast yang Sangat Berguna, dengan pengalaman luas dalam dukungan desktop dan perangkat lunak. Seorang kontributor untuk majalah Format Linux, Christian adalah penggemar Raspberry Pi, pecinta Lego dan penggemar game retro.

More From Christian Cawley

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan