CSS (Cascading Style Sheet) merupakan salah satu
fasilitas yang disediakan untuk pemrograman HTML agar dalam hal memformat teks
sampai memformat layout para designer dapat mengatur dan mendesain dengan
sendirinya. Dengan menggunakan CSS para designer akan dapat mempermudah untuk
mengatur style elemen yang berada pada halaman web nya.
h1 {color:blue;}
keterangan: pada
“h1” itu disebut selector
pada
“{color:blue;}” itu disebut declaration
pada “color” itu
disebut property
pada “blue” itu
disebut value
- Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class.
- Declaration itu menerangkan style yang akan dibuat. Declaration terdiri dari property dan value. Property dapat diisi dengan jenis warna, ukuran, perataan margin dan lainnya sedangkan Value diisi dengan nilai dari property nya itu sendiri, misalnya red untuk warna dan lainnya.
Jenis-Jenis CSS antara
lain adalah sebagai berikut:
- Internal --> property dari CSS diatur di antara tag STYLE yang diletakkan di antara tag HEAD.
- Eksternal --> pendefinisian style dilakukan pada file tersendiri. Untuk mengakses style eksternal, digunakan tag LINK.
- Inline --> digunakan langsung pada tag yang berada di dalam BODY dengan menggunakan atribut STYLE, untuk melakukan pengaturan dengan property pada CSS.
- Properti font-size untuk mengatur besarnya huruf. Contohnya font-size: large;
- Properti font-family untuk berguna untuk menentukan nama font. Contohnya font-family: verdana;
- Properti font-style untuk mengatur teks untuk dimiringkan atau tidak. Contohnya font-style: italic;
- Properti text-indent untuk melakukan indentasi, yaitu menjorokkan baris pertama agak ke kanan. Contohnya text-indent: 40%;
- Properti line-height untuk menentukan jarak vertical antara satu baris dengan baris di atas atau di bawahnya. Contonya line-height: 800%;
- Properti text-decoration untuk mengatur teks agar digarisbawahi atau dicoret ataupun dibuat berkedip. Contohnya text-decoration: none; atau text-decoration: underline; atau text-decoration: line-through; atau text-decoration: blink;
- Properti font-weight untuk menebalkan atau menipiskan teks. Contohnya font-weight: bold;
- Properti text-transform untuk melakukan konversi terhadap teks. Contohnya text-transform: none; atau text-transform: capitalize; atau text-transform: uppercase; atau text-transform: lowercase;
- Properti text-align untuk mengatur peletakkan teks pada arah horizontal. Contohnya text-align: left; atau text-align: right; atau text-align: justify; atau text-align: center;
- Properti color untuk memberikan warna, dapat menggunakan value color red (nama warna) dan #f00 (code hex) untuk menghasilkan warna merah. Contohnya p.red {color: red;} atau p {color: #f00;}
- Properti letter-spacing untuk mengatur jarak huruf antara huruf satu dengan huruf lainnya. Contohnya p {letter-spacing: 2px;} atau p {letter-spacing: normal;}
- Properti text-shadow untuk menambahkan efek bayangan pada teks namun tidak semua browser dapat mendukung properti ini. Contohnya p {color: #a01; text-shadow: 1px 1px 1px #000;}
- Properti white-space untuk mengatur ruang putih pada elemen, dapat menggunakan value nowrap ataupun value normal. Contohnya pre {white-space: nowrap;} atau pre {white-space: normal;}
- Properti word-spacing untuk menambah atau mengurangi spasi antara kata satu dengan kata lainnya, dapat menggunakan value length maupun value normal. Contohnya p {word-spacing: 5px;} atau p {word-spacing: normal;}
- Properti background-color untuk memberi sebuah warna yang diinginkan pada background halaman web. Contohnya memberi warna background hijau background-color: green;
- Properti background-image untuk memberikan sebuah gambar pada background. Contohnya body {background-image: url(img.jpg); }
- Properti background-position untuk mendeklarasikan posisi gambar background. Contohnya div {background-position: 10px 5px;} atau div {background-position: bottom right;}
- Properti background-attachment untuk mendeklarasikan lampiran dari gambar background (untuk menggulir dengan isi halaman atau berada dalam posisi tetap). Contohnya div {background-attachment: fixed;} atau div {background-attachment: scroll;}
- Properti background-repeat untuk mendeklarasikan bagaimana jika sebuah gambar dari background itu diulang. Contohnya div {background-repeat: repeat-x;} atau div {background-repeat: no-repeat;}
- Properti margin untuk menyatakan semua properti margin yang dijadikan satu yang terdiri dari top, right, bottom, left. Contohnya div {margin: 5px 12px 4px 7px;}
- Properti table-layout untuk mendeklarasikan tipe dari layout table. Contohnya table {table-layout: auto;} atau table {table-layout: fixed;}
- Properti outline sebagai properti singkat untuk mengatur semua properti background sekaligus terdiri dari color, style, width. Contohnya div {outline: green solid 2px;} atau div {outline: #00FF00 double thick;}
