Belajar CSS Untuk Pemula

CSS singkatan dari Cascading Style Sheed merupakan cara yang digunakan untuk menghias dan mempercantik tampilan website supaya tampil lebih menarik. Karena CSS untuk tampilan atau desain sebuah website maka berjalan di HTML. Apa itu HTML bisa di pelajari di sini “HTML5 Untuk Pemula Belajar Dari Awal“.

Apa saja yang perlu disiapkan?
1. Komputer / Laptop dengan sistem operasi (Windows, Linux, MacOS, dll)
2. XAMPP Server
3. Browser (Chrome, Mozilla Firefox, Safari)

Mari kita mulai ke tahap selanjutnya. Download XAMPP untuk server menjalankan di local komputer terlebih dahulu.
– Link download klik Disini sesuaikan dengan OS (Operating System / Sistem Operasi yang ada di komputer. Contoh : Windows, MacOS, Linux.

Install XAMPP yang sudah didownload dan diinstall :

Pada modules Actions tekan tombol Start untuk menjalan servis XAMPP (XAMPP untuk Windows). Pada tab menu Manage Servers tekan tombol Start All untuk menjalankan semua servis XAMPP (XAMPP untuk MacOS).

Pastikan bahwa komputer / laptop anda benar-benar terinstall XAMPP dan servis XAMPP kondisi jalan atau start atau running. Buka browser anda ketikkan url “http://localhost” lalu tekan enter.

Jika sudah sesuai dengan tampilan di atas maka anda sudah bisa menjalankan Pemrograman Javascript.

Langkah selanjutnya yaitu,
– Buka hasil instalasi XAMPP
– Secara default biasanya berada di drive C:\xampp
– Buka explorer -> pilih drive Local Disk C:\ -> buka folder xampp
– Buka folder htdocs
– Buat folder css (klik kanan -> New -> Folder)
– Buka folder yang telah di buat

– Buat file index.html(klik kanan -> New -> Text Document)
– Ganti nama dengan index.html

– Buka file index.html yang sudah kita buat
– Ketikkan kode seperti berikut :

<html>
<head>
    <title>CSS | BelajarAplikasi.com</title>
    <style>
        body{
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>CSS Pertamaku Membuat Warna Backgrund Biru</p>
</body>
</html>

– Simpan hasil ketikkan tersebut.
– Jalankan dengan browser. Maka akan tampil seperti berikut :

Membuat Format Pada Paragraf

– Buka kembali file index.html atau buat file baru.
– Ketikkan seperti berikut :

<html>
<head>
    <title>CSS | BelajarAplikasi.com</title>
    <style>
        body{
            background-color: #cecece;
        }
    </style>
</head>
<body>
    <p style="font-weight:bold;">Membuat Tulisan Tebal</p>
    <p style="font-style:italic;">Membuat Tulisan Miring</p>
    <p style="text-decoration:underline;">Membuat Garis Bawah Tulisan</p>
    <p style="font-size:30px;">Menentukan Ukuran Huruf</p>
    <p style="font-family:Arial;">Menentukan Jenis Huruf</p>
    <p style="color:#EEFF41 ;">Menentukan Warna Huruf</p>
</body>
</html>

– Simpan hasil ketikkan tersebut.
– Jalankan dengan browser. Maka akan tampil seperti berikut :