Berikut ini adalah dasar- dasar tata letak kode CSS Front-End yang biasa digunakan untuk pengembangan website. Kode CSS tersebut akan di gabungkan dengan kode html.
HTML dan CSS bisa sangat nyaman untuk pengaturan huruf dan tata letak halaman web dan juga dapat mengurangi banyak kode yang tidak perlu. Namun bagi kalian yang belum paham itu CSS, kalian dapat membaca Apa Itu CSS? Jenis Apa Saja Yang Ada?.
1. Text Settings
- font-size: untuk ukuran font
- font-style: untuk font style
- font-weight: untuk berat font
- Color : Untuk membuat warna
2. Hyperlink settings
- text-decoration: Tujuan utamanya adalah untuk mengubah garis bawah saat browser menampilkan tautan teks.
- underline: teks garis bawah
- overline: menggaris bawahi teks
- line-through: membuat coretan pada teks
- blink: membuat teks berkedip
- none: tidak menampilkan efek
3. Background
- Background color : Membuat warna background
- Background image : membuat background degan gambar bias any menggunakan url(URL)
- Background image repetition
background-repeat parameter :
- no-repeat: tidak ada pengulangan pada gambar
- repeat-x: membuat beckground secara horizontal
- repeat-y: membuat beckground secara vertikal
Jika properti pengulangan gambar background tidak ditentukan, default gambar pada browser harus menggunakan horizontal atau vertikal.
- Background Image Is Fixed
Background Gambar pada posisi fixed atau tetap akan mengontrol apakah gambar background bergulir dengan pengguliran halaman web. Jika properti gambar background tetap tidak disetel, gambar background default browser akan menggulir dengan menggulir halaman web. Untuk menghindari gambar background yang terlalu mewah untuk mengalihkan perhatian pengunjung saat menggulir, umumnya disetel sebagai tetap
Parameter :
- fixed: Saat halaman web digulir, gambar background relatif terhadap jendela browser
- scroll: Saat halaman web di-scroll, gambar background di-scroll bersamaan dengan jendela browser.
4. Tata Letak Block CSS
- Word spacing
word-spacing: jarak spasi
- Letter spacing
letter-spacing: Spasi huruf
- text-align
Parameter Text aligment
left: rata kiri
right: rata kanan
center: center
justify: rata kiri dan kanan
- Vertical alignment
vertical-align: parameter
top: Peletakan diatas
bottom: Peletakan dibwah
text-top: Sejajarkan bagian atas relatif terhadap teks
text-bottom: Ratakan relatif ke bagian bawah teks
baseline: Keselarasan dasar
middle: center
sub: tampilan dalam bentuk subscript
super: tampilan dalam bentuk superscript
- Text Indent
text-indent: Jarak indensi
12px setara dengan jarak teks
- Space
white-space: parameter
normal
pre reserved
nowrap not wrap
- Display style
display: parameter
Parameter value range:
block: elemen level blok, membungkus garis sebelum dan sesudah objek
inline: nowrap sebelum dan sesudah objek
list-item: wraps line sebelum dan sesudah objek menambahkan bullets
none: no display
5. Tata Letak Box CSS
- height
- width
- padding
- margin
- float (floating): memungkinkan elemen tingkat blok diatur dalam satu baris, seperti menu horizontal.
- Clear : Membersihakan float
6. Border
- border Style
border style parameter
Parameters for border style:
none: tidak ada border
dotted: border putus putus
dashed: border dengan garis panjang dan pendek
solid: membuat border solid line
double: membuat border double line
- Width
Parameter lebar border
- Color
Parameter warna boder
7. Tata Letak List CSS
list-style-type
Karakter daftar browser yang berbeda mungkin berbeda yang dapat mempengaruhi halaman web. Sehingga sebagian besar daftar di halaman web ditampilkan dengan gambar latar belakang.
8. Cursor
cursor: Parameter bentuk kursor
CSS cursor shape parameter table:
Mouse Shape: CSS Code
style="cursor:hand" hand shape
style="cursor:crosshair" cross
style="cursor:text" text shape
style="cursor:wait" Hourglass
style="cursor:move" Crosshairs:
style="cursor:help" question mark
style="cursor:e-resize" right arrow
style="cursor:n-resize" up arrow
style="cursor:nw-resize" upper left arrow
style="cursor:w-resize" left arrow
style="cursor:s-resize" down arrow
style="cursor:se-resize" right down arrow
style="cursor:sw-resize" lower left arrow9. Tata Letak Reset CSS
Karena browser yang berbeda mengurai tag secara berbeda, reset CSS dapat membuat tag memiliki efek yang sama di bawah browser yang berbeda. Mengurangi kemungkinan masalah yang disebabkan oleh gaya default.
reset CSS biasanya ditulis di reset.css, seperti :
/* Hapus batas dan ubah font default */
body, div, dl, dt, ul, li, h1, h2, h3, h4, h5, h6, input, form, a, p, textarea {
margin: 0;
padding:0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* menghilangkan titik kecil di depan list */
ul, ol, li {
list-style: none;
}
/* menghilangkan garis bawah hyperlink */
a {
text-decoration: none;
}
/*hapus batas gambar*/
img {
border: none;
}
/
*clear float*/
.clearfloat {
zoom:1;
}
.clearfloat:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}10. Contoh Tata Letak CSS Dan Sintaks Dasarnya
Kode CSS dapat dibuka dan diedit di editor teks apa pun. Oleh karena itu, terlepas dari apakah pembaca memiliki latar belakang pemrograman, CSS akan terasa sangat sederhana saat pertama kali terpapar. Bagian ini akan memperkenalkan sintaks dasar CSS.
Gaya adalah unit sintaksis terkecil dari CSS, dan setiap gaya berisi dua bagian: Selector dan declaration (rule).
- Selector
Selector memberi tahu browser objek mana di halaman yang akan diterapkan gaya. Objek ini bisa berupa tag, semua objek halaman web, kelas atau nilai id tertentu dan seterusnya. Saat browser mem-parsing style ini, itu membuat tampilan objek sesuai dengan pemilih.
- Declaration
Mungkin ada satu atau lebih deklarasi yang memberi tahu browser cara merender objek yang ditentukan oleh pemilih.
Deklarasi harus berisi dua bagian: atribut dan nilai atribut dan titik koma digunakan untuk menandai akhir deklarasi. Titik koma dapat dihilangkan untuk deklarasi terakhir dalam sebuah style.
Semua deklarasi ditempatkan di dalam sepasang kurung kurawal { }, dan kemudian keseluruhannya segera mengikuti pemilih.
- Property
Properti adalah opsi penataan gaya yang disediakan oleh CSS. Nama atribut terdiri dari satu atau lebih kata yang dihubungkan dengan tanda hubung. Dengan cara ini, sangat intuitif untuk mengekspresikan efek gaya yang akan diatur oleh properti.
- Nilai Atribut (Value)
Nilai properti digunakan untuk menampilkan parameter efek properti. Ini termasuk nilai dan unit atau kata kunci.
Contoh 1 : Menentukan ukuran font halaman web sebagai 12 piksel dan warna font abu-abu gelap, Anda dapat mengatur style sebagai berikut.
body { ukuran font: 12px ; warna: #CCCCCC ; }Contoh 2 : Menentukan warna latar belakang teks paragraf dengan warna ungu, Anda dapat menentukan style berikut berdasarkan style di atas.
body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }Karena bahasa CSS mengabaikan spasi kecuali spasi di dalam selektor. Spasi dapat digunakan untuk memformat kode sumber CSS, dan kode di atas dapat dipercantik sebagai berikut:
body {
font-size: 12px;
color: #CCCCCC;
}
p {
background-color: #FF00FF;
}Dengan cara ini, ketika membaca kode sumber CSS. Sekilas jelas dan lebih mudah yang tidak hanya nyaman dibaca, tetapi juga lebih mudah dirawat.
Komentar atau penjelasan diperlukan dalam bahasa apa pun. Contoh penggunaan HTML <!–Komentar–>. Untuk komentar dan penggunaan CSS /* Komentar */untuk komentar.
Contoh 3 Komentar berikut dapat dibuat untuk style di atas.
body { /*properti dasar halaman*/
font-size: 12px;
color: #CCCCCC;
/*Properti dasar teks paragraf */
p {
background-color: #FF00FF;
}Dengan contoh diatas makan akan mempermudah mengetahui properti CSS yang digunakan.
Kesimpulan
Diatas adalah penjelasan mengenai Dasar Tata Letak CSS Front-End Yang Biasa Digunakan Web Development yang dibagikan Labkom99. Dengan begitu akan mempermudah kita untuk belajar menggunakan CSS dengan cepat. Semoga bermanfaat
