Belajar CSS Dasar untuk Pemula

Belajar CSS Dasar untuk Pemula – Setelah sebelumnya menulis tutorial html, kali ini saya menulis artikel tentang tutorial css lengkap untuk pemula, silakan simak artikelnya baik-baik dibawah ini.

Belum mengenal css ? tidak tahu apa itu css ? tenang saja kita akan mempelajari tentang css.

Namun jika kalian belum menguasai html, sebaiknya kalian pelajari terlebih dahulu. Untuk belajar css kalian harus memiliki pengetahuan tentang html.

Kenapa belajar css ? ibaratnya ketika ada 2 kafe dengan tampilan yang sama saat dilihat dari luar.

maka keduanya tidak memiliki kelebihan yang bisa membuat pengunjung memilih untuk berkunjung ke kafe tersebut.

Berbeda jika ada sebuah kafe dengan tampilan yang unik dan menarik, pasti orang lebih memilih untuk pergi ke kafe tersebut.

Belajar CSS Dasar untuk Pemula

Begitu pula dengan website, sebuah website tidak akan menarik jika tidak ada cssnya.
Belajar css sangat penting karena dengan menguasai css kita bisa membuat website yang keren dengan tampilan yang menarik.

Jika kalian perhatikan semua situs yang ada di internet tampilannya menarik dan enak dipandang mata.

kenapa ? karena situs tersebut menggunakan css yang digunakan untuk mengatur tampilan dari sebuah website.

Belajar html dan css merupakan bagian terpenting sebagai modal untuk membuat website yang keren, unik dan menarik.

Pengertian CSS

Apa itu css ? css singkatan dari cascading style sheets.

Pengertian css adalah sebuah bahasa yang digunakan untuk mengatur tampilan website sehingga bisa membuat suatu website terlihat lebih keren dan menarik.

Manfaat dan Fungsi CSS

Sebagai sebuah bahasa yang digunakan untuk mengatur tampilan web, css tentunya memiliki manfaat dan fungsi sebagai berikut :

  • Membuat kode HTML menjadi lebih sederhana dan mudah diatur.
  • Css menghemat waktu – manfaat css tentunya bisa menghemat waktu, dengan membuat css sekali kalian bisa menggunakannya berkali-kali.
  • Load halaman lebih cepat – dengan menggunakan css, kalian tidak perlu menuliskan atribut tag HTML setiap saat. Cukup menulis satu aturan css, kemudian menggunakannya pada masing-masing atribut tag HTML.
  • Easy Maintenance – jika menggunakan css, maka dalam merawatnya mudah apabila ingin merubah tampilan suatu web secara keseluruhan.
  • Multiple device compatibility – css bisa mengoptimalkan konten suatu website agar lebih kompatibel untuk banyak jenis perangkat.

Tujuan CSS

Tujuan utama diciptakannya css yaitu untuk membedakan konten dari halaman web dan tampilan dari halaman web.

Jadi saat belajar css, kita hanya akan menuliskan aturan-aturan yang akan digunakan untuk membuat tampilan sebuah website.

Cara Kerja CSS

Cara kerja css sangat sederhana, kita hanya perlu menuliskan stylenya saja ( selektor id dan class tersesuaikan ) maka dengan itu secara otomatis akan bekerja pada dokumen html juga.

Persiapan belajar CSS

Apa yang dibutuhkan untuk belajar css dari dasar ? sebelum belajar css, kita harus mempersiapkan beberapa hal, diantaranya :

Komputer atau Laptop

Untuk belajar css kita membutuhkan sebuah komputer atau laptop. Sebenarnya hanya bermodalkan smartphone saja kita sudah bisa memulai untuk belajar css.

Aplikasi untuk belajar css di android sangat banyak, namun belajar css dengan smartphone kurang efektif, dalam mengetik kita harus ekstra sabar .

Jika kalian tidak memiliki budget, kalian bisa membeli komputer atau laptop dengan spesifikasi yang rendah.

Software yang akan kita gunakan tidak membutuhkan komputer atau laptop dengan spesifikasi yang tinggi.

Web Browser

Selanjutnya kita membutuhkan web browser untuk belajar css. File html yang diatur dengan css yang kita buat akan kita lihat hasilnya menggunakan web browser.

Apa itu web browser ? pengertian web browser adalah aplikasi yang digunakan untuk mengakses dan menampilkan halaman web.

kalian bisa menggunakan browser google chrome atau mozilla firefox. Kalau untuk programming saya lebih suka menggunakan mozilla firefox.

Text Editor

Software apa yang digunakan untuk belajar css ? untuk mengetik kode css, kita membutuhkan sebuah software text editor.

Apa itu text editor ? pengertian text editor adalah program yang digunakan untuk mengetik sebuah kode program.

Sebenarnya menggunakan notepad saja sudah cukup. Namun saya lebih suka menggunakan sublime text sebagai text editornya.

Kode Dasar CSS

Dalam bahasa css, terdapat aturan penulisan sintaks dasar css. Lalu apa aturan penulisannya ? berikut adalah struktur dasar css.

Selector{
Properti : value;
}

Selector CSS

Apa itu selector ? pengertian selector adalah kata kunci untuk memilih elemen HTML yang akan kita atur.

Terdapat 3 jenis selector yang biasa digunakan untuk memilih elemen HTML.

Id selector

Merupakan cara untuk memilih elemen HTML dengan membuat id pada tag HTML.
Cara untuk menggunakannya dengan menambahkan tanda #

Contoh :
#selector{
Properti:value;
}

Class selector

Merupakan cara untuk memilih elemen HTML dengan membuat class pada tag HTML yang ingin kita atur. Kemudian kita atur dengan menambahkan tanda titik (.)

Contoh :
.selector{
Properti:value;
}

Selector umum

Merupakan cara untuk memilih elemen HTML dengan menuliskan nama tag HTML yang ingin kita desain.

Contoh:
P{
Properti:value;
}

Properti CSS

Apa itu properti ? pengertian properti adalah jenis tampilan apa yang ingin kita desain dari sebuah elemen HTML.

Value CSS

Apa itu value ? pengertian value adalah isi atau nilai dari properti yang ingin kita desain.

Menyisipkan CSS ke HTML

Untuk menyisipkan css kedalam file html terdapat 3 cara, yaitu :

Inline Style

Cara yang pertama untuk menyisipkan css ke html yaitu dengan teknik menyisipkan langsung kedalam tag HTML, namun teknik penulisan css dengan inline style jarang digunakan karena lumayan ribet.

Contoh:

<p style= “align:center;color:blue;”>Belajar CSS</p>

Internal Link

Cara yang kedua untuk penulisan css ke html yaitu dengan teknik internal link atau di dalam file html menggunakan tag <style> kode css disini </style>.

Biasanya teknik penulisan css dengan internal link digunakan apabila ingin membuat tampilan web khusus untuk halaman web tersebut dan tidak bisa digunakan untuk halaman yang lain.

Contoh:

<style>
h1{
font-size:30px;
}
</style>

External Link

Cara yang terakhir untuk penulisan css ke html yaitu dengan teknik external link atau menyematkan link css ke dalam file html menggunakan tag <link />

Contoh:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<h1>Maulandaru.id</h1>
</body>
</html>

kemudian buat file yang bernama style.css, dengan kode css:

h1{
color:blue;
}

catatan : letakan file html dan css dalam 1 folder, apabila di dalam folder yang berbeda maka harus ditulis lengkap dengan foldernya.

Membuat Website dengan HTML dan CSS

untuk membuat website sederhana dengan html & css silakan buka aplikasi sublime text editor, buat file baru dengan nama belajar-css-dasar-untuk-pemula.html kemudian ketik kode berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS Dasar untuk Pemula</title>
<style type=”text/css”>

body{
    background-color: #15a2be;
}

h1{
    color: #cf2398;
    size : 25px;
    text-align: center;
}

p.garis-bawah{
    text-decoration: underline;
}

p.tebal{
    font-weight: bold;
}

p.garis-miring{
    font-style: italic;
}

</style>
</head>
<body>
<div id=”tampilan”>
    <h1>Belajar CSS Dasar untuk Pemula – Maulandaru.id</h1>
    <p class=”garis-bawah”>Ini Adalah Text Yang Di Garis Bawahi</p>
    <p class=”garis-miring”>Ini Adalah Text Yang Di Garis Miring</p>
    <p class=”tebal”>Ini Adalah Text Yang Tebal</p>
</div>
</body>
</html>

jika dibuka di browser maka akan tampil sebagai berikut :

Belajar CSS Dasar untuk Pemula

Kesimpulan

Setelah belajar HTML dan  CSS lengkap, maka kalian bisa membuat website keren dengan cepat. belajar html dan css merupakan langkah awal untuk menjadi web developer setelah selesai mempelajarinya, langkah selanjutnya yaitu belajar Javascript, PHP dan MySQL.