Belajar CSS-Pengenalan Dan Memahami Perintah Dasar CSS Bagi Pemula
Tutorial Hari Ini
Pengantar HTML-CSS
Memahami Perintah CSS
Latihan HTML-CSS
Pembahasan Materi Selanjutnya
Penutup
Pengantar HTML-CSS
Halo sahabat semua, apa khabar? salam sehat selalu. Sahabat! materi ini merupakan kelanjutan dari tutorial sebelumnya, yaitu dasar-dasar HTML5. Berbicara pemrograman web ada beberapa yang melapisi; Website adalah rumah yang utuh dan segala sesuatu yang berkaitan dengan websitenya sudah ada, kemudian HTML merupakan struktur dari rumah tersebut, sementara CSS digunakan untuk membuat finishingnya, sehingga tampilan websitenya menjadi user friendly, sadangkan javascript adalah sebuah bahasa yang digunakan untuk membuat halaman website tersebut lebih interaktif. Sahabat! untuk menyelesaikan materi ini kira-kira 20 menit. Mari mulai belajar ...
Apa itu CSS ?
» CSS, merupakan singkatan dari Cascading Style Sheet.
» CSS, berfungsi untuk menata elemen-elemen dari HTML sehingga tampilan dari website ter-
sebut akan lebih menarik dan user friendly, karena dapat mengatur aspek tampilan.
» CSS, juga berfungsi dari sisi pengerjaan website akan jauh lebih menghemat waktu.
» CSS, cara penulisannya dapat inline, embeded, maupun external.
Definisi Dan Fungsi CSS
Jadi Definisi Cascading Style Sheet(CSS) adalah teknologi penulisan code dari HTML yang dikembangkan untuk menata tampilan website menjadi lebih menarik dan user friendly.
Cascading Style Sheet distandarkan oleh W3C(World Wide Web Consortium) sehingga dapat dijalankan di berbagi web browser.
Fungsi Cascading Style Sheet berfungsi untuk mengupdate code jauh lebih cepat dan mudah dibandingkan tidak menggunakan CSS.
Baca Juga: W3.CSS Tutorial
Memahami Perintah CSS
Untuk memahami perintah-perintah dari CSS dimulai dari pemahaman dari aturan penulisan (Syntax), sehingga ketika akan menggunakan ke website sudah memahami.
Aturan penulisan CSS, sbb:
Sintaks : h1 {color:red; text-align:center;} Keterangan: h1» merupakan Selector (pilihan).
color:|text-align» merupakan Property (properti).
red|center» merupakan Value (nilai).
Cara penggunaan:
»akan ditampilkan sebuah teks dengan warna BIRU diposisi Kanan.
<style>
h1 {
color: blue;
text-align: right;
}
</style>
»akan ditampilkan sebuah teks dengan warna HIJAU diposisi Tengah.
<style>
h2 {
color: green;
text-align: center;
}
</style>
»akan ditampilkan sebuah teks dengan warna MERAH diposisi Kiri.
<style>
h2 {
color: red;
text-align: left;
}
</style>
»akan diberikan latar belakang (background) dengan warna Kuning.
<style>
body {
background-color: yellow;
}
</style>
»akan ditampilkan sebuah bingkai(border) dengan bentuk kotak, warna solid.
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
Latihan HTML-CSS
Pada latihan ini kita akan coba menerapkan sintak-sintak CSS sebelumnya kedalam script HTML, sbb:
Latihan-1: Akan ditampilkan sebuah judul text, heading1(h1) dengan tulisan warna Biru & tampil diposisi Kanan, kemudian heading2(h2) dengan tulisan warna Hijau & tampil diposisi Tengah, dan heading3(h3) dengan tulisan warna Merah & tampil diposisi Kiri scriptnya, sbb:
<!-- Nama file: latihan1.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Latihan Kesatu CSS</title>
<!-- mendeklarasikan css: judul(h), latarbelakang(background) -->
<style>
h1 {
color: blue;
text-align: right;
}
h2 {
color: green;
text-align: center;
}
h3 {
color: red;
text-align: left;
}
</style>
</head>
<body>
<h1>Selamat Datang</h1>
<h2>di Pemrograman WEB HTML</h2>
<h3>dengan Cascading Style Sheet</h3>
</body>
</html>
Hasil:
Latihan-2: Akan ditampilkan sebuah bingkai(border) dengan warna solid dan tulisan warna Merah dan ditampilkan pada posisi Tengah dimana memiliki latar belakang (background-color) warna BurlyWood /coklat muda dan scriptnya, sbb:<!-- Nama file: latihan2.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
body {
background-color: BurlyWood;
}
h2 {
color: red;
text-align: left;
}
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div><h2>Ini Border Kotak</h2></div>
</body>
</html>
Hasil:
Penutup
Sekian pembahasan tutorial CSS part1 tentang memahami selector, property, dan value (nilai property. Selanjutnya akan dibahas tentang lanjutan CSS. Sekian dan terima kasih sudah mengikuti terus tutorial diblog ini, semoga bermanfaat. Salam.
Posting Komentar untuk "Belajar CSS-Pengenalan Dan Memahami Perintah Dasar CSS Bagi Pemula"
Silahkan berikan masukan / komentar yang sopan untuk penyempurnaan
Posting Komentar