Dasar CSS: Dalam sebuah file HTML terdapat beberapa pengodingan untuk menyempurnakan tampilan dari sebuah halaman web, salah satu diantaranya adalah CSS.
CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah untuk memanipulasi kode html, sehingga dengan atribut atribut CSS tampilan halaman sebuah web akan terlihat lebih indah dan rapi.
Penulisan tag dan atribut CSS dalam kerangka HTML tidak semuanya sama, tergantung dari programernya menggunakan cara yang mana, maka dalam memudahkan sobat tehnosia dalam mengedit templet dari sebuah website ada baiknya terlebih dahulu mengenali beberapa cara penempatan syntax CSS dalam sebuah HTML.
Ada 3 cara penulisan CSS dalam HTML yang lazim digunakan oleh para programer, yaitu :
A. Eksternal CSS
Seperti namanya, penempatan kode CSS pada metode ini berada pada file yang berbeda, artinya penulisan tag dan atribut CSS tidak berada dalam satu kerangka HTML itu sendiri, melainkan ditulis pada file style sheet tersendiri dengan ekstensi .css .
Sebagai contoh, kita buat sebuah file CSS dengan nama "tehno-style.css"
#judul{color: orange;font-family: sans-serif;text-align: center;}p{color: black;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;text-align: justify;}#kotak{width: 100px;color: #fff;background: blue;text-align: center;padding: 2px;
Untuk menjalankan semua perintah dalam file diatas, scrib harus dipanggil kedalam kode html, ada dua cara yang bisa dilakukan untuk menautkan file .css ini dengan file .html, yaitu :
1. Menggunakan tag "<link>" pada file html untuk memanggil file CSS.
Berikut kode yang harus sobat tempatkan pada file html
<link rel="stylesheet" type="text/css" href="tehno-style.css">2. Menggunkan kode @impor pada file html untuk memanggil file CSS.
<style type="text/css">
@import "tehno-style.css";
</style>Note : Kedua file diatas (pilih salah satu yang sobat mau) diletakkan diantara tag <head> dan </head> biasanya tepat dibawah title.
Jika dilihat dalam tampilan file html posisi penempatannya akan terlihat seperti dibawah ini :
<!DOCTYPE html>
<html><head> <title>Contoh Penulisan dalam File HTML</title> <!-- Pilih salah satu--> <link rel="stylesheet" type="text/css" href="tehno-style.css"> <!-- Atau --> <style type="text/css"> @import "tehno-style.css";</style></head>
<body>
<h1 id="judul">Belajar CSS di Blog<a href="https://www.tehnosia.com">Tehnosia</a></h1> <p>Paragraf 1 berisi Artikel</p> <p>Paragraf 2 berisi Artikel</p> <div id="kotak">Contoh Kotak</div> </body></html>
B. Internal CSS
Dikenal juga dengan sebutan Embeded CSS, internal css bisa dikatakan kebalikan dari eksternal css, karena tag dan atribut dari Internal CSS diletakkan langsung dalam file html dalam tag
<style> diantara tag <head> dan </head> Contoh seperti pada file html dibawah ini :
<!DOCTYPE html>
<html><head> <title>Contoh Penulisan dalam File HTML</title> <style type="text/css">#judul{ color: orange; font-family: sans-serif; text-align: center;}
p{ color: black; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: justify; }
#kotak{ width: 100px; color: #fff; background: blue; text-align: center; padding: 2px;</style>
</head>
<body> <h1 id="judul">Belajar CSS di Blog<a href="https://www.tehnosia.com">Tehnosia</a></h1> <p>Paragraf 1 berisi Artikel</p> <p>Paragraf 2 berisi Artikel</p> <div id="kotak">Contoh Kotak</div> </body></html>
C. Inline CSS
Sekilas sama dengan internal CSS berada dalam file yang sama dengan html, namun pada inline CSS ini penulisan tag <style> beserta dengan atributnya, langsung ditempatkan pada setiap atribut elemen HTML. Sehingga model penulisannya bisa di lihat pada contoh berikut :
<!DOCTYPE html>
<html><head> <title>Contoh Penulisan dalam File HTML</title> </head>
<body> <h1 style= "color: orange;font-family: sans-serif;text-align: center;">Belajar CSS di Blog<a href="https://www.tehnosia.com">Tehnosia</a></h1> <p style="color: black;font-family:Geneva;text-align: justify">Paragraf 1 berisi Artikel</p> <p style="color: black;font-family:Geneva;text-align: justify">Paragraf 2 berisi Artikel</p> <div style="width: 100px;color: #fff;background: blue;text-align: center;padding: 2px">Contoh Kotak</div> </body></html>
See the Pen Belajar Coding by Tehnosia (@Tehnosia_CodePen) on CodePen.
Komentar
Posting Komentar