Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

CSS. APA ITU CSS ? CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil.

Presentasi serupa


Presentasi berjudul: "CSS. APA ITU CSS ? CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil."— Transcript presentasi:

1 CSS

2 APA ITU CSS ? CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil di halaman web Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna), fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.

3 CSS Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

4 Keuntungan Menggunakan CSS CSS memberikan keseragaman pada halaman web. Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet. CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah. Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.

5 CSS CSS selalu dimulai dengan tag dan diakhiri dengan CSS bisa dibagi 2 yaitu CSS Internal dan CSS eksternal

6 B { color : lime } P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah ? J: Karena itu merupakan sugesti terhadap diri kita sendiri

7 P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah ? J: Karena itu merupakan sugesti terhadap diri kita sendiri

8 Pada contoh di atas, baris ini B {color: lime} dikenal sebagai "Style Rule" atau peraturan/perintah css, yang mana terdiri dari dua elemen dasar yaitu : "selector" dan "declaration“

9 B {color: lime; text-decoration: underline; font-family: Arial} sebuah "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma

10 Classes : CSS juga mengijinkan kita untuk menyatukan elemen- elemen secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Sebagai contoh

11 Jenis-jenis selector Selector Bebas Selector dengan Class Selector dengan ID

12 Selector bebas Selector gbawah{ TEXT-DECORATION: underline; } Efect Garis Bawah dengan Selector Bebas

13 Selector dengan Class Selector.right { text-align : right } Class Heading 2 Class Paragraf

14 Selector dengan Id Selector #BODY_115 { FONT-SIZE: 20px; } TEXT-DECORATION: underline; COLOR: blue; FONT-FAMILY:Comic Sans MS; Menggunakan ID Selector

15 .tanya {color: red}.jawab {color: blue} P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? J: Karena itu merupakan sugesti terhadap diri kita sendiri

16 Bakcground pada CSS Manajemen body { color: white; background: green; font-family : arial; } internet manajemen merupakan mata kuliah favorit

17 Syntaxis CSS dibagi dalam 3 bagian : selector {property : value} dimana : selector : tag HTML yang akan didefinisikan (body, H1, Link, dll). property : atribut yang akan diubah Cara penulisan : FONT-FAMILY : sans-serif; FONT-SIZE : small; Cara penulisan yang salah : FONT-FAMILY : “sans-serif”; FONT-SIZE : ‘small’; Cara mendeklarasikan kelompok H1, H2 {color : green}; H3, H4 & H5 {color : red}; Aturan Penulisan Pada CSS

18 Format halaman Web

19 PADDING Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan padding-left:5px; ini adalah untuk pengaturan padding bagian kiri padding-right:5px; ini adalah untuk pengaturan padding kanan padding-top:5px; untuk bagian atas dan padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

20 p {background-color:yellow;} p.padding{ padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;} paragraf ini tidak menggunakan atribut tambahan dalam padding paragraf ini menggunakan atribut tambahan dalam padding.

21 BORDER Adalah garis tepi dari komponen Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan border-width:1px; ini adalah ketebalan border border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya

22 p.one {border-style:solid; border-width:5px;} p.two {border-style:solid;border-width:medium;} p.three {border-style:solid;border-width:1px;} satu. dua. tiga. Note: gunakan “border-width” untuk mengatur ketebalan garis

23 MARGIN Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border Margin Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas margin-left:5px; margin-right:5px; margin-top:5px; margin-bottom:5px;

24 p { background-color:yellow; } p.margin { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } This is a paragraph with no specified margins. This is a paragraph with specified margins.


Download ppt "CSS. APA ITU CSS ? CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil."

Presentasi serupa


Iklan oleh Google