CSS Basic
CSS Basic
Apa itu CSS?
CSS adalah kepanjangan dari Cascading Style Sheets yang berguna untuk menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa markup. Ada banyak hal yang dapat Anda lakukan menggunakan CSS, Anda dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang dipakai.
Cara Menambahkan CSS?
Inline
Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML.
Internal
Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag <style> </style> dan diletakkan di bagian elemen head atau tag <head> dari laman web.
External
External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe konten laman web. External CSS dapat diaplikasikan pada lebih dari satu laman web sehingga semua laman web akan memiliki tampilan atau desain yang seragam.
Stuktur Dasar CSS
Struktur kode CSS terdiri dari tiga bagian:
Selektor;
Blok Deklarasi;
Properti dan nilanya.
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur.
Blok deklarasi adalah tempat kita menuliskan atribut-atibut CSS yang akan diberikan ke pada selektor.
Properti merupakan atribut atau sekumpulan aturan yang akan diberikan kepada elemen yang dipilih.
CSS Selectors
Selector Tag
Selektor Tag disebut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag.
body {
}
Selector Class
Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan tanda titik di depannya.
.container {
}
Selector ID
Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja.
Selektor ID ditandai dengan tanda pagar (#) di depannya.
#content-img {
}
CSS Comments
Dalam bahasa pemrograman komentar biasanya bisa dimanfaatkan untuk informasi sebuah fungsi atau proses didalam kode-kode yang sudah disusun, guna untuk mempermudah programmer lainnya memahami sifat atau maksud dari proses tersebut.
Komentar akan diabaikan oleh browser.
Komentar pada CSS berada di dalam elemen <style>. Diawali dengan /* dan diakhiri */
/* ... Komentar ... */
CSS Colors
Property color dalam CSS dapat berfungsi untuk memberi atau mengubah warna tulisan pada sebuah Tag atau Element HTML. CSS juga memungkinkan kamu untuk menggunakan sekitarnya 16.777.216 warna. Warna pada CSS ditentukan menggunakan nama warna standar, atau nilai RGB, HEX, HSL, RGBA, HSLA.
CSS Backgrounds
Properti background CSS digunakan untuk menentukan efek latar belakang untuk sebuah elemen.
Dalam bab ini, Anda akan mempelajari tentang properti latar belakang CSS berikut:
background-color
Untuk merubah warna background, kita bisa menggunakan kode background-color. Jika ingin merubahnya menggunakan gambar, kodenya adalah background: url(‘nama file’); (contoh background: url('background.jpg'); )
background-image
Property CSS ini merupakan properties yang bisa Anda gunakan untuk mengatur dan menentukan sebuah gambar yang akan dgunakan sebagai background dari suatu elemen atau selector.
background-repeat
Properti background-repeat berfungsi untuk mengatur apakah background image yang kita terapkan akan ditampilkan secara berulang atau hanya sekali atau satu buah gambar saja.
background-attachment
background-attachment merupakan properti yang digunakan bersamaan dengan background-image. dimana fungsi dari properti tersebut untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap.
background-position
background-position merupakan properti yang mengatur dan mengarahkan posisi gambar dari penggunaan background-image.
CSS Borders
Border dalam CSS berfungsi untuk membuat garis tepi sebuah objek HTML.
border-color - spesifik untuk warna border.
border-style - jenis border, seperti : solid, dashed line, double line
border-width spesifik untuk ketebalan garis border.
CSS Margins
Margin digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Margin memiliki 4 macam penjabaran yang dapat digunakan secara terpisah sendiri-sendiri, yaitu: margin-top , margin-right , margin-bottom dan margin-left .
CSS Padding
Hampir sama seperti Margin, Padding digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian dalam (tepi garis dalam).
CSS Height and Width
Pada CSS sendiri Anda bisa mengatur lebar dan tinggi pada elemen HTML dengan properti width dan height, width yang berarti lebar dan height yang berarti tinggi. Dengan begitu Anda bisa menyesuaikan ukuran lebar maupun tinggi sesuai dengan kebutuhan Anda. Secara default ukuran width dan height tergantung pada konten didalamnya.
CSS Text
Dasar mengatur teks pada css biasanya seperti posisi perataan teks, jarak spasi dan lain sebagainya, semua itu bisa dilakukan dengan css. Berikut ini properti-properti yang bisa digunakan untuk memanipulasi atau mengatur teks pada css agar menjadi sesuai dengan yang kita inginkan.
Tags:
Populer
Ready to start?
Download our mobile app. for easy to start your course.
