Kelas Tutorial: Mei 2021

Sabtu, 15 Mei 2021

Cara Penulisan CSS

Saat browser membaca sebuah style sheet, maka browser akan melakukan formating terhadap dokumen HTML sesuai dengan informasi yang di berikan oleh Style sheet.

Maksudnya begini, misalnya didalam style sheet terdapat informasi bahwa sebuah elemen HTML pada halaman web harus di tampilkan dengan background-color: black; dan color:white;. Maka saat style sheet tersebut di baca oleh browser, browser akan menampilkan elemen tersebut di dalam web page dengan background warna hitam dan tulisan warna putih.

Lalu Bagaimana cara Menuliskan CSS kedalam Dokumen HTML ?

Ada tiga cara dalam penulisan CSS, yaitu dengan cara External, Internal, dan Inline.

External CSS

Baca selengkapnya »

Jumat, 14 Mei 2021

Lebih Jauh Tentang CSS

CSS adalah kepanjangan dari Cascading Style Sheet. CSS ini merupakan sebuah mekanisme sederhana yang mengatur gaya/ style pada halaman web. Style disini bisa berupa warna, ukuran, posisi, dll.

Dengan kata lain, CSS ini adalah sebuah bahasa yang berfungsi untuk melakukan styling terhdap sebuah halama web. CSS mengontrol bagaimana sebuah elemen HTML akan ditampilkan, selain itu dengan menggunakan CSS juga akan menghemat waktu kerja karena CSS ini dapat mengontrol layout dari banyak halaman web secara bersamaan.

Penyesuaian layout halaman web pada berbagai device dan layar pun dapat di tangani dengan CSS ini. Ini lah kenapa CSS mutlak diperlukan dalam pembuatan sebuah halaman web.

Pada contoh dibawah ini, sebuah halaman web akan di atur sbb :

Background halaman di beri warna lightblue.
Elemen h1 diatur posisinya menjadi rata tengah dengan warna putih.
dan Elemen p ditulis dengan font verdana dengan ukuran 20px.

<!DOCTYPE html>

<html>

<head>

<style>

       body {
                   background-color: lightblue;
       }

       h1 {
               color: white;
               text-align: center;
       }

       p {
               font-family: verdana;
               font-size: 20px;
       }

</style>

</head>

<body>

<h1>Hello World</h1>

<p>This is a paragraph.</p>

</body>

<html>

Hasilnya seperti ini :

Syntax

Struktur CSS terdiri dari 2 bagian, yaitu bagian Selector dan Blok Deklarasi.