KURSUS WEB JAKARTA

HTML Styles - CSS

CSS (Cascading Style Sheets) digunakan untuk elemen HTML style.

html css

<!DOCTYPE html>
<html>
<body style="background-color:PowderBlue;">

<h1>Lihat! Gaya dan warna</h1>

<p style="font-family:verdana;color:red;">
Teks ini adalah di Verdana dan merah</p>

<p style="font-family:times;color:green;">
Teks ini adalah di Times dan hijau</p>

<p style="font-size:30px;">Teks ini adalah tingginya 30 piksel</p>

</body>
</html>

 

Styling HTML with CSS

CSS diperkenalkan bersama-sama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk elemen HTML style.

CSS dapat ditambahkan ke HTML dengan cara sebagai berikut:

  • Inline - menggunakan atribut gaya dalam elemen HTML
  • Internal - menggunakan elemen style di bagian <head>
  • Eksternal - menggunakan file CSS eksternal


Cara yang lebih disukai untuk menambahkan CSS untuk HTML, adalah untuk menempatkan sintaks CSS pada file CSS yang terpisah.

Namun, dalam tutorial HTML kita akan memperkenalkan Anda ke CSS menggunakan atribut style. Hal ini dilakukan untuk menyederhanakan contoh. Hal ini juga membuat lebih mudah bagi Anda untuk mengedit kode dan mencoba sendiri.

Inline Styles

Sebuah gaya inline dapat digunakan jika gaya yang unik yang akan diterapkan ke satu kejadian tunggal dari sebuah elemen.

Untuk menggunakan gaya inline, menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri paragraf:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

HTML Style Example - Background Color

Properti background-color mendefinisikan warna latar belakang untuk elemen:

head & paragraph pda html css

 <!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

Properti background-color membuat "tua" atribut bgcolor usang.

HTML Style Example - Font, Color and Size

Font-family, color, dan font-size sifat mendefinisikan font, color, dan ukuran teks dalam suatu elemen:

 ukuran tks dalam suatu element


 <!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">Sebuah judul</h1>
<p style="font-family:arial;color:red;font-size:20px;">Sebuah paragraf.</p>
</body>
</html>

 Font-family, warna, dan font-size sifat membuat tag <font> lama usang.

HTML Style Example - Text Alignment

Properti text-align menentukan keselarasan horizontal teks dalam suatu elemen:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Center-aligned heading</h1>
<p>Ini adalah sebuah paragraf.</p>

</body>
</html>

Properti text-align membuat tag <center> lama usang.

Internal Style Sheet

Sebuah style sheet internal yang dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. Gaya internal didefinisikan dalam bagian <head> halaman HTML, dengan menggunakan tag style, seperti ini:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head> 

 

External Style Sheet

Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 

 

HTML Style Tags

Tag Description
<style> Mendefinisikan informasi style untuk dokumen
<link> Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

 

Deprecated Tags and Attributes

Dalam HTML 4, beberapa tag dan atribut yang digunakan untuk dokumen gaya. Tag ini tidak didukung dalam versi yang lebih baru dari HTML.

Hindari menggunakan elemen: <font>, <center>, dan <strike>, dan atribut: color dan bgcolor.

BELAJAR WEB DI ITKOMPUTER

Durasi 8 kali pertemuan untuk satu kali pertemuan 2 jam.
Pengenalan Photoshop untuk design web, design web dengan Photoshop, Integrasi Photoshop dengan DreamWeaver, Pengenalan DreamWeaver, perintah-perintah HTML, CSS, JQuery, Membuat animasi banner, Upload website dengan FTP dan cpanel, trik bagai mana mempromosikan website anda di internet, memilih web Hosting. Berbagai Tips dan Trik menarik tentang Web Design. Tujuan akhir setelah mengikuti kursus ini: Anda dapat membuat web yang menarik seperti company profile, web gallery photo, banner animasi, mempromosikan web di internet dan dapat melakukan upload ke server hosting.

Klik disini untuk mendaftar