Scribd
Unggah
8 tayangan34 halaman

Css

Dokumen ini menjelaskan tentang CSS (Cascading Style Sheet) yang digunakan untuk mempercantik tampilan HTML. Terdapat penjelasan mengenai selector, property, value, serta cara penulisan CSS yang terdiri dari inline, internal, dan external. Selain itu, dokumen ini juga membahas konsep box-model, margin, padding, border, dan tipografi dalam CSS.

Diunggah oleh

khairilanwar
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
8 tayangan34 halaman

Css

Dokumen ini menjelaskan tentang CSS (Cascading Style Sheet) yang digunakan untuk mempercantik tampilan HTML. Terdapat penjelasan mengenai selector, property, value, serta cara penulisan CSS yang terdiri dari inline, internal, dan external. Selain itu, dokumen ini juga membahas konsep box-model, margin, padding, border, dan tipografi dalam CSS.

Diunggah oleh

khairilanwar
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 34

CSS

PENGENALAN CSS
CSS adalah kependekan dari Cascading Style
Sheet, yang berfungsi mempercantik
penampilan HTML atau menentukan
bagaimana elemen HTML ditampilkan. Seperti
menentukan posisi, merubah warna teks atau
background dan lain sebagainya.
Contoh CSS
SELECTOR
Selector adalah elemen / tag HTML yang ingin diberi
style. Sehingga, dapat menuliskan nama tag yang
ingin diberi style tanpa perlu menambah tanda <>.

Jika tag HTML yang ingin diberi style memiliki ID, kita
dapat menuliskan nama ID tersebut dengan
diawali tenda kress (#).

#header
Dan jika tag yang diberi style memiliki Class,
maka penulisan selector bisa dilakukan
dengan tanda titik (.) diikuti dengan nama
class.

Mis:
.atikel
Jika anda hanya menuliskan satu selector, seperti
contoh kode CSS di atas, maka seluruh tag h1 yang
terdapat dalam file HTML akan memiliki style yang
sama. Bagaimana jika kita hanya ingin memberi
style pada tag h1 yang hanya terdapat di dalam
Class artikel. Maka penulisan selectornya seperti
berikut :

Mis:
.artikel h1
• Kode tersebut akan memerintahkan pada browser untuk
memberi style pada tag h1 yang hanya terdapat di dalam
class artikel (atau - h1 yang merupakan child dari class
artikel).
• Anda-pun dapat memilih lebih dari satu tag untuk
penghematan kode CSS. Misalnya ketika anda memiliki
dua atau lebih tag dengan warna background yang sama,
dari pada menuliskan kode seperti ini :

h1{ background-color: #666666; }


P { background-color: #666666; }
a { background-color: #666666; }
Property dan Value
Property adalah sifat-sifat yang ingin diterapkan
pada selector, seperti warna text, warna
background, jarak antar elemen, garis pinggir
dan lain sebagainya.
Untuk memberikan nilai/value pada property kita
gunakan tanda titik dua ( : ). Setiap property
diakhiri dengan titik koma (;), jika anda tidak
mengakhirinya maka browser tidak akan
mengetahui maksud dari property tersebut.
• Property-property pada CSS sangat mudah
dimengerti karena lebih mirip bahasa kita
sehari-hari. Misalnya untuk merubah warna
text kita gunakan property color, untuk
merubah warna background kita gunakan
property background-color, untuk merubah
ukuran huruf kita gunakan property font-size.
.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}

Dengan Pengertian Bahasa kita:


Hey Browser…
Cari tag h1 yang terdapat di dalam class artikel,
dong….!
Jika kamu menemukannya, ubah warnanya menjadi
merah, yyaa….
Warna background menjadi biru
Serta ukuran hurufnya menjadi 20pixel
PENULISAN CSS
Ada tiga cara penulisan kode CSS, yaitu inline,
internal dan external. Ketiganya bisa anda lakukan
sesuai dengan kebutuhan. Berikut contoh
penggunaan dari metode-metode tersebut:

• Inline
• Penulisan kode CSS dengan metode inline ini bisa
dilakukan langsung pada tag yang ingin diberi
style dengan menggunakan atribut style.
<h1 style=‚color : red; ‚> Judul Situs </h1>

Pada metode ini, anda tidak perlu menuliskan


selector. Karena anda menuliskan CSS
langsung pada tag yang ingin diberi style.

• Cara ini sangat tidak dianjurkan, karena Anda


akan mencampurkan antara “Format” dan
“Presentasi”. Cara ini juga tidak efektif ketika
anda akan melakukan perubahan pada CSS.
INTERNAL
Methode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.

• <HTML>
• <head>
• <title>Judul HTML</title>
• <style>
• h1 {
• color : red;
• }
• </style>
• </head>
• ...
• Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda
hanya memiliki satu halaman web.
External
• Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di
dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya
namafile.CSS.
• Pemanggilan file CSS dilakukan dengan menggunakan tag link:

• <HTML>
• <head>
• <title>Judul HTML</title>
• <link rel=‚stylesheet‛ href=‚fileCSS.CSS‛ />
• </head>
• ...

• Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut,
yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat.
Box - Model
1. Margin
Property margin digunakan untuk memberikan jarak
antara elemen/tag HTML.

Seperti contoh kode:


<div class=“box”>
box pertama
</div>

<div class=“box”>
box kedua
</div>
Lalu tambahkan tag style dalam tag head, dan
ketikkan kode CSS berikut:

.box {
backgound-color : green;
color : yellow;
width : 100px;
height : 100px;
Margin-bottom : 50px;
}
Berikut adalah tampilan yang akan anda
dapatkan :
Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita
menambahkan margin bawah (margin-bottom) sebesar 50px.

Untuk melihat perbedaan ketika kita memberikan margin atau tidak,


anda dapat menghapus property margin-bottom dan perhatikan
perbedaannya.

Anda juga dapat memberikan jarak dari kanan (right), kiri (left) dan atas
(top). Misalnya :

margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
Padding
Pada latihan sebelumnya, kita telah memberikan
jarak antar elemen HTML dalam contoh
sebelumnya jarak antar <div>, namun coba
perhatikan antara text (Box ke x) dengan garis
pinggir kotak, tidak ada jarak sama sekali, merapat
ke sisi box tersebut.

Untuk itu property paddinglah yang akan


memberikan jarak antara konten elemen dengan
elemen tersebut.
Sebagai contoh tambahkan kode CSS berikut, pada
class box yang kita buat sebelumnya:

.box{
background-color:green;
color: yellow;
width:100px;
height:100px;
margin-bottom:50px;
padding-left:20px;
}
Dan sekarang, anda dapat melihat jarak antara text yang
berada di dalam box.

Perlu diperhatikan juga, bahwa ketika kita menambahkan


padding, ukuran .box juga akan berubah.

Misalnya kita menentukan ukuran lebar dari .box sebesar


100px. Ketika kita menambahkan padding-left sebesar
20px, maka total lebar dari .box tersebut menjadi
120px.

Jadi jika anda ingin ukuran .box tetap 100px, kita harus
menghitung ulang width dari box tersebut. Misalnya
kita ubah menjadi 80px. Dengan begitu, 80px + 20px
CSS - Shorthand
Setiap property dapat memiliki lebih dari satu
jenis, Misalnya margin dapat memiliki 4 jenis.
Margin-top, Margin-right, margin-bottom dan
margin-left.

margin-top:20px;
margin-right:30px;
margin-bottom:50px;
margin-left:40px;
Daripada menuliskan seluruh property tersebut, kita
bisa menggunakan CSS-Shorthand yaitu
menggabungkan seluruh value (top, right, bottom,
dan left) ke dalam satu property.

Sebagai contoh, kita akan menggunakan CSS-


shorthand untuk Property margin menjadi seperti
berikut :
margin : 20px 30px 50px 40px;

Masing-masing dari nilai tersebut adalah :


margin : top right bottom left;
bisa kita simpulkan bahwa nilai dari CSS-shorthand margin ini
memiliki urutan searah jarum jam dan dimulai dari margin-top.

Kita juga bisa bermain-main dengan property margin ini, perhatikan


dengan seksama contoh berikut:
Ketika kita memberikan satu nilai pada property margin,
ini artinya kita memberikan nilai tersebut pada seluruh sisi.

margin: 20px;

Dengan penulisan seperti ini, maka nilai dari margin-top, right,


bottom dan left adalah 20px;
Ketika kita memberikan dua nilai pada property margin,
berarti nilai selanjutnya mengikuti nilai sebelumnya.
Contohnya seperti ini:
• Margin: 20px 30px;

Pada contoh di atas berarti kita memberikan


nilai margin-top dan right bukan?, nah nilai
dari margin-bottom akan disamakan dengan
nilai margin-top dan margin-left sama dengan
margin-right.
Dan ketika kita menuliskan tiga nilai, maka nilai
yang tidak diisi akan mengikuti nilai yang diisi,
sama halnya ketika kita memberi 2 nilai.
margin: 20px 30px 40px;

Pada contoh di atas, kita memberikan nilai untuk


top, right dan bottom. Sedangkan untuk left
akan disamakan dengan right.

Penggunaan nilai seperti ini juga berlaku pada


padding, dan property-property sejenis lainnya.
BORDER

• Property border digunakan untuk memberikan


garis pinggir pada elemen, setidaknya ada tiga
property yang harus anda set, yaitu color, style
dan width.
border-color : black;
border-style : solid;
border-width : 5px;
namun anda juga dapat menggunakan CSS shorthand
sehingga menjadi seperti berikut :
border : width style color;
jadi jika kita ubah contoh kode di atas menjadi CSS-
shorthand, kodenya menjadi seperti berikut :
border : 5px solid black;

Cobalah tambahkan kode tersebut pada latihan


sebelumnya dan yang akan anda dapatkan adalah
seperti berikut :
Sama halnya dengan Padding, penambahan property
border juga akan merubah ukuran dari .box.
Jadi, seperti yang saya jelaskan sebelumnya. Ketika anda
ingin membuat ukuran lebar .box tetap 100px,
maka anda harus menghitung ulang width
dari .box tersebut.
Kali ini perhatikan bahwa kita memberikan border
pada seluruh sisi .box, artinya jika kita tentukan
ukuran border sebesar 5px, maka 10px (untuk
width, karena 5px untuk left, dan 5px untuk right)
akan ditambahkan pada ukuran .box tersebut.
Sehingga ukuran .box berubah kembali menjadi
110px.
• Untuk itu kita kurangi width dari .box
tersebut menjadi 70px sehingga : 70px
(width) + 20px (padding) + 10px (border)
= 100px.
• Dalam dunia CSS, kasus seperti ini
disebut dengan box-model. Terdapat dua
property yang mempengaruhi ukuran
dari sebuah box yaitu padding dan
border. Perhatikan skema box model
berikut untuk contoh kasus di atas :
Skema box-model
TYPOGRAPHY
Secara default (bawaan), halaman web yang kita
buat akan menggunakan font standar yaitu
Times New Roman. Namun anda dapat
merubahnya dengan property font-family.
Berikut contoh penggunaan Property Font-
family:

Font-family: calibri;
• Namun perlu diperhatikan bahwa tidak semua PC
memiliki font yang kita tentukan, misalnya ketika kita
menentukan font-family dengan calibri, maka pada PC
dengan sistem operasi Linux, tidak akan ditemukan
font-tersebut.
• Untuk itu anda dapat memberikan lebih dari satu
jenis font, font-font yang disebutkan selanjutnya akan
menjadi pengganti ketika font sebelumnya tidak
ditemukan. Contohnya :
• font-family: calibri, arial, tahoma, verdana, sans-serif;
Box- Model
<html>
<head>
<title>Bismillah</title>
<style>
.box {
background-color:green;
color: yellow;
width: 100px;
height: 100px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="box">
box ke satu
</div>
<div class="box">
box ke dua
</div>
</body>
</html>

Anda mungkin juga menyukai