DasarCSS

LAPORAN PRAKTIKUM

Mata Kuliah : Pemrograman WEB

Dosen Pengampu : Rizki Wahyudi, M.Kom.

Disusun Oleh :

Suroso 16.12.0077

Robby Ari Wibowo 16.12.0120

Sofi Maulana Dhuha 16.12.0218

Wildan Abdilah 16.12.0121

Wibi Afif A 16.12.0233

Priski Dajar Eksandi 16.12.0156

PROGRAM STUDI SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM PURWOKERTO

2016/2017

STMIK Amikom Purwokerto

Program Studi Sistem Informasi

A. MENJELASKAN TENTANG CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Penulisan CSS ada beberapa cara, yaitu :

v Menggunakan Universal Selector

v Menggunakan Element Type Selector

v Menggunakan ID Selector.

v Mengunakan Class Selector.

v Mengguakan Atribut Selector.

CSS diperlukan karena kebutuhan akan halaman web yang semakin kompleks. Pada awalnya bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru.

Ada tiga metode untuk menginputkan kode CSS pada file HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheet

Ø Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, seperti pada contoh text P berikut :

Ø Metode Internal Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style></style>. Tag style ini harus berada pada bagian <head> </head>dari halaman HTML. seperti pada contoh berikut yang titik-titik adalah tempat menuliskan file CSS kita :

Metode External Style Sheets digunakan untuk membuat kode CSS kedalam sebuah file tersendiri yang terpisah dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal memanggil file CSS tersebut. seperti pada contoh berikut :

Buat file baru dengan nama style.css Hubungkan dengan text link di dlm file HTML

Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh tag h1 yang memiliki atribut class=judul.

Jenis-jenis selector:

v Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk ‘mencari’ semua tag yang ada.

Contoh :

v Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

Contoh :

v Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai.

Contoh :

v ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id.

Contoh :

v Attribute selector Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.

Contoh :

Contoh CSS pada template sebuah BLOG dengan tema TAMPILAN DINAMIS

v <style> = adalah pembukaan untuk sebuah file css.

v id = nama ID ‘template-skin-1 adalah ID dari file CSS tsb, yang bertipe ‘text’ atau ‘css’.

v Body = adalah selector untuk menunjukan bahwa bagian ini yang akan di hias.

v Min-width = menunjukan lebar minimal dari bodi adalah 960px.

v .column-center-outer = adalah class dari sebuah script html yang akan di hias pada file css ini.

Margin-top = adalah jarak antara border dengan browser atas atau top, dengan lebar margin 46px.

v .content-outer, .content-fauxcolumn-outer, .region-inner = adalah 3 class yang di maksudkan untuk menghias ketiga class tersebut, yang dipisahkan dengan koma.

v Min-width = adalah lebar minimal dari ketiga class tsb.

v Max-width = adalah lebar maksimal dari ketiga class tsb.

v _width = adalah lebar dari ketiga class tsb, yaitu 960px.

v .main-inner .columns = berbeda dengan yang diatas disini hanya menghias bagian class columns yang posisinya berada di bawahnya class main-inner.

v Padding-left = adalah jarak antara border dengan content sebelah kiri yang valuenya adalah 0.

Padding-raight = adalah jarak antara border dengan content sebelah kanan yang valuenya adalah 310px.

v main-inner .fauxcolumn-center-outer = disini hanya menghias bagian class .fauxcolumn-center-outer yang posisinya berada di bawahnya class main-inner.

v Dengan kekiri ‘left’ 0, dan kekanan ‘right’ 310px.

v Pada bagian ini hampir sama dengan yang di atas yaitu menghias bagian class fauxcolumn-left-outer dan fauxcolumn-right-outer yang posisinya berada dibawah class main inner. Yang left dengan lebar 0, dan yang right dengan lebar 310px.

v Pada bagian ini hampir sama juga dengan yang di atas yaitu menghias bagian class column-left-outer dan column-right-outer yang posisinya berada dibawah class main inner. Yang left dengan lebar 0, kekanan 100%, margin-left -0, dan yang right dengan lebar 310px, margin-right -310px.

v #layout = # adalah simbol dari ID, berarti id layout lah yang akan dihias kali ini.

v Min-width = dengan lebar minimal 0

v #layout .content-outer = kali ini bukan lah ID layout yang akan dihias melainkan class dibawahnya yaitu class content-outher. Dengan lebar minimal 0, dan labar 800px.

v #layout .region-inner = kali ini juga bukan lah ID layout yang akan dihias melainkan class dibawahnya yaitu class region-inner. Dengan lebar minimal 0, dan labar auto ‘menyesuaikan’.

v </style> = adalah tag penutup dari file CSS.

v Trimakasih. J

Cari Blog Ini

Belajar CSS

DasarCSS

Komentar

Posting Komentar