Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
PENGERTIAN 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 <style> dan diakhiri dengan </style> CSS bisa dibagi 2 yaitu CSS Internal dan CSS eksternal
6
<HTML> <HEAD> <STYLE TYPE="text/css"> B { color : lime } </STYLE> </HEAD> <BODY> P: Mengapa jika kita anggap <B>suatu pekerjaan</B> itu mudah maka pekerjaan itu akan beneran menjadi<B> lebih mudah</B> ? <P> J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B> </BODY> </HTML>
7
<HTML> <HEAD> </HEAD> <BODY> P: Mengapa jika kita anggap <B><FONT COLOR="Lime">suatu pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan beneran menjadi<B><FONT COLOR="Lime"> lebih mudah </FONT></B>? <P> J: Karena itu merupakan <B><FONT COLOR="Lime">sugesti </FONT></B> terhadap <B><FONT COLOR="Lime">diri kita sendiri </FONT></B> </BODY> </HTML>
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, Pasti bingung?
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
<HTML> <HEAD> <STYLE TYPE="text/css"> .tanya {color: red} .jawab {color: blue} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT> terhadap diri kita sendiri </BODY> </HTML>
12
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
13
<html> <head> <style> p { background-color:yellow; } p.padding padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; </style> </head> <body> <p>paragraf ini tidak menggunakan atribut tambahan dalam padding</p> <p class="padding">paragraf ini menggunakan atribut tambahan dalam padding.</p> </body> </html>
14
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
15
<html> <head> <style> p.one { border-style:solid; border-width:5px; } p.two border-width:medium; p.three border-width:1px; </style> </head> <body> <p class="one">satu.</p> <p class="two">dua.</p> <p class="three">tigat.</p> <p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
16
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;
17
<html> <head> <style> p { background-color:yellow; } p.margin margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; </style> </head> <body> <p>This is a paragraph with no specified margins.</p> <p class="margin">This is a paragraph with specified margins.</p> </body> </html>
Presentasi serupa
