Styling HTML with CSS ~ Phadma Sadna Phitaloka

Wednesday, February 04, 2015

Styling HTML with CSS

Author: Phadma Phitaloka | 11:57 AM | No comments |

Menggabungkan HTML degan style CSS bisa saja dilakukan. Caranya adalah dengan memasukkan script CSS ke dalam script HTML.
CSS adalah singkatan dari Cascading Style Sheets merupakan bahasa style sheet yang digunakan untuk menggambarkan tampilan dan format dokumen yang ditulis dalam bahasa html.

Styling dapat ditambahkan ke elemen HTML
dalam 3 cara :
1. Inline - menggunakan atribut gaya elemen HTML
2. Internal - menggunakan <style> elemen dalam HTML <head>
3. Eksternal - menggunakan satu atau lebih file CSS eksternal

Cara yang paling umum untuk menambahkan styling, adalah untuk menjaga sintaks CSS di file CSS yang terpisah.
Syntax penulisan CSS adalah :

element { property:value ; property:value }

A. Internal Styling

Oke , langsung aja yah... Seperti biasa , buat dulu file html nya di text editor kalian.
Tulis script nya :

<!DOCTYPE html>
<html>
<head>
<title> Styling HTML with CSS </title>
<style>
body {background-color:lightblue}
h1 {color:red}
p {color:green}
</style>
</head>
<body>
<h1>This is Red Heading </h1>
<p> This is Green Paragraph. Belajar Styling HTML with CSS </p>
</body>
</html>

Hasil ekskusi file nya setelah di run pada browser adalah sebagai berikut :

Penjelasan script nya adalah :

1. tag <style> ... </style> berfungsi sebagai syntax awal CSS yg berisi format penulisan.
2. script body {background-color:lightblue} berfungsi untuk mendeklarasikan warna background biru pada tampilan web nya.
3. script h1 {color:red} berfungsi untuk memberikan warna pada text heading 1
4. script p {color:green} berfungsi untuk memberikan warna pada text paragraf

B. External Styling

Untuk yg eksternal styling ini ideal ketika diterapkan pada banyak halaman. Dengan External Style Sheets kamu bisa mengubah tampilan seluruh situs dengan mengubah satu file saja.
External Styling didefinisikan dalam tag <head> pada halaman HTML, dan dalam tag <link>

<!DOCTYPE html>
<html>
<head>
<title> External Styling </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph </p>
</body>
</html>

Hasil ekskusi file nya seperti ini :