ID pada CSS
ID pada CSS merupakan selektor kontekstual (contextual-selector) ID selector digunakan untuk menentukan gaya(style) yang diinginkan ID selector menggunakan atribut element HTML, dan selalu didefinisikan dengan “#”
Contoh penulisannya: #paragraf { text-align:center; Color:red; }
<html> <head> <style> #paragraf { text-align:center; color:red; } </style> </head> <body> <p id="paragraf">SAYA MENGGUNAKAN ID</p> <p>paragraf ini tidak dipengaruhi oleh efek style</p> </body> </html>
<html> <head> <title>atribut id</title> <style type = "text/css"> #tebal { font-weight : bold; color : blue; } #miring { font-style : italic; color: pink; } </style> </head> <body> <h1> pantun</h1> <h2 id = "miring”>kalau ada jarum yang patah<br> jangan disimpan dalam peti </h2> <h3 id = "tebal”> kalau ada kata yang salah <br> jangan disimpan dalam hati </h3> </body> </html>
CSS Font Keluarga Dalam CSS, ada dua jenis nama font keluarga: keluarga generik : kelompok font keluarga dengan tampilan yang sama (seperti "Serif" atau "Monospace") font keluarga : keluarga font tertentu (seperti "Times New Roman" atau "Arial")
Font Keluarga Keluarga font teks yang dibuat dengan properti font-family. Properti font-keluarga harus terus beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya. Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia. Catatan : Jika nama suatu keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti font-family: "Times New Roman". Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma:
<html> <head> <style> p <html> <head> <style> p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;} </style> </head> <body> <h1>CSS font-family</h1> <p class="serif">This is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">This is a paragraph, shown in the Arial font.</p> </body> </html>
Font Style Properti font-style banyak digunakan untuk menetapkan teks miring. Properti ini memiliki tiga nilai yaitu: yang normal - Teks ditampilkan biasanya italic - Teks ditampilkan dalam huruf miring miring - teks ini "condong" (miring sangat mirip dengan miring, tapi kurang didukung)
<html> <head> <style> #normal {font-style:normal;} #italic {font-style:italic;} #oblique {font-style:oblique;} </style> </head> <body> <p id="normal">This is a paragraph, normal.</p> <p id="italic">This is a paragraph, italic.</p> <p id="oblique">This is a paragraph, oblique.</p> </body> </html>
DEKORASI PADA TEXT CSS juga merestui anda untuk mengatur secara luarbiasa masalah spasi (spacing), perataan (alignment) dan tampilan dari text anda (appearance). Properties “text-decoration” mengijinkan anda untuk membuat penekanan pada text. Sebuah garis dibawah, di atas, maupun garis yang melaluinya
<HTML> <HEAD> <STYLE TYPE="text/css"> .question {text-decoration: underline} /*tampil garis di bawah text */ .answer {text-decoration: overline} /*tampil garis di atas text */ .repeat {text-decoration: line-through}/*tampil garis melalui text */ .no-imagination {font-weight: bolder} </STYLE> </HEAD> <BODY> <P CLASS="question"> Q. Kenapa why, tidak pernah never, selalu always? <P CLASS="answer"> A. Karena because selalu always kapan-kapan sometimes? <P CLASS="repeat"> Q. Apakah anda tau, siapa orang yang terlucu di Indonesia? <P CLASS="repeat"> A. I Don’t know, Kasino and Indro. <P CLASS="no-imagination"> Maksudnya? Dono, Kasino, dan Indro (Warkop DKI) </BODY> </HTML>
Letter Spacing <HTML> <HEAD> <STYLE TYPE="text/css"> P {letter-spacing: 30px} </STYLE> </HEAD> <BODY> <P> Q. Kenapa Pekerjaan Jika Kita Anggap Mudah Akan Menjadi Benar-benar Mudah? <P> A. Kok, Sepertinya ini pertanyaan artikel yang kemarin? </BODY> </HTML>
Text-Align Perataan horizontal berlangsung melalui property “text-align”, yang menerima harga “left”, ”right”, “center” dan “justify” ketika perataan vertical terjadi melalui property “vertical-align”, yang dapat membawa harga “baseline”, “text-top”, “text-bottom”, “middle”, “sub”, “super”, “top”, dan “bottom”.
<HTML> <HEAD> </HEAD> <BODY> <P STYLE="text-align: center; font-weight: bolder"> Judul Di atas! <P STYLE="text-align: left"> Buku Adalah Dunia! <P STYLE="text-align: right"> <IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25"> Jangan Menilai Buku Dari Sampulnya <P STYLE="text-align: justify"> <IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Apakah Anda Sadar Kalau Kita Sebenarnya Lemah! <P STYLE="vertical-align: sub"> <IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Iwan Fals? Padi? Sheila On 7? Dan Dewa 19? <P STYLE="vertical-align: super"> <IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Mari Kita Mulai Dari permulaan <P STYLE="vertical-align: top"> <IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Let’s We Begin From The Beginning. </BODY> </HTML>
TEXT-TRANSFORM Property “text-transform” juga mengijinkan anda untuk Kapitalisasi dari seluruh teks. Pilih antara “uppercase”, “lowercase”,“capitalize”, dan “none”
<HTML> <HEAD> <STYLE TYPE="text/css"> .question {text-transform: capitalize} /*Karakter Pertama Huruf Besar*/ .answer {text-transform: uppercase} /* Semua Karakter Huruf Besar */ </STYLE> </HEAD> <BODY> <P CLASS="question"> Q. sebutkan sebuah kata bijak yang anda ketahui? <P CLASS="answer"> A. never judge a book from its cover!!! </BODY> </HTML>
Alternatif Font/Text Anda mungkin sudah tahu jika huruf yang ingin ditampilkan tidak ada dalam font-properties di komputer client, maka browser akan menampilkan default-font (biasanya Times New Roman). Dan disinilah CSS mendapat nilai lebih, karena dengan menggunakan CSS kita dapat mencoba berbagai kemungkinan huruf pada tag <FONT>. - CSS mengijinkan anda untuk membuat lebih dari satu kemungkinan sebagai alternatif font.
<HTML> <HEAD> <STYLE TYPE="text/css"> P {font-family: "Verdana"} </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 sugesti terhadap diri kita sendiri </BODY> </HTML>
<HTML> <HEAD> <STYLE TYPE="text/css"> P {font-family: "Verdana", "Arial", "Arial Black"} </STYLE> </HEAD> <BODY> <P CLASS="tanya"> P: Mengapa jikakita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah? <P CLASS="jawab"> J: Karena itu merupakan sugesti terhadap diri kita sendiri </BODY> </HTML>