1) Pengenalan CSS
Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Dengan Metode CSS keseluruhan warna dan tampilan yang ada di situs web dapat dirubah/diformat ulang dengan cepat. CSS juga telah di standartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.
Contoh :
<h1 style="color:red;">Merah, Meriah Euy...</h1>
2. Istilah- istilah dalam CSS
maka akan tampil seperti ini
Merah, Meriah Euy...
Style rule
Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna merah.
contoh :
.h2 {
maka elemaen Html yang memiliki tag h2 akan berwarna merah
color:red;
}
Style sheet
Style sheet dapat di-embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.
Selector
selector { property1: value; property2:value, . . .}
h1{ color:green; background-color:orange;}
Style sheets terdiri dari dua bagian:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
2. Declaration
Terdiri dari properti dan nilainya.
3. Penulisan CSS
Pada dasarnya Penulisan Css Dibagi menjadi Tiga yaitu
Yaitu menuliskan langsung scritp CSS di file HTML-nya. Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
Yaitu memanggil file CSS dari tempat lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini :
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Pengenalan CSS (Cascading Style Sheet )
Diposting oleh
Th3 Pirates |
10/13/2010
|
CSS
|
0
komentar »
b3lajarbareng.blogspot.com, Bagi kamu yang ingin bereksperimen warna pada blog kamu saya akan menampilkan beberapa Varian warna pada HTML, yang dikombinasikan dari elemen RGB (Red, Green Blue).
Secara garis besar arti dari warna itu sebenarnya bisa kita deskribsikan. Dengan catatan jika warna-warna itu dalam keadaan berdiri sendiri atau menjadi dominan dibanding dengan warna yang lain.
Tapi tunggu!
Bagaimana sebuah warna mempunyai arti? Secara ilmiah pengertian warna merupakan gelombang elektromagnetik yang menuju ke mata kita dan kemudian diterjemahkan oleh otak sebagai warna.
Dengan kata lain arti warna adalah juga sesuatu yang berhubungan dengan emosi manusia. Dan dapat menimbulkan pengaruh psikologis. Ini sudah terbukti pada logo perusahaan-perusahaan sukses.
Berikut beberapa daftar arti dari warna secara umum yang saya ketahui, semoga dapat membantumu dalam mencari inspirasi warna:
- Biru Sering diartikan sebagai sesuatu yang memiliki ketenangan dan kepercayaan.
- Merah Arti dari warna ini melambangkan sesuatu kekuatan, nafsu dan kemauan yang agresif.
- Kuning Melambangkan kegembiraan penuh harapan dan optimis. Mungkin sesuatu yang spontan
- Hijau Warna ini menunjukkan sesuatu yang alami dan serba sehat.
- Ungu, keangkuhan dan kemewahan adalah pegertian warna ini
- Hitam, saya rasa kamu setuju jika arti warna ini berarti misteri, kematian dan ketakuan.
- Putih, Banyak yang mengatakan warna ini adalah kesucian, mungkin lebih tepat menunjukkan bersih, rapi dan tertata.
Berikut adalah kode warna pada HTML:
| Color | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
Kurang puas???? hemmm bahaya nie.. hehehhehe disini ada 150 Varian warna yang terdiri dari kombinasi 16 macam warna yaitu: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
| Color Name | Color HEX | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DimGrey | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Anda juga bisa menggunakan bantuan software untuk mendapatkan warna-warna diatas, salah satu sofware yang biasa digunakan untuk mendesign web adalah Macromedia Dreamweaver atau Adobe Dreamweaver.
Sumber :
http://indo-trans.blogspot.com
http://blogbintang.com
Langganan:
Postingan (Atom)
