Materi Lengkap CSS | Belajar CSS Untuk Pemula | PilipMulyadi.Blogspot.com
Materi Lengkap CSS
Pengertian CSS
CSS (Cascading Style Sheet) adalah aturan untuk mengatur sebuah element pada HTML agar sebuah web lebih terstruktur dan seragam.
CSS dapat mengendalikan atau mengatur ukuran gambar, border, Warna pada link, warna pada tabel, atau pada element lainnya.
Dan untuk penempatan CSS ada dua macam yaitu bisa di bawah tag <head> atau di dalam objek body sebuah tag HTML. Dan kali ini saya akan memberikan contoh penempatan element CSS berikut adalah contohnya :
Untuk contoh yang pertama saya akan menerangkan penempatan element CSS dibawah tag <head> yaitu seperti gambar di bawah ini.
Gambar diatas adalah contoh penempatan atau tataletak penulisan element/tag CSS di bawah tag <head> yang dimana kita harus menggunakan simbol { } agar CSS dapat berfungsi untuk mengatur element HTML. Selain mengatur warna pada objek kalian juga bisa menambahkan border, bayangan, dan mengatur ukuran sebuah objek yang ingin kalian atur. Untuk lebih jelasnya perhatikan gambar di bawah ini.
Pada gambar diatas adalah contoh penulisan berbagai kode pada CSS untuk mengatur sebuah element pada HTML. Kalian bisa mengatur atau merubah pixel (px) pada sebuah aturan CSS.
Dan saya akan menjelaskan satu persatu aturan atau kode pada CSS tersebut yaitu sebagai berikut.
1). Color
Pasti kalian sudah tau arti dari color, yaitu untuk memberi sebuah warna pada objek HTML. Mungkin kalian sudah pernah belajar cara memberikan warna pada objek HTML, yaitu dengan cara menggunakan coding HTML dan kemungkinan cara tersebut lebih panjang dan ribet. Karena itu saya menyarankan kalian untuk menggunakan tag / element CSS agar lebih mudah simple dan tidak memakan waktu yang banyak.
2). Border
fungsi dari border ini adalah untuk memberikan bingkai pada sebuah objek dan mungkin kalian sudah pernah membuat bingkai / border dengan menggunakan HTML tetapi dengan melalui HTML hanya bisa memberikan border dan tidak bisa mengatur titik ketajaman pada border yaitu dengan menggunakan border-radius.
3). Border-radius
Border-radius berfungsi untuk mengatur titik ketajaman pada sebuah border semakin besar pixel yang diberikan maka border tersebut akan berubah dan bisa berbentuk lingkaran jika kalian memberikan pixel hingga 100px.
4).Background-color
Background-color berfungsi untuk memberikan warna pada latar belakang dan pasti kalian sudah pernah belajar cara memberikan background dengan HTML. Tetapi untuk Background-color CSS ini tidak bisa memberikan latar belakang dengan menggunakan foto atau wallpaper dan hanya bisa memberikan warna biasa.
5). Text-align
Text-align berfungsi untuk mengatur posisi pada sebuah objek dan kalian bisa menggunakan posisi yang kalian inginkan yaitu seperti : Center, left, right. Kalian bisa memilih salah satu yang kalian inginkan.
6). Box-shadow
Box-shadow berfungsi untuk memberikan bayangan pada sebuah border / bingkai dan kalian perlu 3 buah pixel agar bayangan tersebut muncul contoh : 1px 2px 3px atau 2px 4px 6px jika kalian hanya menggunakan 2 buah pixel maka bayangan tersebut tidak muncul sepenuhnya dan maka dari itu kalian perlu 3 buah pixel agar bayangan tersebut muncul sepenuhnya.
7). Text-shadow
Tidak berbeda jauh dengan box-shadow. Text-shadow memberikan bayangan pada sebuah text dan kalian juga membutuhkan 3 buah pixel sama seperti box shadow agar berfungsi dengan baik.
8). Padding
Padding berfungsi untuk mengatur ukuran sebuah objek atau bisa di bilang padingg = Width × height. Jadi padding ini memiliki 2 fungsi yaitu melebar dan meninggikan sebuah ukuran obejek maka dari itu kalian membutuhkan 2 buah pixel untuk menjalankannya contoh : 5px 5px atau 10px 10px. Tentukan pixel sesuai yang kalian inginkan
9). Font-family
Font-family berfungsi untuk memberikan atau mengatur jenis huruf sama hal nya dengan font face, tetapi anehnya mengapa untuk mengatur jenis huruf pada CSS menggunakan Font-family dan bukan font-face dan untuk itu saya kurang mengetahuinya dan yang jelas keduanya memiliki fungsi yang sama yaitu sama - sama dapat merubah jenis huruf.
10). Font-weight
Berfungsi untuk menebalkan sebuah huruf dengan menggunakan bold, mungkin kalian sudah pernah menebalkan huruf dengan HTML yaitu dengan tag <b>. Tetapi keduanya memiliki fungsi yang sama.
11). Font-variant
Berfungsi untuk untuk membuat variant pada sebuah huruf yaitu dengan menggunakan oblique pada sebuah font-variant / small-caps.
12). Font-Style
Font-style berfungsi untuk merubah atau mengatur huruf menjadi tebal, miring, dan memiliki garis bawah yaitu dengan menggunakan italic, bold, dan underline.
13). Font-Size
Font-size berfungsi untuk mengatur ukuran pada sebuah huruf sama halnya dengan HTML juga bisa mengatur ukuran huruf.
Ok tadi itu adalah fungsi dasar pada sebuah CSS dan selanjutnya saya akan menjelaskan tentang Div Class pada sebuah CSS.
Div Class
Div Class adalah sebuah element yang terdapat pada sebuah CSS dan dihubungkan dengan HTML agar Div Class bisa berfungsi. Div Class artinya adalah sebuah kelas yang mempunyai format nama terntu dan kalian bisa membuat format kelas kalian sendiri. Untuk membuat Div Class kalian memerlukan simbol / tanda baca titik (.) yang berfungsi sebagai kelasnya dan untuk format nama kelasnya itu bisa kalian buat sendiri dan bebas karna Div Class dapat mencakup seluruh halaman yang artinya bisa meliputi seluruh bagian halaman yang di isi. Ada dua macam cara penulisan Div Class yaitu : div.NamaKelas atau .NamaKelas yang artinya kalian bisa menuliskan div atau langsung nama format kelasnya asalkan ada symbol atau tanda baca titik. Daripada kalian bingung langsung saja kita ke contohnya. lihat contoh gambar berikut ini.
Hasil :
Pada gambar diatas adalah contoh penulisan Div Class dengan format nama kelas "mulyadi" dan jika kalian ingin membuatnya dengan nama kalian boleh saja asalkan ada tanda baca titik (.) agar Div Class bisa berfungsi. Untuk Div Class sendiri bisa di isi dengan Color, Padding, border, dan lain - lain.
Selanjutnya saya akan memberikan contoh cara mengatur sebuah tombol pada CSS. Dan pasti kalian sudah tau cara membuat tombol dengan HTML, tetapi melalui HTML tidak bisa memberikan warna dan mengatur sebuah tombol dan karena itu kalian memerulkan CSS untuk mengaturnya.
Styling Button
Untuk mengatur sebuah tombol dengan CSS kalian harus membuat kelas sama seperti Div Class. Untuk lebih jelasnya kalian bisa melihat contoh pada gambar berikut ini.
Pada gambar diatas adalah contoh cara membuat button / tombol dengan menggunakan HTML dan tombol tersebut belum diatur dengan CSS lalu bagaimana cara mengatur sebuah button atau tombol dengan CSS itu sangat mudah sekali kalian bisa mengikuti cara berikut ini.
Pada gambar diatas adalah sebuah contoh caara mengatur tombol atau button dengan CSS dan maka hsilnya akan seperti gambar dibawah ini.
Untuk styling button kalian juga bisa menambahkan warna yaitu color untuk merubah warna tulisan pada tombol dan untuk mengatur tombol kalian tidak perlu memakai border atau bingkai karena kalau kalian menggunakan border tombol tersebut tidak bisa bergerak.
Untuk selanjutnya saya akan menjelaskan cara styling form dengan CSS daan mungkin kalian sudah tau apa itu form. Form adalah sebuah element HTML yang berfungsi untuk membuat sebuah field text, button, checkbox, radio button, textarea, dan drop down menu.
Styling Form
Untuk mengatur sebuah form dengan CSS kalian tidak perlu membuat kelas seperti membuat button tetapi untuk mengatur sebuah form kalian hanya menuliskan sebuah objek didalam CSS sama halnya seperti membuat button kalian bisa menggunakan color, border, border radius, padding, dan lain - lain. Daripada kalian bingung, kalian bisa mengikuti contoh seperti gambar di bawah ini.
Pada gambar diatas adalah cara mengatur form dengan CSS dan untuk mengatur email dan password kalian bisa meng-copy paste kode CSS yang bertuliskan input[type="text"] dan merubah inputnya sesuai dengan type. Maka hasilnya akan seperti gambar di bawah ini.
Gambar diatas adalah hasil dari mengatur sebuah form dengan CSS dan kalian bisa mengatur field text seperti email dan password sendiri.
Dan selanjutnya saya akan menjelaskan cara mengatur sebuah link dengan CSS dan pasti kalian sudah pernah membuat link dengan HTML yaitu dengan tag <a href> tentu saja kalau dengan HTML kalian hanya bisa menambahkan link dan tidak bisa mengaturnya maka dari itu gunakanlah CSS untuk mengaturnya.
Styling Link
Untuk mengatur link dengan CSS kalian hanya memasukan objek link ke tag CSS. Kalian bisa mengikuti cara berikut ini.
Pada gambar diatas adalah contoh untuk mengatur link dengan CSS dan saya akan jelaskan satu persatu dari kode CSS yang dipakai untuk link yaitu :
a). Text-Decoration
Text-decoration berfungsi untuk menghilangkan garis bawah pada sebuah link dengan menggunakan "none" sehingga link tersebut menjadi seperti tulisan biasa pada umumnya.
b). a:hover
Berfungsi untuk merubah warna pada sebuah link dengan menggerakkan sebuah kursor atau mouse.
c). a:visited
Berfungsi untuk merubah warna pada link apa bila link tersebut di klik dan di tekan lama dengan mouse.
d). a:active
Berfungsi untuk merubah warna pada link apabila link tersebut di klik.
Ok jadi itulah cara menggunakan CSS di bawah tag <head> dan selanjutnya saya akan menjelaskan cara menulis kode CSS pada objek body. Berikut adalah cara menggunakan kode CSS di dalam objek body perhatikan gambar dibawah ini.
Pada gambar diatas adalah contoh penempatan atau penulisan CSS didalam objek body HTML. Kalian bisa menambahkannya dengan background color, border, dan lain - lain. Untuk Menuliskan kode CSS di dalam objek body HTML kalian tidak perlu menggunakan simbol { } untuk menjalankannya.
Ok jadi itulah cara menggunakan kode CSS dengan mudah dan mohon maaf bila ada kesalahan dalam membuat materi. Sekian dan terimakasih
Comments
Post a Comment