Bagi seorang pengembang website, pasti Anda pernah mendengar Cascading Style Sheets atau biasa disebut dengan CSS. CSS ini menjadi salah satu hal yang harus dipelajari oleh para pengembang website sehingga tampilan website menjadi lebih bagus. Oleh karena itu, apabila Anda merupakan seorang pengembang pemula dan ingin menciptakan website dengan tampilan bagus, maka Anda harus melakukan pengenalan dasar CSS untuk pemula.
Untuk mampu mengetahui dasar-dasar dari CSS, Anda perlu mempelajari cukup banyak hal. Untuk mempelajari hal-hal dasar tersebut, tentu Anda harus melakukannya secara urut dan teratur sehingga materi yang diajarkan akan lebih mudah dipahami. Apabila Anda ingin mengenal CSS secara dasar, maka Anda dapat menyimak penjelasan yang lengkap dan mudah dipahami berikut ini.
Pengenalan Dasar CSS untuk Pemula
Berikut ini adalah penjelasan mengenai berbagai materi yang perlu dipelajari terlebih dahulu bagi Anda seorang pengguna pemula CSS.
Apa Itu CSS
Cascading Style Sheets atau CSS adalah berbagai kumpulan kode pemrograman yang biasa digunakan untuk membuat desain sehingga tampilan elemen yang biasanya tertulis dalam bahasa markup. Fungsi dari CSS itu sendiri yakni memisahkan konten dari suatu website dengan tampilan visualnya.
Bisanya penggunaan CSS selalu tidak dapat dilepaskan dari HTML. Kedua hal tersebut saling berkaitan secara erat karena salah satu bahasa markup yang sering digunakan adalah HTML. Lebih tepatnya, HTML merupakan bahasa markup yang menjadi pondasi suatu website, sedangkan CSS berperan untuk memperbaiki style sehingga tampilan website tersebut menjadi lebih bagus.
Setelah mengetahui apa itu CSS, kini saatnya untuk memasuki bagian pengenalan terhadap ketentuan serta cara penulisan kode CSS. Bagian ini juga merupakan salah satu materi pengenalan CSS dasar untuk pemula yang tidak boleh untuk dilewatkan.
Ketentuan serta cara penulisan kode CSS yang benar dan tepat dapat Anda simak dalam penjelasan berikut ini dengan seksama.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan CSS</title>
<style type="text/css">
body {
font-size: 14px;
color: navy;
}
p {
font-family: calibri, helvetica, sans-serif;
}
h1, h2 {
text-decoration: underline;
font-size: 23px;
color: green;
}
</style>
</head>
<body>
<h1>Belajar Aturan dan Cara Penulisan Kode CSS</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae metus
posuere laoreet.</p>
<p>Eam facilis omittantur at, usu efficiantur neglegentur
delicatissimi et, in per vero splendide persequeris.
Semper persius his te, ea mea omnium aliquip alienum,
in gloriatur vituperata has. An per dicat clita oporteat,
explicari deterruisset ex per. Liber tibique ullamcorper
ei duo, at hinc civibus oporteat his.</p>
<p>Nam verear constituto an, eu latine bonorum euripidis
vim. Quidam maiorum interesset pri id, usu vero saepe
graeci ea. Prompta nominati oportere te usu.
Ad eam nulla accusamus.</p>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>
</body>
</html>
Kode CSS tersebut akan membuat tampilan website tampak seperti gambar berikut.
Seperti yang terlihat dalam contoh yang diberikan di atas, ketentuan penulisan kode CSS untuk halaman HTML adalah sebagai berikut.
Pada awal penulisan CSS, Anda harus menempatkan selector di bagian awal
Seluruh isi kode program yang meliputi properti dan nilai harus Anda letakkan setelah selector. Selain itu, Anda juga harus meletakkannya di antara tanda kurung “{“ dan “}”
Untuk memisahkan antara satu properti dengan property yang lain, maka pemisahan dilakukan dengan menggunakan tanda titik koma “;”
Pemisahan antara properti dan nilai dilakukan dengan menggunakan tanda titik dua “:”
Khusus untuk properti yang memiliki dua kata, maka Anda harus mengganti penggunaan spasi yang memisahkan kedua kata tersebut dengan menggunakan tanda hubung (-)
Apabila terdapat properti yang berada di baris terakhir, maka tetap gunakan tanda “;” sebagai penutup.
Cara Menginput Kode CSS ke Halaman HTML
Pengenalan CSS dasar untuk pemula selanjutnya yaitu memahami cara menginput kode CSS ke halaman HTML. Berikut ini adalah beberapa metode yang bisa dilakukan untuk menginput kode CSS ke halaman HTML.
Metode Inline Style
Metode ini merupakan metode yang dilakukan dengan cara memasukkan secara langsung kode CSS ke dalam tag yang ada di HTML menggunakan atribut style. Berikut ini adalah contoh penerapan metode inline style CSS.
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Hasil dari penggunaan metode inline style dari contoh di atas akan menghasilkan tampilan website dengan teks berwarna putih dan background berwarna hitam. Berikut ini adalah gambar tampilannya.
Metode Internal Style Sheets
Metode internal style sheets juga merupakan sebuah metode penginputan kode CSS ke halaman HTML yang perlu Anda pahami. Metode ini sering juga disebut dengan embedded style sheets. Cara kerja dari metode ini yaitu dengan memisahkan kode CSS dengan tag HTML tetapi masih berada di dalam satu halaman HTML.
Apabila sebelumnya atribut style berada di dalam tag, maka dengan menggunakan metode ini atribut tersebut dikumpulkan pada sebuah tag <style>. Letak dari tag ini haruslah berada di bagian <head> dari suatu halaman HTML.
Berikut ini adalah contoh dari penggunaan metode internal style sheets yang dapat biasa digunakan dalam pemrograman.
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Metode External Style Sheets
Materi pengenalan CSS dasar untuk pemula yaitu cara memasukkan kode CSS ke halaman HTML dengan menggunakan metode external style sheets. Metode ini digunakan untuk “mengangkat” kumpulan kode CSS ke suatu file yang terpisah dari halaman HTML. Apabila terdapat halaman yang membutuhkan kode CSS tersebut, maka Anda bisa langsung “memanggil” file tersebut.
Langkah pertama yang perlu dilakukan jika ingin menggunakan metode external style sheets, yaitu memindahkan isi dari tag <style> ke sebuah halaman baru. Kemudian Anda harus menyimpan file yang berisi kode css tersebut dengan format .css. Berikut ini adalah contoh isi dari file yang berisi kode CSS yang dibuat dengan metode external style sheets.
h2 {
background-color:black;
color:white;
}
Setelah membuat file eksternal, kini saatnya mengetahui cara untuk mengimport kode CSS yang disimpan di file tersendiri tersebut. Apabila Anda hendak memasukkan file eksternal tersebut ke dalam CSS lain yang sedang dibuat, maka berikut ini adalah contoh penggunaannya.
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Demikian informasi yang dapat membantu pengembang pemula untuk memahami tentang seluk beluk CSS secara mendasar. Pengenalan CSS dasar untuk pemula di atas berisi informasi mendasar yang perlu dikuasai oleh pengembang pemula. Oleh karena itu, pastikan bahwa Anda telah memahami keseluruhan materi yang disampaikan secara jelas. Dengan begitu, Anda dapat mendesain tampilan website dengan cantik dan menarik.
Related Posts:
Download Aplikasi Bahasa Inggris Gratis yang Harus Coba Mengunduh aplikasi Bahasa Inggris di ponsel merupakan salah satu cara agar kompetensi serta penguasaan bahasa bisa lebih baik. English sendiri digunakan secara internasional dan penguasaannya sangat bermanfaat bagi kehidupan. Sebab…
Ini Tanda-tanda Hosting Penuh yang Perlu Anda Tahu! Permasalahan yang muncul di website umumnya berakar pada hosting website tersebut, seperti halnya hosting penuh yang membuat web tersebut mengalami downtime saat diakses. Oleh sebab itu, penting untuk mengetahui bagaimana…
5 Tips Galang Dana DP Rumah Impian Untuk Freelancer Memiliki rumah idaman tentu menjadi impian hampir semua orang, termasuk pekerja lepas atau freelancer. Namun, karena penghasilan yang tidak stabil, seringkali para freelancer kurang percaya diri untuk membeli rumah impiannya.…
Cara Instal Theme WordPress Hello Teman Semua! Apakah Anda sedang mencari tutorial tentang cara menginstal theme WordPress? Jangan khawatir, admin akan memberikan tutorial cara instal theme WordPress yang mudah dipahami dan diikuti. Sebelum kita…
Cara Mudah Trading Bitcoin Tanpa Modal Yang Wajib Anda Coba! Terdapat berbagai cara yang bisa Anda lakukan untuk trading Bitcoin tanpa modal. Selain berpeluang mendapatkan keuntungan yang besar, Anda tidak perlu khawatir dengan uang tabungan Anda. Sebelum melakukan trading, Anda…
Fungsi dan Manfaat CSS yang Perlu Anda Ketahui Fungsi dan manfaat CSS memang cukup beragam. Seseorang yang ingin membangun website harus mengetahui dan memahami apa itu CSS dan fungsi penggunaannya, karena CSS merupakan suatu bahasa pemrograman yang memiliki…
Cara Install Jupyter Notebook Hello Teman Semua! Kita semua pasti tahu bahwa menjadi seorang programmer bukanlah hal yang mudah. Ada banyak hal yang harus dipelajari, termasuk bahasa pemrograman, algoritma, dan banyak lagi. Salah satu…
Cara Investasi Emas Antam agar Berhasil yang Bisa… Sebagai pemula yang terjun di dunia investasi emas tentu saja harus mengetahui segala informasi bagaimana menjalankannya. Sebab tanpa adanya pengetahuan bagaimana cara berinvestasi emas antam yang benar tentu saja akan…
Cara Instal BB Z10 Hello Teman Semua! Apakah Anda baru saja membeli BlackBerry Z10 dan ingin menginstalnya? Jangan khawatir, admin akan memberikan tutorial lengkap tentang cara menginstal BB Z10. Yuk, simak artikel ini sampai…
Rekomendasi Aplikasi Untuk Belajar Gitar Bagi Pemula Gitar adalah salah satu permainan alat musik yang terbilang sulit dilakukan. Akan tetapi, banyak orang yang ingin tahu cara bermain gitar ini secara mudah dan tepat. Caranya yaitu dengan memakai…
Aplikasi Silsilah Keluarga Terbaik dengan Fitur Terlengkap Vpn.co.id - Aplikasi silsilah keluarga terbaik dengan fitur terlengkap sangat cocok untuk mencatat ataupun mengungkap silsilah keluarga kita dengan mudah. Silsilah keluarga adalah bagian penting dari sejarah dan identitas kita.…
Cara Buka Situs Tanpa VPN dengan Aman Cara Buka Situs Tanpa VPN dengan Aman - Meskipun di internet kita bisa mengakses banyak hal, mulai dari berita, informasi, tutorial, hingga entertainment. Namun tidak semua yang ada di internet…
Cara Instal Dapodik Hello Teman Semua!Bagi para admin Sekolah Dasar dan Menengah, pastinya sudah tidak asing dengan aplikasi Dapodik. Aplikasi ini sangat berguna untuk mengelola data siswa, guru dan staf di sekolah. Namun,…
3 Pilihan Aplikasi Belajar Bahasa Inggris Bahasa Inggris sekarang ini adalah bahasa yang penting sekali untuk dikuasai. Anda bisa belajar bahasa inggris ini secara langsung atau bahkan via aplikasi. Ada beberapa aplikasi belajar bahasa inggris yang…
Tips Berinvestasi Properti Di Usia Muda Anda pasti bertanya-tanya apakah mungkin bagi generasi milenial untuk berinvestasi di bidang real estate? Jawabannya sangat mungkin!Diakui, untuk masalah yang satu ini, kendala terbesar yang harus dihadapi kaum milenial adalah…
Panduan Lengkap Mengatasi Serangan XSS pada Codelgniter Salah satu risiko yang kerap menghantui setiap aplikasi adalah adanya serangan XSS pada Codelgniter. Teknologi kini semakin canggih, oleh karena itu Anda pastinya dapat melakukan antisipasi terhadap serangan tersebut. Tetapi,…
Cara Bisnis Jastip Luar Negeri Saat ini banyak orang yang mulai tertarik untuk melakukan bisnis jastip dari luar negeri karena ada banyak keuntungan yang bisa didapatkan. Jastip sendiri merupakan singkatan dari jasa titip, yang berarti…
Cara Install WordPress untuk Pemula Hello Teman Semua, apakah kamu ingin membuat website dengan mudah dan cepat? WordPress adalah solusi terbaik untukmu. WordPress adalah platform website yang paling banyak digunakan di dunia, sehingga kamu dapat…
Bagaimana Cara Penggunaan Software MYOB Setelah… Hello Teman Semua, pada kesempatan kali ini admin akan membahas tentang cara penggunaan software MYOB setelah diinstal pada komputer. MYOB merupakan salah satu software akuntansi yang dapat membantu Anda dalam…
15+ Website Mining Bitcoin Gratis Terbaru 2023 Website mining Bitcoin akan membantu para penambang Bitcoin untuk mendapatkan koin Bitcoin ini secara mudah bahkan gratis. Mengingat di era sekarang, harga Bitcoin menjulang tinggi dan tidak semua orang dapat…
Cara Instal Aplikasi Wilkerstat dengan Benar Ternyata Mudah Vpn.co.id - Cara instal aplikasi wilkerstat ini memberikan panduan dalam proses instalasi dengan benar dan dapat dipastikan aman. Teknologi informasi telah menjadi bagian integral dari kehidupan sehari-hari. Aplikasi-aplikasi software menjadi…
Rekomendasi 7 Aplikasi Untuk Mengedit Video… Pandemi Covid-19 membuat hampir seluruh aktivitas di luar rumah menjadi terhenti sementara, termasuk aktivitas masuk sekolah. Para guru harus memutar otak untuk memberikan materi pelajaran kepada muridnya ketika pembelajaran dilakukan…
Aplikasi Drum Android Terbaik Gratis Tanpa Delay Vpn.co.id - Aplikasi drum android terbaik gratis tanpa delay ini cocok banget bagi kita yang gemar bermain drum dan ingin memainkannya kapanpun. Musik telah menjadi bagian integral dari kehidupan kita.…
Aplikasi Investasi Tanpa Modal Cocok untuk Pemula Vpn.co.id - Aplikasi investasi tanpa modal cocok untuk pemula yang ingin memulai investasi tanpa melibatkan resiko tinggi dengan modal pribadi. Investasi adalah salah satu cara yang efektif untuk mengembangkan kekayaan…
Wajib Tahu, Syarat Pinjaman Kredit Plus yang Mudah Dipenuhi! Kredit Plus merupakan kredit multiguna yang memungkinkan masyarakat melakukan peminjaman uang untuk berbagai kebutuhan termasuk untuk mengembangkan usaha. Proses dari pengajuan kredit multiguna memang lebih panjang bila dibandingkan dengan KTA.…
Pengenalan Dasar Vuejs untuk Pemula Pengenalan dasar vuejs untuk pemula dibutuhkan jika Anda ingin membangun sebuah aplikasi berbasis web. Jika Anda ingin tampilan website yang interactive dan user friendly, maka Anda membutuhkan framework. Vuejs sendiri…
Cara Instal Autocad 2007 Hello Teman Semua! Kali ini admin akan membahas tentang cara instal software Autocad 2007. Autocad 2007 adalah software yang digunakan untuk membuat gambar 2D dan 3D serta digunakan oleh para…
5+ Tips Memilih Data Center yang Tepat untuk Anda Gunakan Berbisnis adalah salah satu hal yang dilakukan oleh semua orang. Anda dapat melakukan bisnis dengan berbagai macam cara sekarang ini. Tidak harus bekerja offline lagi dalam menarik perhatian orang. Anda…
Apa Itu Directive pada Vue JS? Javascript merupakan bahasa pemrograman tingkat tinggi yang populer di kalangan developer. Banyak framework yang tersedia saat mengerjakan project javascript. Salah satu paling populer, Vue JS. Namun, sudahkah Anda tahu apa…
Aplikasi Tema iPhone untuk Android Terbaik Vpn.co.id - Aplikasi tema iphone untuk android terbaik. iPhone selalu menjadi salah satu ponsel yang paling diminati di seluruh dunia. Dengan desain yang elegan, sistem operasi yang responsif, dan antarmuka…