Pengenalan Kode Properti Cascading Style Sheet (CSS)

Pengenalan Kode Properti CSS - Cascading Style Sheet (CSS) adalah hal yang wajib bagi webmaster desainer untuk menguasai nya,karna dengan CSS ini lah desainer web memodipikasi tampilan web nya sedemikian reupa dengan gaya dan bentuk yang berbeda.

CSS pun merupakan pelengkap dari kode HTML dalam web untuk mendapatkan tampilan yang maksimal dalam setiap halaman nya.

jadi untuk memahami CSS paling tidak kita harus sedikit tahu tentang HTML.
karna kedua nya adalah satu kesatuan yang saling berkaitan.
Dalam kesempatan kali ini saya tidak akan membahas tentang HTML,karna sesua dengan judul saya akan membahas tentang pengertian css dan komponen properti CSS.

Pengertian CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.
Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Versi CSS
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3.
1.    CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.

2.    CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer.
Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

3.    CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query.
Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal.
Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain.
Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.

Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.
Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.

Fakta Menggunakan CSS diantaranya :
•    Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.

•    Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
•    Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
•    Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
•    Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
•    CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.

Sumber http://id.wikipedia.org/wiki/Cascading_Style_Sheets

Property Text Style
Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web. Adapun komponen Text Style atau yang berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berikut ini :
1.    Color
Property ini mengontrol warna dari text penulisannya

Selektor {color:#000000}

Value bisa warna Hexadesimal bisa hanya tulisan misalnya untuk kuning menggunakan Yellow.

2.    font-weight
Property ini mengontrol tebal dari text penulisannya

Selektor { font-weight:100}

Value bisa anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya atau bisa anda tulis dengan kata ‘Bold’ atau yang lain.

3.    font-family
Property ini untuk mengatur font yang anda pakai

Selektor{font-family:Arial, Helvetica, sans-serif}

Untuk jenis font sebaiknya menggunakan standard bawaan Windows,jika ingin terbaca oleh seluruh user.

4.    font-size
Property ini untuk mengatur ukuran font yang akan dipakai

Selektor{ font-size:12px}

Untuk ukuran font anda bisa menggunakan ukuran… px,…em atau small,medium,large dll.

5.    font-variant
Property ini untuk mengatur font yang akan muncul apakah menggunakan huruf kecil atau small caps

Selektor{ font-variant:small-caps}

atau anda bisa menggunakan normal.

6.    font-style
Property ini untuk mengatur style font yang akan digunakan pada text

Selektor{ font-style:italic}

pilihan value lain normal, oblique

7.    text-decoration
Property ini untuk mengatur style font lanjutan dari font style.

Selektor{text-decoration:underline}

atau value lain : line through, none, blink, overline

8.    text-transform
Property ini untuk mengatur capital font

Selektor{ text-transform:lowercase}

value lain: uppercase, capitalize

Property Text Layout
Property Text Layout ini berfungsi untuk mengatur bagaimana efek dari suatu layout suatu tulisan pada halaman website. Property ini lebih berfokus pada penempatan dan tampilan yang ditempatkan pada halaman web anda. Anda bisa mengombinasikan antara tampilan page layout dan text layout supaya tampilan website anda lebih elegant dan sesuai dengan keinginan anda tentunya dan itu yang jelas tidak bisa anda dapatkan pada HTML. Berikut ini propertynya :
1.    letter-spacing
Property ini untuk mengontrol jarak space antar karakter

Selektor{letter-spacing:normal}

untuk value normal maka akan diatur oleh browser sebagai justify text.

2.    word-spacing
Property ini untuk mengontrol jarak space antar text atau kata

Selektor{ word-spacing:normal}

3.    line-height
Property ini untuk mengatur jarak line atau garis

Selektor{ line-height:normal}

value lain : …em, …px atau persentase …%

4.    text-indent
Property ini untuk mengatur dari baris pertama yang masuk biasanya untuk awal paragraph.

Selektor{ text-indent:50px}

5.    text-align
Property ini untuk mengatur posisi dari text

Selektor{ text-align:justify}

Value lain : left, right, center

6.    vertical-align
Property ini untuk mengontrol jarak space antar text atau kata

Selektor{ vertical-align:top}

value lain: text-top,text-bottom, bottom, middle, baseline, sub, super.

7.    direction
Property ini untuk mengatur dan menentukan arah dari suatu tulisan pada website

Selektor{ direction:ltr}

Value lain : rtl Keterangan : ltr =Tulisan yang terbaca dari kiri ke kanan rtl =Tulisan yang terbaca dari kanan ke kiri

8.    unicode-bidi
Property ini untuk mengontrol dan mengarahkan pada tulisan unicode

Selektor{ unicode-bidi:bidi-override}

Value lain : normal, embed

Property Border
Property ini adalah untuk mengatur elemen yang mempunyai garis dengan berbagai variasi lebar,warna serta gaya suatu tampilan. Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda style. Berikut ini propertynya :
1.    border
Property ini untuk mengatur border secara keseluruhan

Selektor{border:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

2.    border-width
Property ini untuk mengatur lebar border secara keseluruhan

Selektor{ border-width:thin}

Value lain : thick, medium

3.    border-top-width
Property ini untuk mengatur lebar border top

Selektor{ border-top-width:thin}

Value lain : thick, medium

4.    border-right-width
Property ini untuk mengatur lebar border right

Selektor{ border-right-width:thin}

Value lain : thick, medium

5.    border-bottom-width
Property ini untuk mengatur lebar border bottom

Selektor{ border-bottom-width:thin}

Value lain : thick, medium

6.    border-left-width
Property ini untuk mengatur lebar border left

Selektor{ border-left-width:normal}

Value lain : thick, medium

7.    border-color
Property ini untuk mengatur warna dari border

Selektor{ border-color:#333333}

Value lain : anda bisa gunakan warna hexadecimal yang awalnya dimulai dengan tanda #

8.    border-style
Property ini untuk mengatur style dari border

Selektor{ border-style:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

9.    border-top
Property ini untuk mengatur border top

Selektor{ border-top:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

10.    border-right
Property ini untuk mengatur border right

Selektor{ border-right:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

11.    border-bottom
Property ini untuk mengatur border bottom

Selektor{ border-bottom:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

12.    border-left
Property ini untuk mengatur border left

Selektor{ border-left:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

Property Margin
Property Margin ini untuk mengatur ruang atau jarak batasan antar elemen, misalnya antara elemen atas dan bawah, atau antara kiri dan bawah dll. Berikut ini propertynya :
1.    margin
Property ini untuk mengatur jarak meliputi secara keseluruhan antar elemen

Selektor{ margin:auto}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

2.    margin-top
Property ini untuk mengatur jarak top dengan elemen

Selektor{ margin-top:auto}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

3.    margin-left
Property ini untuk mengatur jarak left dengan elemen

Selektor{ margin-left:auto}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

4.    margin-right
Property ini untuk mengatur jarak right dengan elemen

Selektor{ margin-right:auto}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

5.    margin-bottom
Property ini untuk mengatur jarak bottom dengan elemen

Selektor{ margin-bottom:auto}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

Property Padding
Property padding adalah untuk mengatur ruang antara elemen dan konten. Berikut ini propertynya :
1.    padding
Property ini untuk mengatur ruang elemen dengan konten secara global

Selektor{ padding:7px}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

2.    padding-top
Property ini untuk mengatur ruang elemen top dengan konten

Selektor{ padding-top:7px}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

3.    padding-left
Property ini untuk mengatur ruang elemen left dengan konten

Selektor{ padding-left:7px}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

4.    padding-right
Property ini untuk mengatur ruang elemen right dengan konten

Selektor{ padding-right:7px}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

5.    padding-bottom
Property ini untuk mengatur ruang elemen bottom dengan konten

Selektor{ padding-bottom:7px}

Value lain bisa ukuran …px,…em atau persentase misalnya 25%

Property Page Layout
Property Page Layout adalah untuk mendesign suatu layout pada halaman web, ini property penting yang harus anda kuasai karena dengan menguasai property ini maka anda bisa membuat suatu halaman web yang bagus dan tentunya harus didukung akan kreatifitas seseorang. Pada HTML tidak mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini anda juga bisa merubah pada themes atau template pada script CMS yang da sekarang ini. Berikut ini propertynya :
1.    position
Property ini untuk menentukan dimana elemen akan ditempatkan juga untuk menempatkan elemen induk.

Selektor{ position:absolute}

Value lain : fixed,relative, static, top, bottom, left, right

2.    top
Property ini untuk menentukan bagian atas dari suatu elemen ditempatkan.

Selektor{ top:absolute}

Value lain : fixed,relative, static,auto

3.    left
Property ini untuk menentukan bagian kiri dari suatu elemen ditempatkan.

Selektor{ left:absolute}

Value lain : fixed,relative, static,auto

4.    bottom
Property ini untuk menentukan bagian bawah dari suatu elemen ditempatkan.

Selektor{ bottom:absolute}

Value lain : fixed,relative, static,auto

5.    right
Property ini untuk menentukan bagian kanan dari suatu elemen ditempatkan.

Selektor{ right:absolute}

Value lain : fixed,relative, static,auto

6.    width
Property ini untuk menentukan lebar dari suatu elemen

Selektor{width:50%}

value lain: …px,…em,auto

7.    min-width
Property ini untuk menentukan lebar minimal dari suatu elemen

Selektor{ min-width:50%}

value lain: …px,…em,auto,none

8.    max-width
Property ini untuk menentukan lebar maximal dari suatu elemen

Selektor{ max-width:50%}

value lain: …px,…em,auto,none

9.    height
Property ini untuk menentukan tinggi dari suatu elemen

Selektor{ height:50%}

value lain: …px,…em,auto,none

10.    min-height
Property ini untuk menentukan tinggi minimal dari suatu elemen

Selektor{ min-height:50%}

value lain: …px,…em,auto,none

11.    max-height
Property ini untuk menentukan tinggi maximal dari suatu elemen

Selektor{ max-height:50%}

value lain: …px,…em,auto,none

12.    z-index
Property ini untuk mengatur beberpa elemen yang terjadi overlap

Selektor{z-index:auto}

value lain mengunakan bilangan bulat ( integer)

13.    visibility
Property ini untuk mengatur elemen apakah ditampilkan pada browser atau tidak.

Selektor{ visibility:hidden}

Value lain : visible, collapse

14.    overflow
Property ini untuk mengatur menampilkan konten yang tidak bisa ditampung oleh elemen

Selektor{ overflow:auto}

Value Lain : hidden, scroll, visible

15.    float
Property ini membuat efek elemen yang keluar dari flow dan ditempatkan disisi kiri atau kanan suatu elemen

Selektor(float:left}

Value lain : None, right

16.    clear
Property ini digunakan bersama dengan float dan disini ditentukan apakah elemen bisa menerima suatu float atau tidak.

Selektor{ clear:both}

Value lain : left, right, none

17.    clip
Property ini untuk mengatur cupilkan kecil suatu elemen untuk ditampilkan.

Selektor{ clip:rect('top', 'right', 'bottom', 'left')}

Value lain : both

Property Background
Property ini berguna untuk mengatur tampilan background atau halaman belakang suatu web serta pengaturan suatu background yang lainnya misalnya background dari font. Berikut ini propertynya :
1.    background
Property ini untuk mengatur background secara luas

Selektor{ background:bottom}

Untuk value lain bisa : url, none, center, left, right, top, no-reapet, reapet, reapet-x, reapet-y, fixed, scroll
Untuk contoh penggunaaan value url :

Selektor(background:url(http://rudydevianto.com/background.png) fixed no-reapet top left}

2.    background-color
Property ini untuk mengatur warna dari background

Selektor {background-color:#000033}

Value lain anda bisa gunakan pewarnaan hexadecimal.

3.    background-image
Property ini untuk mengatur background gambar dari suatu table , halaman atau elemen yang lain

Selektor(background:url(http://etsyteamnfcr.blogspot.com/logo.png)}

atau value none untuk tidak menampilkan gambar.

4.    background-attachment
Property ini untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap

Selektor{ background-attachment:scroll}

Value lain : fixed

5.    background-repeat
Property ini untuk membuat perintah pada image yang ada pada background untuk perulangan karena disebabkan gambar yang ukuran kecil

Selektor{ background-repeat:repeat}

Value lain: no repeat, reapet-x, reapeat-y

6.    background-position
Property ini untuk mengatur posisi dari gambar background pada halaman.

Selektor{ background-position:top}

Value lain : left, right, bottom, center

Property Type Elemen
Property ini untuk mengatur suatu elemen dalam web. Berikut ini propertynya :
1.    display
Property ini untuk mengatur sebagaimana elemen akan terpasang pada halaman website

Selektor{ display:block}

Value lain : compact, inline, inline-table, list-item, marker, none, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group,table-row, table-row-group

2.    white-space
Property ini dapat digunakan jika anda menggunakan elemen block dan untuk menentukan apa yang akan browser lakukan kepada white-space ( spasi )

Selektor{ white-space:normal}

Value lain : normal, nowrap, pre

3.    list-style-type
Property ini digunakan untuk menentukan suatu Style List Item ( Bullet )

Selektor{ list-style-type:armenian}

value lain : cirle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin, upper-roman

4.    list-style-image
Property ini untuk membuat bullet dari gambar

Selektor{ list-style-image:url(http://rudydevianto.com/bullet.gif)}

5.    list-style-position
Property ini untuk mengatur posisi bullet

Selektor{ list-style-position:inside}

Value lain : outside

6.    list-style
Property ini untuk mengatur style dari list ( bullet ) secara global

Selektor{ list-style-type:armenian}

value lain : url, inside, outside, cirle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin, upper-roman

7.    border-collapse
Property ini untuk mengatur border table

Selektor{border-collapse:collapse}

Value lain : separate

8.    border-spacing
Property ini untuk mengatur space pada border

Selektor{border-spacing:0}

9.    caption-side
Property ini untuk mengatur posisi dari caption

Selektor{caption-side:bottom}

Value lain : top, left, center, right

10.    empty-cells
Property ini untuk menampilkan atau menyembunyikan cell pada table

Selektor{empty-cells:hide}

Value lain : show

11.    table-layout
Property ini untuk mengatur layout suatu table apakah menyesuaikan atau tetap .

Selektor{table-layout:auto}

Value lain : fixed

Property Interface
Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang ditujukan untuk pengguna . Berikut ini propertynya :
1.    cursor
Property ini untuk mengatur tampilan cursor yang kan dipakai user pada browser

Selektor{cursor:auto}

Value lain : url , crosshair, default, e-resize, help, move, ne-resize, n-resize, nw-resize, pointer, se-resize, sw-resize, text, wait, w-resize

2.    outline
Property ini mengatur garis tepi dari elemen secara global

Selektor{outline:#333333}

untuk warna bisa menggunakan warna hexadecimal lain atau value lain : dashed, dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick

3.    outline-color
Properti ini mengatur warna dari garis tepi suatu elemen

Selektor{outline:#333333}

untuk warna bisa menggunakan warna hexadecimal lain

4.    outline-style
Property ini untuk mengatur style dari garis tepi suatu elemen

Selektor{outline:dashed}

value lain : dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick

5.    outline-width
Property ini untuk mengatur sebeapa lebar garis tepi suatu elemen

Selektor{ outline-width:medium}

Value lain : thick, thin

Demikian artikel Pengenalan Kode Properti CSS saya,semoga bermanfaat.