CSS - Merancang Web Dengan CSS tambahan

Dimateri sebelumnya kita sudah mengetahui keunggulan dari CSS, yang membuat kita lebih mudah menulis 1 perintah yang mencakup semua style pada halaman yang kita desain. Dan saya sering melakukannya supaya semua code bisa tersimpan hanya dalam satu file atau halaman, tentunya tidak perlu mengecek code lagi jika terjadi kesalahan. Disisi lain halaman dengan pengguna CSS ini dapat dibaca dan dilihat secara bolak-balik beserta isinya oleh pengunjung dari manapun.

Keunggulan lainnya, selain CSS digunakan secara internal, lansung pada code htmlnya, CSS juga bisa dibuat dalam bentuk eksternal (external style sheet) berupa file tersendiri dalam satu halaman dan menyimpannya dalam bentuk ekstensi file .css

Sebaliknya apa yang ingin Anda gunakan adalah Anda ingin menggunakan sesuatu yang disebut style sheet eksternal. Cara keja external style sheet, anda bisa memasukkan aturan Anda dalam file yang berbeda dari html atau php. Jadi ketika Anda membuka file dan memeriksa kesalahan dari rancangan style web, cukup membuka ekstensi file .css. tersebut. Dari sini browser juga akan tahu ketika memeriksa web anda, oh bagian ini semuanya dalam bentuk HTML dan itu isinya. Sedangkan di .css, oh aturan tata letaknya, style webnya ada disini.

Ya meskipun setelah Anda menempatkan aturan dalam file terpisah, semua yang perlu Anda lakukan adalah menambahkan tautan ke bagian head.

Seperti

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

File cssnya ada pada laman style.css

Jadi seperti ini alurnya jika, style title H1, dan seterusnya anda buat pada suatu file style.css:

<!- -
h1{font-family: comic sans ms;
font-size: 20pt;
text-align: center;
color: red;
}
h2{font-family: calibri;
font-size: 12pt;
text-align: justify;
color: black;
}
p{font-family: arial;
font-size:12pt
text-align: justify;
color: blue;
font-weight: bold;
}
- ->

File tersebut disimpan dengan nama “ style.css “. Penyimpanan file CSS dan HTML atau PHP jadi satu folder.

Lalu kita buat file HTMLnya. Pada bagian ketikkan:

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

Jadi sekali lagi ini tempatnya akan menjadi sangat penting karena Anda menamai hal-hal dengan cara yang mereka buat. Anda dapat menautkan ke banyak css berbeda sesuai yang Anda inginkan. Keunggulan cara ini, ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi. Sehingga Kecepatan loading menjadi lebih cepat dan file CSS yang sama bisa digunakan di banyak halaman.

Jadi sekarang kita telah memiliki CSS itu, setiap file yang terhubung dengannya semua akan berbagi File CSS yang dibuat. Jadi ketika anda memanggil file tersebut, Anda mungkin memiliki situs dengan 10, 20, 1000 halaman dan berniat memutuskan untuk mengubahnya warna dari biru ke merah atau hijau atau sesuatu seperti itu, sudah sangat gampang, tidak susah mencari file mana lagi aturan css-nya tersimpan seperti pembahasan yang lalu. Luar biasa bukan. Yang perlu Anda lakukan adalah membuka style.css, ubah satu baris kode, dan Anda sekarang baru saja mengubah style dari ribuan halaman.

Nah, ketika browser masuk untuk memeriksa halaman web, hal pertama yang akan terlihat file html-nya, oke, mungkin sudah benar atau ada aturan web yang belum dikunjungi. Bagaimana web tersebut membuat style untuk title h1? Seberapa besar font-nya? Apakah default saja. Dan akan mengecek lagi oh ternyata terdapat CSS eksternal. Mungkin ada sesuatu yang special di file ini dan ternyata aturan style yang anda buat ada disini.

Jadi kesimpulannya, CSS external bisa anda gunakan ketika sudah memiliki banyak file HTML dan memerlukan style yang sama namun tidak perlu lagi menulis ulang kode CSS lagi, tapi cukup memanggil pada setiap file htmlnya.