Materi Pemrograman Web

Diunggah oleh

Irwan Wardani
7 tayangan4 halaman

Judul Asli

materi pemrograman web

Hak Cipta

© © All Rights Reserved

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
7 tayangan4 halaman

Materi Pemrograman Web

Judul Asli:

materi pemrograman web

Diunggah oleh

Irwan Wardani

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
dari 4

1.

Pengertian CSS
CSS merupakan singkatan dari “Cascading Style Sheets“. Sesuai dengan namanya CSS
memiliki sifat ”style sheet language” yang berarti bahasa pemrograman yang di
gunakan untuk web design. CSS adalah bahasa pemrograman yang di gunakan untuk
men-design sebuah halaman website. dalam mendesign halaman website, CSS
menggunakan penanda yang kita kenal dengan id dan class.

2. Fungsi dan Kegunaan CSS


CSS dapat mengubah font, ukuran font, warna dan format font. Mengatur ukuran
layout, lebar, tinggi dan warna element, mengubah tampilan form, membuat
halaman website yang responsive dan masih banyak lagi yang dapat di lakukan oleh
CSS. Untuk mendesain font dapat dilakukan dengan mendefinisikan font , untuk
mengatur warna bisa menggunakan color, margins digunakan untuk mengatur jarak
pada luar element tertentu. Mengatur warna atau gambar pada latar belakang bisa
menggunakan “background”. mengatur ukuran font gunakan “font size”. jenis font
menggunakan “font-family” dan banyak lagi lainnya.

3. Cara Penulisan CSS


Ada tiga teknik metode penulisan CSS, yaitu :
1) Inline CSS Style
Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan
syntax CSS yang tidak memerlukan selector (id dan class). Sehingga syntax
CSS di letakkan atau langsung disisipkan pada element HTML. syntax CSS di
letakkan di dalam atribut style=””. Contohnya seperti ini:
<h2 style= "color:red; font-family: sans;" >Ini judul artikel</h2>

Perhatikan pada contoh di atas. syntax css di letakkan dalam element h2


menggunakan atribut style=””. Perintah color adalah perintah css yang
berfungsi untuk mengatur warna font. Jadi pada contoh inline css style ini kita
membuat heading h2 dengan warna font yang kita atur menjadi warna merah
(red). Hasilnya :

2) Internal CSS Style


Teknik penulisan syntax CSS dengan Internal style adalah teknik cara
penulisan syntax css yang di letakkan satu file dengan file html atau file php.
syntax CSS di letakkan di dalam tag <style> dan di akhiri dengan tag </style>.
biasa nya tag <style> .. </style> di letakkan pada bagian tag <head> pada
HTML. Intarnal CSS juga dikenal dengan sebutan Embeded CSS. Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Internal Style</title>
<style type="text/css">
#tulisan{
color: 10px;
}
.box{ background:
red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1 id="tulisan">Belajar CSS Dasar</h1>
</div>
</body>
</html>

Perhatikan contoh penulisan internal css style di atas. Syntax css di letakkan
satu file dengan file html. Syntax css di letakkan di dalam tag <style>. Syntax
css padding berfungsi sebagai pengatur jarak pada sisi dalam element. pada
contoh ini kita memberikan jarak sebesar 10px atau 10 pixel. CSS memanggil
selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda
pagar ” # “. Hasilnya :

3) External CSS Style


Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan
yang memisahkan file css dan html. Penggunaan css yang baik adalah
menggunakan teknik penulisan CSS ini karena kode program kita tidak akan
berantakan karena syntax css di simpan pada file css. File css dan html di
hubungkan menggunakan :
<link rel="stylesheet" type="text/css" href="file css anda">
Sebagai contoh, saya akan membuat sebuah file bernama style-ku.css.
Berikut ini cuplikan isi file style-ku.css :
p{ font-family:
serif;
line-height: 1.75em;
}
i{
font-family: sans;
color: orange;
}

h2 {
font-family: sans;
color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya.


Ada beberapa cara memasukkan kode CSS dari berkas eksternal:

Pertama menggunakan tag <link>


<link rel="stylesheet" type="text/css" href="style-ku.css">

Atau bisa juga bisa menggunakan @import


<style type="text/css">
@import "style-ku.css";
</style>

Penulisan pada HTML versi lengkapnya seperti ini:


<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk
percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti
namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file
HTML.</p>
</body>
</html>

Hasilnya :

Di dalam penulisan CSS berlaku aturan hierarki, dimana urutan pertama yang akan
di proses itu yaitu inline kemudian internal baru yang terakhir external. Jadi apabila
dalam 1 file html atau php ada 3 cara penulisan CSS, maka yang akan diproses
terlebih dahulu (diutamakan) yaitu CSS inline.

Anda mungkin juga menyukai