Universitas Putra Indonesia “YPTK” Padang

Apa Itu CSS ?

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah
satu kode pemrograman yang bertujuan untuk menghias dan mengatur
gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS
adalah sebuah teknologi internet yang direkomendasikan oleh World Wide
Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan
di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS
telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG
(Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau
juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain.
Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur
fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan
meningkatkan Kemampuan CSS2 ke CSS3.

Universitas Putra Indonesia “YPTK” Padang

Aturan Penulisan CSS

Aturan penulisan CSS berisi set intruksi yang memerintahkan

browser untuk mengikuti aturan dan mengubah tampilan
elemen XHTML berdasarkan pada nilai-nilai yang diberikan.

Struktur Penulisan :

Universitas Putra Indonesia “YPTK” Padang

Contoh Atribut Dalam CSS Beserta Fungsinya
Font-size : Digunakan untuk menentukan ukuran font.
Font-height : Digunakan untuk ketebalan huruf.
Font-family : Digunakan untuk memiih jenis font.
Font-style : digunakan untuk membuat font italic atau tidak.
Text-decoration : Digunakan untuk mendekorasi text
Direction : Digunakan untuk mengatur direksi teks
Text Shadow : Digunanakan untuk menambah bayangan pada teks
Text-transform : Digunakan untuk menentukan besar kecilnya huruf.
Letter-spacing : Digunakan untuk memberikan tambahan space antara huruf.
Word-spacing : Digunakan untuk memberikan tambahan space antara kata.
Line-height : Digunakan untuk menetukkan tinggi baris diantara text.
Text-align : Digunakan untuk mengatur posisi text pada element secara
horizontal.
text-align:left : untuk perataan teks kiri
text-align:right : untukperataantekskanan
text-align:center : untukperataantekstengah
text-align:justify : untukperataantekskanandankiri

Universitas Putra Indonesia “YPTK” Padang

Contoh Atribut Dalam CSS Beserta Fungsinya (Lanjutan...)
Vertical-align : digunakan untuk mengatur posisi text pada element secara vertical .
Color : digunakan untuk mengatur warna pada teks yang dibuat.
Backgorund-color : Digunakan untuk menentukan warna latar belakang element HTML.
Backgournd-repeat : Digunakan untuk menentukan perulangan penampilan image.
Background-position : Menentukkan posisi dari background.
Background : Digunakan untuk menentukan apakah background.
Border : Property ini digunakan untuk membuat bingkai disekitar element.
Border-width : Digunakan untuk menetukkan ketebalan bingkai.
Border-style : Digunakan untuk menetukkan bentuk bingkai.
Border-color : Digunakan untuk menentukkan warna bingkai.
Border-top : Digunakan untuk mengatur jenis style border pada bagian atas selector
Border-bottom : Digunakan untuk mengatur jenis style border pada bagian bawah selector
Border-left : Digunakan untuk mengatur jenis style border pada bagian kiri selector
Border-right : Digunakan untuk mengatur jenis style border padabagian kanan selector
Boreder-collapse : Menetapkan apakah sel tabel harus memiliki perbatasan mereka sendiri atau
berbagi perbatasan.
Table-layout : Menetukkan lebar dari table yang akan dihitung.
Visibility : Menetukkan apakah element tersebut terlihat.
Volume : Digunakan untuk menentukkan rata-rata dari suara volume.
Height : Menentukkan tinggi suatu elemen
Width : Menentukkan lebar dari suatu elemen.
Margin : Digunakan untuk memberikan spasi disisi luar element.
Padding : Digunakan untuk memberikan spasi pada sisi dalams ebuah element.

Universitas Putra Indonesia “YPTK” Padang

Cara Penulisan CSS

 Inline Style
Inline style adalah penerapan kode css pada satu elemen HTML didalam
satu halaman HTML, dengan cara ini kita bisa langsung memberikan style
dengan cara memasukkan kode css pada atribut tag HTML. Atribut yang
digunakan untuk menyisipkan kode css adalah atribut style.

 Embedded Style/Internal atau Eksternal Styles

Jika inline style hanya bisa digunakan dalam satu elemen HTML dalam satu
halaman HTML, maka embedded style bisa digunakan dalam beberapa
elemen HTML. Meskipun bisa digunakan dalam beberapa elemen HTML,
embedded style hanya bisa diterapkan hanya pada satu halaman HTML.

Universitas Putra Indonesia “YPTK” Padang

 Contoh CSS Inline Style

Skrip HTML Biasa

<p> Paragraf kesatu nih, ingin berubah warna biru </p>
<p> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru
juga </p>

Skrip HTML Dengan CSS Inline Style

<p style="color: blue;"> Paragraf kesatu nih, ingin berubah warna biru</p>
<p style="color: blue;"> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin
berubah warna biru juga </p>

Universitas Putra Indonesia “YPTK” Padang

 Contoh Embedded Style/Internal Styles

Skrip HTML
<html>
<head>
<title>Cara Menggunakan CSS</title>
<style type=“text/css”> p{color:blue;} </style>
</head>
<body>
<p>Paragraf kesatu nih, ingin berubah warna biru</p>
<p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru
juga</p>
</body>
</html>

Universitas Putra Indonesia “YPTK” Padang

 Contoh Embedded Style/Eksternal Styles

Ini adalah metode yang bisa digunakan untuk merubah style

pada semua elemen di semua page, cara ini mengharuskan
kita untuk membuat file CSS. Setelah kita membuat file CSS,
maka file tersebut kita panggil dalam tag <link>.

Satu file CSS untuk semua file HTML

Universitas Putra Indonesia “YPTK” Padang

 Contoh Embedded Style/Eksternal Styles

Skrip HTML

<html>
<head>
<title>Cara Menggunakan CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<p>Paragraf kesatu nih, ingin berubah warna biru</p>
</body>
</html>

Universitas Putra Indonesia “YPTK” Padang

 Perbedaan Selector ID dan Class Pada CSS

ID dan Class yang sering kita temui dalam setiap elemen website
sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang
mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari
elemen, ya walaupun ada sendiri property "Name" yang khusus mengatur
nama dari elemen tersebut.

ID
Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada
halaman website, sama halnya seperti National ID, atau nomor KTP yang
hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan
selector ID.
 Pemberian ID pada suatu elemen boleh menggunakan kata atau angka
apa saja
 Tidak boleh ada ID lebih dari satu
 Tidak boleh diawali oleh angka
 Tidak boleh mengandung special characters (~ ! @ # $ %)

Universitas Putra Indonesia “YPTK” Padang

Penulisan pada HTML contohnya seperti :

<div id="header">
Pada contoh diatas menggunakan id "header".

Penulisan style atau CSS contohnya seperti :

#header{propertycss: valuecss;}
Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.

Universitas Putra Indonesia “YPTK” Padang

CLASS
Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan
yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan
selector Class :
 Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa
saja
 Class bisa digunakan dilebih dari satu elemen
 Bisa menggunakan lebih dari satu nama Class pada satu elemen
 Tidak boleh diawali oleh angka
 Tidak boleh mengandung special characters

Penulisan pada HTML contohnya seperti :

<div class="sidebar sidebar1">Sidebar ke-1</div>
<div class="sidebar sidebar2">Sidebar ke-2</div>
Yaitu dapat menggunakan lebih dari satu nama Class sekaligus dalam satu elemen,
pada contoh class="sidebar sidebar1".

Penulisan pada CSS contohnya seperti :

.sidebar{float: left; background: white;}
.sidebar1{width: 100px}
.sidebar2{width: 200px}

Universitas Putra Indonesia “YPTK” Padang

Universitas Putra Indonesia “YPTK” Padang
Universitas Putra Indonesia “YPTK” Padang
Universitas Putra Indonesia “YPTK” Padang
Universitas Putra Indonesia “YPTK” Padang
Universitas Putra Indonesia “YPTK” Padang
Universitas Putra Indonesia “YPTK” Padang