Scribd
Unggah
35 tayangan4 halaman

Fungsi CSS: 1. Mempercepat Loading Halaman Web

CSS digunakan untuk menentukan tampilan dan format halaman website dengan mengatur jenis font, warna, dan latar belakang. CSS digunakan bersama HTML untuk membangun website yang menarik dan fungsional serta mengatasi keterbatasan HTML dalam mengatur format halaman.

Diunggah oleh

Satrio Yeheskel
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
35 tayangan4 halaman

Fungsi CSS: 1. Mempercepat Loading Halaman Web

CSS digunakan untuk menentukan tampilan dan format halaman website dengan mengatur jenis font, warna, dan latar belakang. CSS digunakan bersama HTML untuk membangun website yang menarik dan fungsional serta mengatasi keterbatasan HTML dalam mengatur format halaman.

Diunggah oleh

Satrio Yeheskel
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

DEFENISI CSS.

CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang
digunakan untuk menentukan tampilan dan format halaman website. Dengan
CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang
halaman.

CSS digunakan bersama dengan bahasa markup, seperti HTML


dan XML untuk membangun sebuah website yang menarik dan memiliki
fungsi yang berjalan baik.

CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur


format halaman website. Kenapa demikian?

Apabila hanya menggunakan HTML ketika membangun website dengan


beberapa halaman, Anda harus menulis tag untuk sebuah elemen HTML di
semua halaman tersebut.

Dengan adanya CSS, Anda cukup menulis kode satu kali untuk sebuah
elemen HTML untuk diterapkan ke semua halaman. Nantinya, ketika akan
melakukan perubahan, Anda juga cukup melakukan perubahan pada satu
kode tadi

Fungsi CSS
Secara umum, CSS berfungsi untuk mengatur tampilan halaman website
berbasis HTML atau bahasa markup lainnya. Tapi, masih ada beberapa
fungsi CSS lainnya, yaitu:

1. Mempercepat Loading Halaman Web

Jika Anda mengatur tampilan website dengan CSS, kecepatan loading


website bisa meningkat. Karena Anda bisa menuliskan satu rangkaian kode
untuk beberapa halaman website sekaligus, jumlah kode bisa diminimalkan.
Dengan begitu, beban pada saat proses loading website lebih kecil.

2. Memudahkan Pengelolaan Kode


Dengan CSS, Anda tidak perlu merubah kode di setiap halaman apabila ingin
mengganti tampilan website. Sebagai contoh, Anda ingin mengubah latar
belakang semua halaman website. Maka, cukup edit kode CSS terkait latar
belakang, perubahan itu akan diterapkan di semua halaman.

3. Menawarkan Lebih Banyak Variasi Tampilan

HTML adalah bahasa yang dapat untuk mengatur tampilan halaman website,
tetapi terbatas. Nah, CSS menawarkan lebih banyak style tampilan, sehingga
Anda bisa lebih bebas membuat antarmuka website. Contohnya, Anda bisa
menggunakan CSS untuk membuat tombol dengan warna yang Anda
inginkan, atau membuat menu dropdown CSS.

4. Membuat Website Tampil Rapi di Semua Ukuran Layar

Fungsi CSS yang tidak kalah menarik adalah membuat tampilan website
optimal di berbagai ukuran layar. Baik itu di laptop maupun di smartphone.
Mengapa demikian?

CSS memiliki berbagai property untuk mengatur tampilan konten sesuai


kebutuhan layar, misalnya dengan max-width. Ketika
menggunakan property ini mengubah ukuran elemen HTML sesuai ukuran
layar yang digunakan untuk menampilkan website.

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:

Copy paste dan simpan kedalam folder anda


<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:

Copy paste dan simpan kedalam folder anda


<html>
<head>
<style>
Body { background-color:blue; }
P { font-size:20px; color:white; }
</style>
</head>

<p>Ini adalah contoh kalimat.</p>


</html>
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:

Copy paste dan simpan kedalam folder anda

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

Dengan kode tersebut, halaman website Anda akan menggunakan


fileCSSAnda.css untuk mengatur tampilannya.

Anda mungkin juga menyukai