Mengenal CSS dalam dunia website
Mengenal CSS dalam dunia website – dalam dunia website , pastinya tidak lepas dari adanya kode kode program untuk menampilkan tampilan website yang sedemikian rupa dan memiliki fungsi masing masingnya, website itu terbangun dari beberapa kode utamanya yaitu html serta sebagai kode untuk menjembatani antara web dengan database maka menggunakan php, namun kita kali ini akan menyinggung tentang kode CSS, apa pengertiannya, apa kegunannya, bagaimana strukturnya dan bagaimana menggunakannya.
Pengertian CSS
CSS dikenal dengan kepanjangan Cascading Style Sheet, yaitu salah satu elemen yang ada dalam website yang dapat memperindah tampilan dalam website dan membuat tampilan website lebih tertata. CSS dapat menghemat banyak pekerjaan karena kita dapat menggunakannya setiap saat ketika kita membutuhkannya tanpa perlu mengubahnya lagi jika tampilannya relative sama.
Mengapa Perlu menggunakan CSS ?
CSS memiliki kelebihan untuk menetukan gaya tampilan pada website anda, termasuk desain, tata letak, dan variasi tampilan di layar untuk berbagai perangkat sehingga membuat website anda berubah tampilan sesuai dengan ukuran layar atau disebut responsive.
Awal mula CSS terbentuk adalah karena di dalam HTML hanya diciptakan untuk menggambarkan isi dari halaman web berupa tag dan tidak dapat membuat tampilannya lebih menarik seperti
<title> ini adalah judul website </title><h2> Ini adalah heading 2 <h2>
Untuk mengatasi masalah itu , maka World Wide Web Consortium (W3C) menciptakan CSS, sehingga dapat menentukan desain dari website yang berisi dokumen.
Struktur CSS
Untuk mengetikkan CSS, anda perlu memahami dari struktur yang ada pada CSS tersebut yaitu :
- Selector adalah elemen yang akan didefinisikan dalam style css, Selector dapat berupa tag html, maupun berupa class css dan id css.
- Property adalah atribut yang berfungsi untuk mendefinisikan selector, ini digunakan untuk memilih ingin dirubah bagian apa style nya.
- Value adalah nilai dari sebuah property yang digunakan untuk mengatur tampilannya.
Class CSS
Class css adalah suatu elemen CSS yang didepannya terdapat symbol titik . Contoh :
.judul{color:red;}
Id CSS
Id CSS adalah suatu elemen CSS yang didepannya terdapat symbol pagar. Contoh :
#body{background-color:blue;}
Kenapa disebut Class CSS dan ID CSS ?
Hal itu karena ketika anda ingin menggunakan style tersebut dalam sebuah tag, anda perlu menyertakan atribut html yaitu class atau id.
Contoh penggunaaan class CSS :
<h1 class=”judul”></h1>
Contoh penggunaan ID CSS :
<body id=”body”></body>
Perbedaan antara ID dan Class adalah, jika ID merupakan unik css, yaitu css yang biasanya digunakan sekali dalam suatu tag html, jika class CSS, maka dia digunakan berulang kali dalam tag html.
Jenis Jenis CSS
CSS dibagi menjadi 3 jenis jika dibedakan berdasarkan cara peletakannya, yaitu :
- Inline CSS : CSS yang terdapat pada tag html, contohnya <p style=”font-size:12px; color:#cecece;”> ini akan menampilkan tulisan berukuran 12 px dan berwarna abu abu</p> . Pada jenis CSS ini akan diperlukan banyak style, jika anda ingin membuat tampilan di tag html lain, maka perlu mendefinisikan style lagi di tag lain.
- Internal CSS : CSS ini terdapat pada bagian diantara tag <head></head> pada sebuah dokumen HTML. Pada Jenis ini, CSS akan didefinisikan sekali di bagian head dapat digunakan berulang kali asalkan masih di dokumen html ini. Contohnya :
<!DOCTYPE html><html><head><title></title><style type="text/css">.paragraf-warning{color: yellow;text-align: center;background: #cecece;}</style></head><body><p class="paragraf-warning">tulisan ini akan berwarna kuning dan rata tengah serta warna latar abu abu</p><p> sedangkan tulisan ini tidak memiliki style css</p></body></html>
Kelebihan dari Internal CSS adalah dapat digunakan lagi style nya selama masih dalam dokumen html yang sama namun kelemahannya adalah jika anda memiliki file html yang berbeda, anda perlu mendefinisikan lagi CSS di dokumen lain.
- Eksternal CSS : CSS ini terdapat di file lain yang tidak ada di dokumen html , jika ingin menggunakannya, anda perlu memanggil file CSS itu dengan cara mengetikkan <link rel="stylesheet" type="text/css" href="lokasicss.css"> pada bagian head di html. Untuk penulisan file lokasicss.css itu hanya diketikkan style nya saja seperti berikut :
.paragraf-warning{color: yellow;text-align: center;background: #cecece;}
Lalu simpan dengan file lokasicss.css , dengan cara ini, maka anda dapat menggunakannya berulang kali di file dokumen html yang berbeda, cukup dengan menuliskannya pemanggilan file css di bagian head seperti diatas.
Itulah artikel singkat mengenai Mengenal CSS dalam dunia website, masih banyak artikel artikel menarik yang akan saya posting selanjutnya, so staytune di websitelo.blogspot.com. Terimakasih.
Jika Anda Membutuhkan Jasa Pembuatan Website, Hubungi Kami:
0251-8345981
Jika Anda Membutuhkan Jasa Pembuatan Website, Hubungi Kami:
0251-8345981
082114300556,
08991123771 (WA),
0817127768,
081218626641
08991123771 (WA),
0817127768,
081218626641
websmartbogor@gmail.com
Komplek Cimanggu Permai, Jl Tarumanegara Blok A2 No 30, Tanah Sareal, Bogor
Komentar
Posting Komentar