Pengenalan Dasar CSS dan Contohnya

Pengenalan Dasar CSS dan Contohnya - Setelah anda mempelajari HTML pada artikel sebelumnya tentang Belajar Dasar HTML dan Contohnya, sekarang sudah saatnya untuk mempelajari Cascading Style Sheets (CSS) yang bertujuan untuk memperdalam skill pemrograman web anda. Namun jika anda belum memahami HTML, saya sarankan untuk mempelajarinya terlebih dahulu, karena untuk mendalami CSS, memerlukan sedikit pengetahuan tentang HTML.

CSS adalah bahasa kedua setelah HTML yang harus dipelajari oleh seorang web developer. Salah satu pengetahuan seorang web developer dalam menguasai CSS sangatlah penting. Dengan menguasai CSS kita bisa membuat halaman landing page yang menarik, Template atau tema blog, Mengubah PSD (Desain web) menjadi HTML dan masih banyak lagi.

Contoh sederhana nya dalam dunia nyata seperti sepeda motor tanpa bodi menjadi seperti kerangka besi atau seperti sepeda yang bermesin. maka dengan adanya bodi yang menghiasai sepeda motor tersebut tampilan nya menjadi lebih menarik dan bagus. Begitu juga dengan web seperti facebook kalau tidak di hiasai dengan kode CSS maka hanyalah sebuah kerangka web yang biasa saja dan kurang menarik. maka dengan adanya CSS tersebut bisa memperindah tampilan dari web facebook menjadi lebih menarik sampai sekarang ini.

Fungsi Kode CSS

Sebagai contoh, untuk membuat teks pada seluruh elemen paragraf dalam satu halaman HTML menjadi berwarna hijau, kode menulis CSS nya sebagai berikut:

p {
  color: green;
}

Salin ketiga baris dari kode CSS tersebut ke dalam suatu file baru di teks editor anda, lalu simpan file tersebut sebagai style.css di direktori styles anda.

Tetapi kita masih perlu untuk mengaplikasikan CSS tersebut ke dokumen HTML kita. Jika tidak, CSS tersebut tidak akan berfungsi pada bagaimana browser yang akan menampilkan dokumen HTML tersebut. Jadi solusinya yang perlu kamu lakukan adalah sebagai berikut:

1. Buka file index.html anda di text editor (notepad) dan letakkan baris berikut di suatu tempat di bagian head (di antara tag <head> dan </head>):

2. Simpan index.html dan buka halaman tersebut di browser kamu. maka teks paragraf kamu sekarang bewarna hijau.

Bagian dari Sebuah CSS Ruleset

Struktur di atas merupakan sebuah rule set (sering disebut rule supaya lebih singkat). Perhatikan nama dari masing-masing bagian di atas:

Selector

Selector adalah nama elemen HTML di awal rule set. Selector menandai satu atau lebih elemen yang akan diberikan gaya (contoh di sini menggunakan elemen p). Untuk memberikan gaya pada elemen lain, anda bisa mengubah selector sesuai elemen yang anda inginkan.

Declaration

Declaration adalah suatu peraturan seperti color: red; yang menentukan properti mana dari elemen yang ingin kamu beri gaya.

Properties

Properties merupakan cara anda memberikan gaya terhadap elemen HTML (contoh di sini, color adalah properti dari {elemen {htmlelement("p")}}.) Di dalam CSS, anda memilih properti mana saja yang ingin anda berikan gaya di peraturan anda.

Property value

Property value terletak di sebelah sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada banyak sekali nilai-nilai color selain green).

Coba anda perhatikan bagian-bagian lain dari sintaks di atas:

1. Masing-masing rule set selain selector harus dibungkus dengan sepasang kurung kurawal ({}).

2. Dalam masing-masing deklarasi, anda harus menggunakan tanda titik dua (:) untuk memisahkan properti dari nilai-nilainya.

3. Dalam masing-masing rule set, kamu harus menggunakan tanda titik-koma (;) untuk memisahkan satu deklarasi dengan deklarasi berikutnya.

Jadi ntuk memodifikasi banyak nilai properti sekaligus, anda hanya perlu menggunakan tanda titik-koma sebagai pemisah, seperti ini:

p {
color: red;
width: 500px;
border: 1px solid black;
}

Anda juga dapat memilih lebih dari satu tipe elemen dan mengaplikasikan sebuah rule set untuk semua tipe elemen. Untuk melakukannya, anda dapat menuliskan lebih dari satu selector dipisahkan dengan tanda koma. Sebagai contoh di bawah ini:

p,li,h1 {
  color: red;
}

Ada banyak sekali tipe selector yang berbeda. Di atas, kita hanya mempelajari element selectors, yang memilih seluruh elemen dari tipe yang diberikan di dokumen HTML yang diberikan.

Semuah Tentang Boks

Salah satu hal yang harus anda sadari tentang menulis CSS adalah banyak hal dalam CSS sebenarnya terkait dengan boks seperti mengatur ukuran, warna, posisi, dan lain-lain. Kebanyakan dari elemen-elemen HTML yang ada di halaman kamu dapat dilihat sebagai banyak boks yang saling bertumpuk di atas satu sama lain.

Susunan CSS didasari oleh box model. masing-masing blok akan menempati tempat di halaman anda dengan properti sebagai berikut:

1. padding yaitu ruang di sekitar konten (e.g., di sekitar teks paragraf)

2. border yaitu garis solid yang ada di luar padding

3. margin yaitu ruang di luar elemen

Contoh dari keterangan di atas agar lebih jelas seperti ini:

Pada bagian ini kita juga menggunakan:

1. width (lebar dari sebuah elemen)

2. background-color, warna di belakang konten dan padding sebuah elemen

3. color, warna dari konten elemen (biasanya berupa teks)

4. text-shadow: mengatur drop shadow pada teks di dalam elemen

5. display: mengatur tampilan sebuah elemen (untuk sekarang, abaikan hal ini)

Mari kita mulai menambahkan lebih banyak CSS pada halaman kita! Lalu tambahkan aturan-aturan baru sampai ke bagian bawah halaman, dan jangan takut untuk bereksperimen dengan menggonta-ganti nilai-nilai untuk melihat bagaimana hasil yang terbaik.

Mengganti Warna Halaman

html {
  background-color: ##25837F;
}

Aturan ini mengatur warna latar belakang seluruh halaman. Coba gantilah kode warna di atas menjadi warna apapun yang anda pilih ketika merancang situs sendiri.

Mengatur Body

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Selanjutnya kita akan mengatur elemen pada <body>. Ada beberapa deklarasi di sini, jadi mari kita bahas semuanya satu per satu:

1. width: 600px; pengaturan ini memaksa body untuk selalu memiliki lebar sepanjang 600 piksel

2. margin: 0 auto; ketika kamu mengatur dua nilai pada dua properti seperti margin atau padding, nilai pertama akan memengaruhi sisi atas dan bawah dari elemen (pada contoh ini, buatlah 0), dan nilai kedua akan memengaruhi sisi kiri dan kanan (di sini, auto adalah sebuah nilai khusus yang dapat membagi ruang horizontal yang ada secara adil antara kiri dan kanan). Anda juga dapat menggunakan satu, tiga, atau empat nilai seperti yang didokumentasikan di sini.

3. background-color: #FF9500; sama seperti sebelumya, pengaturan ini menentukan warna latar belakang elemen.

4. padding: 0 20px 20px 20px; kita memiliki empat nilai yang mengatur padding untuk membuat sedikit ruang di sekitar konten kita. Saat ini, kita menentukan tidak ada padding pada sisi atas dari body, dan ada padding sepanjang 20 piksel di sisi kiri, bawah, dan kanan. Nilai-nilai di atas mengatur bagian atas, kanan, bawah, dan kiri secara berurutan.

5. border: 5px solid black; pengaturan ini mengatur border setebal 5 piksel berwarna hitam di seluruh sisi body.

Mengatur posisi dan memberikan gaya pada judul halaman utama

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Sobat mungkin sudah menyadari bahwa ada jarak yang cukup jelek di bagian atas body. Hal tersebut terjadi karena beberapa browser mengaplikasikan gaya yang bersifat default ke elemen <h1> element (salah satunya), meski anda belum memberikan CSS apapun sama sekali! Kedengarannya buruk, namun kita juga menginginkan halaman web yang belum diberikan gaya juga memiliki keterbacaan yang mendasar. Untuk menghilangkan jarak tersebut, kita dapat merubah gaya default tersebut dengan mengatur margin: 0;.

Selanjutnya, kita mengatur bagian atas dan bawah padding menjadi 20 piksel, dan membuat warna dari teks heading agar sama dengan warna latar belakang HTML.

Sebuah properti menarik yang kita gunakan adalah text-shadow, di mana properti ini akan mengaplikasikan bayangan teks ke konten teks dari sebuah elemen. Ada empat nilai dari properti tersebut adalah sebagai berikut:

1. Nilai piksel pertama mengatur horizontal offset bayangan dari teks dengan seberapa jauh bayangan tersebut berada (secara horizontal), sebuah nilai negatif seharusnya akan memindahkan bayangan tersebut ke sisi kiri.

2. Nilai piksel kedua mengatur vertical offset bayangan dari teks dengan seberapa jauh bayangan tersebut berada (secara vertikal), pada contoh ini, sebuah nilai negatif akan memindahkannya ke atas.

3. Nilai piksel ketiga mengatur blur radius dari bayangan nilai yang lebih besar akan membuat bayangan yang lebih kabur.

4. Nilai keempat mengatur warna dasar dari bayangan.

Kesimpulannya cobalah bereksperimen dengan berbagai nilai yang berbeda dan lihat yang dihasilkan. ini akan melatih kemampuan anda untuk lebih kreatif lagi.

Memposisikan Gambar Ketengah

img {
  display: block;
  margin: 0 auto;
}

Kita juga dapat memposisikan gambar ke tengah yang bertujuan untuk merubaha tampilan menjadi lebih baik.

Disini kita dapat menggunakan trik margin: 0 auto lagi seperti yang telah kita lakukan pada bagian body, namun ada satu hal lagi yang perlu dilakukan. Elemen <body> adalah block level, di mana elemen tersebut menempati ruang di halaman dan kita juga dapat mengaplikasikan margin dan nilai-nilai spacing lain pada elemen tersebut. Di sisi lain, gambar adalah contoh dari inline element, yang berarti kita tidak dapat melakukan hal yang sama. Sehingga untuk mengaplikasikan margin pada gambar, kita harus memberikan gambar tersebut seperti block level menggunakan display: block;.

Jika kamu sudah mengikuti seluruh instruksi di artikel ini, pastinya kamu juga harus sudah dapat mengerti dari dasar pengenalan CSS dan Contohnya. masih banyak lagi pengenalan tentang CSS yang dapat kita pelajari. jadi teruslah bereksperimen sesuai apa yang anda rancang untuk memunculkan ide-ide yang lebih cemerlang lagi dalam mengoperasikan CSS pada sebuah halaman web. Terimakasih