Pengenalan CSS

I.Latar Belakang.
Latar belakang kali ini kita masih mengenal sintag tentang CSS untuk memperindah tamoilan web / program.

II.Alat dan Bahan.

  Laptop / PC
  W3SCHOOLS
  Sublime text

III.Tujuan.
 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.

CSS Tutorial

CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML.
CSS menjelaskan bagaimana elemen HTML harus ditampilkan.
Tutorial ini akan mengajarkan Anda CSS dari dasar hingga lanjutan.

Contoh :

Maka outputnya :

CSS Pendahuluan

Apa itu CSS?

• CSS singkatan C ascading S tyle S heets
• CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau di media lain
• CSS menghemat banyak pekerjaan . Hal ini dapat mengontrol tata letak halaman web beberapa sekaligus
• Stylesheet eksternal disimpan dalam file CSS

CSS Demo - Satu HTML Halaman - Beberapa Styles!

Di sini kita akan menampilkan satu halaman HTML ditampilkan dengan empat stylesheet yang berbeda. Klik pada "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" tautan di bawah untuk melihat gaya yang berbeda

Mengapa Gunakan CSS?

CSS digunakan untuk menentukan gaya untuk halaman web Anda, termasuk desain, tata letak dan variasi tampilan untuk perangkat yang berbeda dan ukuran layar. 

CSS Soal Big Masalah

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat halaman web!
HTML diciptakan untuk menjelaskan isi dari halaman web, seperti:
<H1> Ini adalah heading </ h1>
<P> Ini adalah sebuah paragraf. </ P>
Ketika tag seperti <font>, dan atribut warna ditambahkan ke spesifikasi HTML 3.2, mulai mimpi buruk bagi pengembang web. Pengembangan website besar, di mana font dan warna informasi yang ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.
Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) dibuat CSS.
CSS dihapus gaya format dari halaman HTML!

CSS Menyimpan Banyak Kerja!

Definisi gaya biasanya disimpan dalam file css eksternal.
Dengan file stylesheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file!

CSS Syntax dan Selectors

CSS Syntax

Pemilih poin ke elemen HTML Anda ingin bergaya. Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma.
Setiap deklarasi termasuk CSS nama properti dan nilai, yang dipisahkan oleh titik dua.
Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Pada contoh berikut semua <p> elemen akan pusat-blok, dengan warna teks mera
Contoh :

 Maka outputnya :

CSS Selectors

CSS digunakan untuk "menemukan" (atau pilih) elemen HTML berdasarkan mereka nama elemen, id, kelas, atribut, dan banyak lagi.

Unsur Pemilih Pemilih elemen memilih elemen berdasarkan nama elemen.
Anda dapat memilih semua <p> elemen pada halaman seperti ini (dalam hal ini, semua elemen <p> akan pusat-blok, dengan warna teks merah)

 Contoh :

Maka outputnya :

id Selector

Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
Id dari elemen harus unik dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih salah satu elemen yang unik!
Untuk memilih elemen dengan id tertentu, menulis (.) karakter, diikuti oleh id dari elemen.
Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = "a"

Contoh :

 Maka outputnya :

Kelas Selector

Pemilih kelas memilih elemen dengan atribut kelas khusus.
Untuk memilih elemen dengan kelas tertentu, menulis titik (.) Karakter, diikuti dengan nama kelas.
Pada contoh di bawah, semua elemen HTML dengan class = "center" akan merah dan pusat-blok

 Contoh :

 Maka outputnya :

 Kamu juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.

 Contoh :

 Maka outputnya :

elemen HTML juga dapat merujuk ke lebih dari satu kelas.
Pada contoh di bawah ini, <p> elemen akan ditata sesuai dengan class = "center" dan class = "besar"

Contoh :

 Maka outputnya :

pengelompokan Selectors

Jika Anda memiliki elemen dengan definisi gaya yang sama, seperti ini
Ini akan lebih baik untuk kelompok pemilih, untuk meminimalkan kode.
Untuk pemilih kelompok, memisahkan setiap pemilih dengan koma.
Contoh :

 Maka outputnya :

CSS Komentar

Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit kode sumber di kemudian hari.
Komentar diabaikan oleh browser.
Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar juga dapat span beberapa baris

Contoh :

 Maka outputnya :

CSS Cara 

Tiga Cara Sisipkan CSS

Ada tiga cara untuk memasukkan style sheet:

• style sheet eksternal
• internal style sheet
• gaya inline

Eksternal Style Sheet

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file!
Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam <link> elemen. <Link> elemen berjalan di dalam <head>

Contoh :

 Maka outputnya :

Style sheet eksternal dapat ditulis dalam editor teks. File harus tidak mengandung tag html. Style sheet file harus disimpan dengan ekstensi .css.

Contoh :

 Maka outputnya :

syle Sheet internal

Style sheet internal dapat digunakan jika satu halaman tunggal memiliki gaya yang unik.
gaya internal didefinisikan dalam elemen <style>, di dalam <head> halaman HTML

 Contoh :

 Maka outputnya :

Gaya inline

Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal.
Untuk menggunakan gaya inline, menambahkan atribut style untuk elemen yang relevan. Atribut style dapat berisi properti CSS.

Contoh :

 Maka outputnya :

Beberapa Style Sheets

Jika beberapa properti telah ditetapkan untuk pemilih yang sama (elemen) di style sheet yang berbeda, nilai dari style sheet terakhir dibaca akan digunakan.
Contoh :

Asumsikan bahwa style sheet eksternal memiliki gaya berikut untuk <h1> elemen:
h1 {
 color: navy;
}
  Contoh :

 Maka outputnya :

Cascading Pesanan

Gaya apa yang akan digunakan ketika ada lebih dari satu gaya tertentu untuk elemen HTML?
Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" ke dalam "virtual" style sheet baru dengan aturan berikut, di mana nomor satu memiliki prioritas tertinggi:

1. Inline gaya (dalam elemen HTML)
2. Eksternal dan internal style sheet (di bagian kepala)
3. browser default

Jadi, gaya inline (di dalam elemen HTML tertentu) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan dalam <head> tag, atau dalam style sheet eksternal, atau nilai default browser.

V.Kesimpulan. 
CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML.


VI.Refrensi.
    http://www.w3schools.com/css