CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet)

PENGENALAN CSS

CSS = Cascading Style Sheet

Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.

TUJUAN

• setelah mengikuti modul ini, diharapkan siswa :

• Mengenal konsep CSS Mengerti

• penggunaan CSS pada dokumen HTML

Apa itu CSS ?

Cascading Style Sheets atau yang lebih dikenal sebagai CSS, adalah salah satu feature dalam HTML yang memungkinkan anda untuk mengatur tampilan halaman web yang anda bangun. tidak ada sebuah keharusan dalam menggunakan style sheet untuk memformat halaman web, namun menambahkan style sheet, dalam hal ini CSS adalah sebuah kelebihan tersendiri untuk tampilan halaman web nantinya.

Bukan itu saja, CSS memungkinkan anda untuk memberi suatu efek-efek khusus pada isis halaman web secara lebih spesifik, dengan lebih sedikit kode yang ditambahkan. Misal, untuk membuat semua teks yang ditulis tebal dan miring, memiliki warna merah, hanya perlu melakukan suatu baris tambahan kode untuk melakukan semua itu.

MEMBUAT CSS

CARA PERTAMA :

mengetikkan langsung dalam tag html sebagai atribut

MEMBUAT CSS

CARA KEDUA :

Menggunakan tag style di dalam tag head.

MEMBUAT CSS

Style definitions : adalah defenisi style yang ingin dibuat.

Format penulisannya adalah :

Selector adalah tag yang digunakan web browser.

Property : value adalah efek dari style yang diinginkan untuk selector.

CARA KETIGA :

Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css

Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head.

^{Contoh :}

^{<style type=“text/css” >}

       ^{hr { color : red ; height : 5px ; width : 50%; }}

^</style>

Keterangan :

Tag         adalah  style

Atribut     adalah  type=“text/css”

Selector   adalah  hr

Property   adalah  color, height, width

Value        adalah  red, 5px, 50%

ID SELECTOR dan CLASS

ID selector didefenisikan sendiri

ID selector diawali tanda # ( octothorpe)

CLASS diawali dengan tanda titik ( . )

Tugas Latihan

buatlah Biodata Menggunakan HTML dan CSS

kirim code html & css beserta hasilnya dalam bentuk web

kirim via classroom kode : jsieupk

atau via email [e-mail]