CSS Pemrograman Web Kelas X

06.42 |

MATERI CSS

PENGERTIAN CSS

CSS (Cascading Style Sheet) Adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa HTML.

Jika menggunakan CSS sintaks yang digunakan adalah selector, property dan value. Berikut adalah penulisan kode CSS yang dibuat menjadi 3 bagian yaitu:

Selector

Selector pada CSS sama tag atau komponen pada HTML yaitu yang terdapat antara tanda < dan > misalnya <h1>, <p>, <b>

Property

Property pada CSS sama dengan atribut pada HTML yaitu berfungsi untuk member nilai dari selector

Value

Value adalah nilai yang kita berikan kepada property

DALAM CSS ADA ISTILAH CLASS SELECTOR DAN ID SELECTOR

· CLASS SELECTOR

Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya dua type paragraf, peragraf pertama menggunakan align-left dan yang paragraf satu lagi menggunakan align-center.
Contoh Penggunaan atribut class di dalam HTML :

<p class=”left”>
Paragraf ini rata kiri
</p>
<p class=”left”>
paragraf ini rata tengah
</p>

maka penulisan pada file CSS-nya menjadi :

.left {text-align: left}
.center {text-align: center}

Keterangan :

Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.)
Tidak dianjurkan memberi nama class dengan angka
Nama class tidak boleh menggunakan spasi, jika nama class lebih dari dua suku kata maka berikan tanda hubung (-) atau (_)

· ID SELECTOR

ID selector digunakan dengan tujuan mendefinisikan per-elemen dasar. setiap halaman id selector hanya boleh digunakan dengan satu id unik, itulah yang menjadi perbedaannya dengan class selector. Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. tetapi dengan id selector kita hanya diperbolehkan memanggil satu id untuk satu elemen yang sama.
Contoh:

<p id=”tebal”>
Paragraf ini ditulis dengan huruf tebal dan warna merah
</p>
<p id=”miring”>
Paragraf ini ditulis dengan huruf miring dan warna biru
</p>

maka penulisan pada file CSS-nya menjadi :
#tebal { font-weight : bold;
color : red; }
#miring { font-style : italic;
color: blue; }

Keterangan :

pada penulisan nama id dalam file CSS diawali dengan tanda pagar (#)
Nama id dapat ditulis dengan angka, huruf atau garis bawah
Karakter pertama sebaiknya huruf atau garis bawah (_)

PENULISAN KOMENTAR DALAM CSS
Dalam pemograman kita mengenal istilah komentar yaitu bermanfaat untuk memberi penjelasan pada bagian tertentu dari kode yang kita tulis. dan tulisan ini tidak akan ikut dieksekusi oleh browser.
Cara memberi komentar pada CSS adalah diawali tanda /* dan di akhiri tanda */

Contoh :

.left {text-align: left}
.center {text-align: center}/*ini adalah komentar*/

MENGATUR FORMAT FONT

1. MODEL HURUF
Model yang umum dipakai adalah teks miring (italik) atau tebal (bold). Umumnya program browser mempergunakan tag em untuk huruf italik dan tag strong untuk huruf tebal. Misalnya anda ingin menuliskan kode em agar huruf tampil berbentuk italik dan tebal dan menuliskan kode strong untuk huruf tebal uppercase, perintahnya dituliskan sebagai berikut :

em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; }

bila gagal dapat ditambahkan perintah ini :

h2 { text-transform: lowercase; }

2. MENGATUR UKURAN HURUF
Kebanyakan program browser mempergunakan huruf yang lebih besar untuk heading yang penting sifatnya. Bila anda menimpa ukuran defaultnya, anda menempuh resiko yaitu huruf menjadi tampak lebih kecil khususnya bila anda mempergunakan ukuran yang anda tambahkan tersebut dengan ukuran titik (point). Karenanya anda disarankan untuk melakukan pengaturan ukuran huruf dengan ukuran yang sama.

Contoh berikut mengatur ukuran heading dalam persen relatif terhadap ukuran teks normal.

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 100%; }

3. MENGATUR JENIS HURUF
Bisa saja jenis huruf favorit anda tidak bisa ditampilkan oleh berbagai jenis browser. Untuk mengatasi hal ini anda dapat menuliskan beberapa jenis huruf yang tidak dapat ditampilkan oleh hampir semua browser. Ada beberapa jenis huruf generik yang dijamin cocok, sehingga anda kami sarankan untuk mengakhiri daftar perintah HTML anda dengan salah satu jenis huruf berikut : serif, sans-serif, cursive, fantasy, atau monospace, contoh :

body { font-family: Verdana, sans-serif; }

h1,h2 { font-family: Garamond, Times New Roman, serif; }

Dalam contoh ini heading penting akan ditampilkan dalam bentuk huruf Garamond, bila gagal maka akan ditampilkan dalam bentuk Times New Roman, dan bila juga masih tidak dapat tampil, maka akan tampil sebagai huruf serif. Teks paragraf akan ditampilkan dengan huruf Verdana atau bila masih tidak tampil juga, maka browser masih dapat menampilkannya dengan jenis huruf standar sans-serif.

CARA MENGHINDARI MASALAH HURUF DAN BATAS TEPI HALAMAN WEB

Pertama pergunakan elemen p untuk mencegah teks pada body tulisan yang tidak dapat ditampilkan dengan baik.Contoh :

<h2>Spring in Wiltshire</h2>

Blossom on the trees, bird song and the sound of lambs bleating in the fields.

Teks yang ditulis mengikuti sebuah heading dapat menimbulkan akibat tampilan jenis huruf yang berbeda pada beberapa jenis program browser. Anda disarankan segera menutup teks pada paragraf tersebut. Contoh :

<h2>Spring in Wiltshire</h2>

<p>Blossom on the trees, bird song and the sound of lambs bleating in the fields.</p>

Kedua pergunakan selalu elemen pre ketika anda menuliskan pengaturan jenis huruf yang anda pergunakan.

pre { font-family: monospace; }

Ketiga pergunakan elemen p dan ul pada waktu mengatur jenis huruf untuk heading. Khususnya ketika anda melakukan pengaturan border atau warna halaman web anda dengan elemen div. Beberapa jenis program browser tidak dapat melakukan pengaturan huruf dengan baik dan cenderung lupa sehingga huruf heading anda tampak menjadi huruf standar saja. Untuk menghindari hal ini anda dapat menuliskan perintah HTML sebagai berikut :

h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

PROPERTY DALAM CSS

· 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

ATURAN PENULISAN DALAM CSS

1. INTERNAL CSS
yaitu dengan menuliskan secara langsung script CSS kedalam file HTML.

Contoh :
<html>
<head>
<title>CSS ku</title>
<style type=”text/css”>
p {color: blue;}
body {background-color: green;}
</style>
</head>
<body>
<p>pengenalan CSS</p>
</body>
</html>

2. EXTERNAL CSS
yaitu dengan cara kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan ditempatkan atau diletakkan di folder lain atau di folder yang sama dengan file html tersebut. Browser akan membaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS.

Contoh :
<html>
<head>
<title>CSSku</title>
<link rel=”stylesheet” type=”text/css” href=”file.css”/>
</head>
<body>
<p>pengenalan CSS</p>
</body>
</html>

3. INLINE CSS
yaitu dengan menuliskan secara langsung script CSS kedalam tag HTML.

<title>CSS ku</title>
</head>
<p style=”background: purple; color: blue;”>pengenalan CSS</p>
</body>
</html>