Home » CSS » Styling HTML dengan CSS (Cascading Style Sheet)

Monday, September 9, 2019

Styling HTML dengan CSS (Cascading Style Sheet)

Posted by on Monday, September 9, 2019

CSS memiliki kepanjangan Cascading Style Sheets.CSS menjelaskan bagaimana elemen-elemen HTML ditampilkan pada layar, kertas atau pada media yang lain. CSS meminimalisir pekerjaan yang banyak. CSS dapat mengontrol layout dari  halaman-halaman web secara sekaligus.
CSS dapat ditambahkan ke elemen-elemen HTML ke dalam 3 cara :
  • Inline –dengan menggunakan atribut style dalam elemen-elemen HTML.
  • Internal –dengan menggunakan satu elemen sesi<style>pada sesi <head>
  • External –dengan menggunakan satu file eksternal CSS
Cara umum yang sering digunakan untuk menambahkan CSS adalah membuat file secara terpisah. Namun pada pembahasan ini akan digunakan cara inline dan cara internal, sebab kedua cara ini lebih mudah untuk didemontrasikan, dan mudah untuk dicoba sendiri.
Aturan Penulisan CSS
Aturan penulisan yaitu berisi selector dan blok deklarasi, yaitu :



Selector  adalah  elemen HTML yang ingin diberikan style. Blok deklarasi terdiri dari satu atau lebih deklarasi yang dipisahkan oleh semicolon (titik koma). Setiap deklarasi terdiri dari satu name (nama) dan satu value (nilai) yang dipisahkan oleh koma. Sebuah deklarasi CSS selalu diakhiri dengan satu semicolon, dan blok deklarasi dibuka dan ditutup oleh kurung kurawal.
Inline CSS
Satu CSS  inline digunakan untuk menerapkan style unik dari sebuah elemen tunggal HTML. Satu CSS inline menggunakan atribut style untuk satu elemen HTML. Contoh berikut men-set warna teks dari elemen <h1> menjadi warna biru.
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
Satu CSS internal digunakan untuk mendefinisikan sebuah style untuk satu halaman HTML. Sebuah CSS internal didefinisikan pada sesi <head>dari halaman HTML, dengan menggunakan satu elemen <style> :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
Satu halaman style digunakan untuk mendefinisikan style untuk beberapa halaman HTML. Dengan sebuah halaman style eksternal, dapat mengubah penampilan sebuah web site secara keseluruhan, hanya dengan satu file saja. Untuk menggunakan halaman style secara eksternal, ditambahkan satu linknya pada sesi <head>dari halaman HTML.
Contoh :
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sebuah halaman style eksternal dapat ditulis dalam beberapa editor teks. File tidak harus berupa kode-kode HTML, tetapi harus disimpan dengan ekstensi .css. berikut contoh file "styles.css" :
body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

CSS Fonts
Properti CSS-color mendefinisikan warna teks yang digunakan. Properti The CSS font-family mendefinisikan font yang digunakan. Properti CSS font-size mendefinsikan ukuran teks yang digunakan.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS Border
Properti CSS border mendefinisikan satu garis pembatas sekeliling sebuah elemen HTML.
Contoh :
p {
    border: 1px solid powderblue;
}

CSS Padding
Properti CSS padding mendefinisikan satu padding (spasi) antara teks dan garis pembatas. Contoh :
p {
    border: 1px solid powderblue;
    padding: 30px;
}
CSS Margin
Properti CSS margin mendefinisikansebuahmargin (spasi) ke bagian luar dari garis pembatas. Contoh :
p {
    border: 1px solid powderblue;
    margin: 50px;
}
Atribut id
Untuk mendefinisikan sebuah style spesifik untuk satu elemeh khusus, dapat ditambahkan atribut id pada elemen,
<p id="p01">I am different</p>
Selanjutnya, definisikan sebuah style untuk elemen dengan id spesifik. Catatan, id dari satu elemen harus unik dalam sebuah halaman, sehingga selector id digunakan hanya unik untuk satu elemen saja. Contoh :
#p01 {
    color: blue;
}

Atribut class
Untuk mendefinisikan sebuah style untuk elemen-elemen tertentu, tambahkan sebuah atribut class pada elemen.
<p class="error">I am different</p>
Selanjutnya, definisikan sebuah style untuk elemen-elemen dengan class yang spesifik.
Contoh :
p.error {
    color: red;
}

Referensi Eksternal
Halaman-halaman style secara eksternal dapat direferensikan dengan sebuah URL lengkap atau dengan path yang relatif kepada halaman web tersebut. Contoh berikut menggunakan satu URL Lengkap yang berhubungan dengan satu halaman style. Contoh :
<link rel="stylesheet" href="http://www.w3schools.com/html/styles.css">
Contoh ini menghubungkan halaman style yang berada dalam folder html pada web site tersebut.
Contoh :
<link rel="stylesheet" href="/html/styles.css">
Contoh ini berhubungan dengan suatu halaman style yang berada pada folder yang sama dalam halaman web. Contoh :
<link rel="stylesheet" href="styles.css">

Warna Latar
Property background-color diperuntukkan untuk memberi warna latar dari sebuah elemen. Warna latar dari sebuah halaman dapat ditetapkan seperti ini.
Contoh
body {
    background-color: lightblue;
}

dengan CSS, penentuan satu warna biasanya menggunakan :
·         nama warna yang valid – seperti “red”.
·         nilai warna dalam bentuk Hexadecimal – misalnya "#ff0000"
·         atau, dengan mode RGB – contohnya, rgb(255,0,0)
Dalam contoh berikut, elemen-elemen <h1>, <p>, and <div>memiliki warna latar yang berbeda.
Contoh :
h1 {
    background-color: green;
}


div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

Background Image (Latar dengan Gambar)
Properti background-image menspesifikkan sebuah gambar yang digunakan sebagai latar dari sebuah elemen. Secara default, gambar diulang sehingga melingkupi semua elemen. Latar gambar untuk sebuah halaman dapat di-set seperti contoh berikut.
Contoh :
body {
    background-image: url("paper.gif");
}

Penentuan gambar yang akan dijadikan latar sebaiknya merupakan kombinasi yang sesuai dengan tulisan yang berada di atasnya. Penyesuaian warna, jenis dan ukuran teks yang akan diletakkan di atas gambar tersebut.
Background Image - Repeat Horizontally or Vertically (pengulangan tegak dan mendatar)
Secara default,  properti background-image mengulang sebuah gambar secara vertikal (tegak) dan horizontal (mendatar). Pengulangan gambar sebaiknya memperhatikan kesesuaian apakah gambar tersebut cocok diulang secara vertikal atau secara horizontal, agar gambar yang ditampilkan nanti tidak kelihatan aneh. Jika pengulangan diulang hanya secara mendatar penulisannya adalah background-repeat: repeat-x;, dan jika pengulangan secara vertikal penulisannya yaitu background-repeat: repeat-y;.
Contoh :
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Background Image - Set position and no-repeat
Untuk menampilkan background imagehanya satu kali dan juga ditetapkan dengan properti background-repeat.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>gambar hanya ditampilkan satu kali, tetapi mengganggu tulisan header!</p>
</body>
</html>

Jika contoh kode ini dijalankan pada browser, background image ditampilkan dibelakang teks, sehingga teks dari header sulit dibaca. Selanjutnya, diinginkan untuk mengubah posisi gambar, maka perubahan ini tidak akan mempengaruhi posisi teksnya. Properti spesifik dari posisi gambar yaitu background-position.
Contoh :
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
Perubahan posisi gambar telah berada ada sebelah kanan atas dari halaman.
Background Image - Fixed position
Untuk menetapkan gambar yang tidak berubah (tetap), digunakan properti background-attachment.
Contoh :
body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Background - Shorthand property
Untuk menyingkat kode, juga sangat dimungkinkan penulisan properti background menjadi satu baris saja. Yaitu hanya menulis  background.
Contoh :
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
Ketika menggunakan penulisan singkat dari properti urutan value atau nilanya adalah sebagai berikut :
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
tidak mengapa jika salah satu nilai atau value dari properti tidak ada, selama salah satunya ada dari semua properti ini. 

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )
Terimakasih Telah Berkunjung Ke Blog Kami :)