Anatomi Cascading Style Sheet Pada Sebuah Dokumen HTML

Assalamualaikum wr.wb

Kali ini kita akan membahas Anatomi Casscading Style Sheet Pada Sebuah Dokumen HTML

Tujuan pembahasan kali ini adalah:

  • Mengetahui cara penggunaan Casscading Style Sheet
  • Memahami anatomi Casscading Style Sheet
  • Mengetahui cara kerja Casscading Style Sheet 
  • Memahami cara kerja Casscading Style Sheet
Sebelum kita mempelajari Anatomi Casscading Style Sheet Pada Sebuah Dokumen HTML
alangkah baiknya kita mengetahui istilah-istilah berikut ini:

1. Selector
    Selector adalah sebuah tag yang terdapat pada html yang biasa digunakan pada css supaya element tersebut dapat dimanipulasi atau ditambahkan gaya css, selector dapat berupa tag html dari tag html itu sendiri, atau bisa dikatakan juga sebagai nilai dari atribut class atau id pada tag HTML
    Didalam sebuah selector terdapat dua bagian yang penting untuk dipahami, bagian tersebut diantaranya property dan value, kedua bagian tersebut merupakan inti dari css. Sebuah element html memiliki gaya desain yang cukup menarik, untuk dapat bisa melakukan hal tersebut diatur oleh property dan value.

2. Property
    Property adalah sebuah jenis gaya, atau sebuah nama gaya untuk menentukan style pada sebuah tah html, dengan menggunakan property lah sebuah tag html dapat diubah menjadi sifat css, misalnya seperti menambahkan warna, gambar latar(background), text-align dan masih banyak lagi kegunaannya. Sangat bnyak property yang bisa digunakan untuk dapat memanipulasi element html agar desain web lebih menarik.

3. Value
    Value jika kita terjemahkan kedalam bahasa indonesia artinya adalah nilai, sama halnya seperti di css, value mempunyai fungsi untuk menentukan nilai dari property pada saat mendekrasi css, misalnya property warna, maka value yang harus kita berikan adalah nama warna, dapat berupa nama warnanya secara langsung atau juga kita dapat menulisnya menggunakan kode hexa. contohnta sebagai berikut:



selector { property: value; } 

Dari keterangan diatas seharusnya kita mudah untuk memahami.

4. Class
    Class adalah suatu cetakan untuk menciptakan suatu instant dari object. class juga merupakan suatu grup object dengan kemiripan attributes atau property, behaviour dan relasi ke object yang lain.

Setelah kita membaca pembahasan diatas mari kita simak Anatomi Cascading Style Sheet Pada Sebuah Dokumen HTML

Sebelum memulai, alat dan bahan yang harus disiapkan:
  • PC/laptop
  • Aplikasi text editor seperti (notepad++, sublime, dll)
  • Browser 

Landasan Teori

Cascading Style Sheet (CSS)
Cascading Style Sheet atau lebih sering disebut dengan istilah Css adalah salah satu dokument website yang bertujuan untuk mengatur style (gaya) tampilan website.

Anatomi CSS
Bagian -bagian yang utama dari sebuah Css itu sendiri ada tiga bagian yaitu: Selector, property, value.
Cara Kerja CSS
Cara kerja css padat dimulai saat kita mendeklarasikan style yang diinginkan dengan menulis style (selector, id, dan class), maka secara otomatis style tersebut akan bekerja sesuai pada dokument HTML.
Untuk pendefinisian style dapat dilakukan menggunakan tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk selector {...}

Class dan ID
Class = mendefinisikan class yang bisa berlaku untuk sembarang pada tag HTML. Bentuknya: nama_class { ... }
ID =   Mendefinisikan style bagi element - element yang memiliki ID sesuai yang tercantum dalam selector. Bentuknya: #id { ... }

Inline Style Sheet
Maksudnya Css ini didefinisikan secara langsung pada tag HTML yangbersangkutan. Cara penulisannya cukup dengan menambah atribut style = "..." dalam tag HTML yang terlah dibuat tersebut.

Embedded Style Sheet
Css dapat didefinisikan terlebih dahulu dalam tag <style> .. </style> di atas tag <body>, lebih tepatnya kita meletakan pada tag <head>.
Contohnya kita bisa temukan pada contoh class dan id

External Style Sheet
Maksudnya adalah css didefinisikan secara terpisah pada file - file yang berbeda. Dan selanjutnya file atau halaman web tersebut yang ingin menetakan style pada file CSS tersebut memanggil css tersebut.

Sekarang tiba pada langkah kerja

  1. Pertama buatlah di folder drive D:, dengan nama folder nama anda. Misal: praktek_web_nama
  2. Selanjutnya buat subfolder praktikum 1 di dalam folder yang sudah anda buat sebelumnya.
  3. Selanjutnya silahkan buka aplikasi notepad++ / sublime sebagai text editor.
  4. Silahkan simpan element- element struktur dokument HTML tersebut ke dalam format .html.
  5. Tahap akhit kita menjalankan masing - masing cotoh element struktur html tersebut dengan menggunakan web browser.
Percobaan 
Buatlah halaman web sebagai berikut:


<html>
<head>
<title> Contoh Selector kelas dan ID</title>
<style type="text/css">
.kotak{
border: solid;
          padding: 5px;
}
#indonesia{
backgournd-color: #ffccdd;
}
#jawa {
background-color: #ccff66; /* latar belakang */
}
#inggris {
font-weight: bold;
font-size: 1.2em;
}
</style>
</head>
<body
<div id="indonesia" class="kotak"> Selamat Pagi</div>
<div id="jawa" class="kotak"> Sugeng Enjing!</div>
<div id="inggris" class="kotak"> Good Morning</div>
</body>
</html>

Silahkan simpan script diatas dengan nama class dan id.html.
Contoh dari script diatas sudah termasuk juga kedalam embedded style sheet
Hasilnya:
Selanjutnya silahkan buat halaman web sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="color: blue;margin-left: 30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Simpan file tersebut dengan nama inline.html
Hasilnya:
Langkah terakhir silahkan teman-teman terus ikuti

Pertama buatlah sebuah file untuk membuat style yang diinginkan, misalnya sebagai berikut:

body{
background:pink;
color:white;
margin:0px;
}
.link{
text-decoration:none;
color:white;
width:200px;
margin-left:800px;
}
#nama{
background:purple;
width:60%;
margin-top:0px;
margin-right:200px;
height:50px;
padding:10px;
text-align:right;
}
#nama2{
backround:red;
width:60%;
margin-top:0px;
margin-right:200px;
height:50px;
padding:10px;
text-align:right;
}
.center{
margin-left:auto;
margin-right:auto;
}

Silahkan simpan dengan nama style.css
Lalu kita buat file html yang menggunakan style tersebut

<!DOCTYPE html>
<html>
<head>
<title>External CSs</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="center">Judul</h1>
<p><a href="#" class="link">ini web pertama Css</a></p>
<div id="nama" class="center">Saya sedang belajar css</div>
<div id="nama2" class="center">Saya sedang belajar css</div>
</body>
</html>

Simpan dengan nama external.html
Hasilnya:
  


0 Response to "Anatomi Cascading Style Sheet Pada Sebuah Dokumen HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel