Jenis Jenis CSS yang Perlu Anda Ketahui

-

 Jenis jenis CSS dibagi menjadi tiga berdasarkan penempatan kodenya, yaitu Inline, Internal dan External. Ini dia beda Inline CSS, Internal CSS dan External CSS:


1. Inline CSS

Inline CSS adalah kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML.

Perhatikan baris kode di bawah ini sebagai contohnya:

<h1  style="font-size:30px;color:blue;">Cek beritama utama ini!</h1>

Dengan kode tersebut, Anda akan mendapatkan hasil ini:

Inline CSS tidak bisa diaplikasikan ke semua halaman website sekaligus. Namun, jenis CSS ini tepat digunakan ketika Anda ingin membuat elemen HTML dengan format khusus di sebuah halaman.


2. Internal CSS

Internal CSS dituliskan di bagian header file HTML. Fungsinya untuk menentukan tampilan sebuah halaman. 

Contohnya, jika Anda ingin agar halaman memiliki latar belakang biru dan teks berukuran 20px yang berwarna putih, kodenya seperti di bawah ini:

<head>
<style>
Body  { background-color:blue;  }
P  { font-size:20px;  color:white;  }
</style>
</head>
<p>Ini adalah contoh kalimat.</p>
contoh hasil internal CSS

Internal CSS sangat membantu ketika Anda ingin membuat halaman website yang tampilannya berbeda dari halaman lain.

3. External CSS

Sesuai namanya, external CSS adalah kode CSS yang diletakkan di luar dokumen HTML sebagai file .css. Jenis CSS ini berfungsi untuk mengatur tampilan semua halaman website yang Anda tentukan. Jadi, external CSS berguna ketika Anda ingin mengatur tampilan beberapa halaman sekaligus.

Agar halaman website bisa menggunakan external CSS, Anda perlu menambahkan kode di bagian header kode HTML-nya. Contohnya seperti berikut ini:

<head>
<link rel="stylesheet"  type="text/css"  href=fileCSSAnda.css">
</head>

Dengan kode tersebut, halaman website Anda akan menggunakan fileCSSAnda.css untuk mengatur tampilannya.

Sekarang Anda sudah tahu bagaimana masing-masing jenis CSS dibuat dan dampaknya pada halaman website, kan? Tapi, bagaimana cara kerja CSS ketika website dimuat? Mari simak penjelasannya di bawah ini.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cicada 3301, Teka-teki Paling Misterius di Internet yang Sulit Terpecahkan

-
  Pada Januari 2012, dunia  internet  digegerkan dengan kemunculan teka-teki misterius. Orang-orang menyebutnya sebagai Cicada 3301. Angka ‘3301’ merupakan nama samaran pihak yang membuat teka-teki tersebut. Sementara itu, ‘cicada’ yang dalam bahasa Indonesia berarti ‘serangga tonggeret’ adalah nama yang diberikan orang-orang karena teka-teki yang ditampikan memiliki bentuk yang serupa dengan hewan tersebut. Awal Mula Cicada 3301 Cicada 3301 memulai teka-tekinya melalui situs gambar 4chan. Dalam sebuah poster berlatar hitam, mereka menjelaskan bahwa mereka sedang mencari orang yang jenius. Untuk mencarinya, mereka mengadakan tes atau teka-teki yang harus dipecahkan. Banyak orang yang beranggapan bahwa teka-teki tersebut merupakan perekrutan terselubung bagi calon anggota organisasi rahasia, seperti Secret Intelligence Service (SIS), National Security Agency (NSA), Central Intelligence Agency, dan Freemason. Namun, tak sedikit pula yang beranggapan bahwa teka-tek...
Baca selengkapnya

Apa itu Golang framework dan bagaimana dampaknya bagi developer

-
  Banyak developer yang memanfaatkan Golang untuk mempersingkat waktu dalam membuat aplikasi  web . Hal ini dimungkinkan sebab Golang menyediakan  coding  agar developer tinggal menyusunnya sesuai dengan kebutuhan aplikasi yang dibuat. Fitur andalan Golang di antaranya keamanan memori, koleksi sampah, dan  structural typing  atau pengetikan terstruktur. Dengan kemiripan tinggi dengan bahasa C dan C ++, developer akan lebih mudah dalam memahami bahasa pemrograman Go. Fungsi lain Golang adalah sebagai berikut: Front end: Golang berguna untuk membuat bagian antarmuka aplikasi  website. Libraries/Tools: Golang menyediakan alat ini dimana di dalamnya merangkum semua kode untuk kemudian dipakai membangun aplikasi. Command Line Interface (CLI): Dengan Golang, Anda bisa memanfaatkan CLI yang memfasilitasi developer mengetikkan kode perintah untuk kemudian dijalankan oleh komputer. Pengembangan dan Operasi: Golang bahkan membantu proses pengembangan dan operasi...
Baca selengkapnya

Pengenalan User Interface (UI)

-
Gambar
        Baiklah di Era Industri 4.0 ini dan adanya pandemic Covid-19 ini mengharuskan kita untuk belajar dari rumah dan melakukan aktifitas kerja yang memungkinkan dikerjakan dari jarak jauh (tapi tambal ban sama memasak ndak bisa online ya kecuali pesan lewat driver). Tentunya dalam pekerjaan yang menggunakan software atau perangkat lunak atau system informasi dan terhubung secara daring (dalam jaringan) sebagai contoh adalah website, sangat penting bagi Programmer untuk bisa membuat desain interface atau tampilan tatap muka yang menarik pengunjung agar pengunjung dapat betah serta tidak bosan saat bekerja atau sekedar mencari artikel. Sehingga sangat penting bagi programmer untuk melihat tata letak, jenis font, besar font, lebar halaman, warna dan tentunya animasi dalam desain. Salah satu bahasa pemrograman yang digunakan untuk mendesain serta mempercantik desain dalam pemrograman web adalah css dan javascript. Tampilan tatap muka sistem informasi atau aplikasi yan...
Baca selengkapnya