Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Pemrograman Berbasis Web CSS. Cascading Style Sheets (CSS) Konsep Dasar CCS CCS Property.

Presentasi serupa


Presentasi berjudul: "Pemrograman Berbasis Web CSS. Cascading Style Sheets (CSS) Konsep Dasar CCS CCS Property."— Transcript presentasi:

1 Pemrograman Berbasis Web CSS

2 Cascading Style Sheets (CSS) Konsep Dasar CCS CCS Property

3 CSS Definisi Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada disitus kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan diweb browser.

4 CSS Keuntungan CCS Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita. User yang berbedadapat mempunyai style-sheet yang berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.

5 CSS Secara Umum ada tiga bagian yaitu Selector (elemen yang akan didefinisikan) Properti (atribut yang akan diubah) Nilai Bentuk Umum : Selector{property: value}

6 CSS Aturan property dan nilai dipisahkan dengan titik dua (colon), contoh : Body {color: black} Jika nilai berupa beberapa kata, gunakan tanda petik ganda, contoh : P {font-family: “sans serif} Jika lebih dari satu property pisahkan dengan titik-koma (semi colon) contoh : P {text-align: center; color: red} Atau P { text-align:center; color: black; font-family: arial }

7 CSS Jika selector dikelompokkan, Contoh : H1, H2, H3, H4, H5, H6 { color: green; }

8 CSS Jika menggunakan attribute class (dalam definisi CSS). Contoh : P. Kanan{text-align:right} P. Kiri{text-align:left} Selanjutnya menulis sintak dalam dokumen html menggunakan definisi diatas yaitu : This paragraph will be right aligned This paragraph will be left aligned

9 CSS Jika menggunakan ID atribut #Kanan {text-align: right} Berikut ini sintak yang ditulis dalam dokumen html menggunakan definisi atribut di atas. Contoh : This paragraph will be right aligned This paragraph will be right aligned too

10 Style Sheet External File disimpan dalam sebuah file yang berekstension.css, dan dalam pendefinisian eksternal tidak diperlukan tag html. Contoh : body {background-color: yellow} h1 {font-size: 36pt} h2{color: blue} p{margin-left: 50px} (simpan file tersebut dengan nama ex1.css)

11 Style Sheet External Kemudian ketik file HTMLnya This Header is 36 pt This Header is Blue This paragraph has a left margin of 50 pixels

12 Style Sheet Internal Style sheet intermal biasanya dilakukan karena web page tertentu bersifat sangat unik sehingga membutuhkan definisi terpisah dibandingkan web page lainnya.

13 Style Sheet Internal Contoh : Body {background-image: url (“../picture/backgrnd.gif”)} HR {color:sienna} P { font-size:11pt; margin-left:15px} This paragraph has left margin of 15 pixel and font size 11 pt

14 Style Sheet Inline Suatu style inline hanya bisa digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan ini tidak dianjurkan karena dokumen menjadi lebih besar karena style didefinisikan satu persatu. Contoh : This paragraph has inline style

15 Multi Style Sheet Jika digunakan lebih dari definisi dari style sheet maka nilai yang tidak didefinisikan akan diinherit (diturunkan) dari style yang lebih general. Contoh : H3 { color: red; text-align: left; font-size: 8pt }

16 Multi Style Sheet H3 { text-align: right; font-size: 20pt } This Header Inherit Font Color From ex3.css


Download ppt "Pemrograman Berbasis Web CSS. Cascading Style Sheets (CSS) Konsep Dasar CCS CCS Property."

Presentasi serupa


Iklan oleh Google