Please enable JavaScript.
Coggle requires JavaScript to display documents.
Catatan Belajar TamaAndy: CSS Website Design - BuildwithAngga.com - Coggle…
Catatan Belajar TamaAndy: CSS Website Design - BuildwithAngga.com
1. Singkatan CSS
: Cascading Style Sheets
2. Pengertian CSS
: membantu membuat website lebih menarik lagi daripada website yang hanya menggunakan html
3. Pembahasan Internal CSS
: ditempel dalam file .html dalam <head><style> </style></head> dan hanya berlaku dalam file html itu sendiri
Class dengan tanda [.] dan id memakai tanda [#]
CSS internal disematkan di dalam <head> lalu dipanggil kembali di dalam <body> biasanya dalam <div>
contoh script di <head>
|
contoh script di <body>
|
hasilnya
4. Inline CSS
: adalah CSS yang ditempelkan langsung ke dalam divnya,
scriptnya
|
hasilnya
5. CSS Internal
: adalah file CSS yang terpisah dengan file .html. CSS eksternal berguna untuk me-manage style dari banyak halaman .html sekaligus.
file main.css
|
Di HTMLnya
6. Weight and Height
:
penerapan
-
hasilnya
kurang pas di ukurannya,
menggunakan background
-
hasilnya
kurang pas juga maka gunakan
overflow:hidden
-
dan hasilnya
, selanjuntnya membuat header penuh kanan-kiri dengan cara
ini
sehingga tampilannya seperti
ini
7. Padding dan Margin
: padding adalah jarak object ke background sedangkan margin adalah jarak antar object element misal antar <div> |
penggunaan padding
,
hasilnya
|
sedangkan penggunaan margin seperti ini
,
hasilnya
8. Float
: untuk mensejajarkan, ada float: none; , float: left; , float: right; |
menambahkan class logo dan class navigation
|
menambahkan float: left; pada .header .logo pada main.css
,
dan inilah hasilnya
|
menambahkan float: right; pada .header .navigation di main.css
,
sehingga hasilnya
|
karena jaraknya terlalu jauh sehingga perlu menggunakan container seperti ini di index.htmlnya
,
sehingga tampilannya seperti ini
|
ternyata tampilannya kurang ke tengah sehingga menggunakan ini
,
dan hasilnya
9. Mensejajarkan menu navigation
:
menu diubah dari vertical menjadi horizontal
|
menambahkan script float: right;
,
dan hasilnya seperti ini
| posisi susunannya terbalik harusnya home di bagian paling kiri, sehingga ditambahkan float: left;
dan hasilnya
|
karena susunan menunya terlalu rapat maka diberikan margin pada li di menunya
dan
hasilnya
|
kita ubah font-size li dari menu navigation menjadi lebih besar
|
tanda titik <ul> dihilangkan dengan cara ini
|
penambahan margin atas pada menu agar lebih ke tengah
|
ganti warna "a" yang ada di navigation
|
kita juga hilangkan underlinenya
10. Pseudo-Classes
:
lalukan ini untuk menambahkan effect hover pada menu
|
dan ini untuk effect visited
11. Local Fonts
: Google Fonts
letakkan file tffnya disini
,
main.css ditambah kode ini
,
di .header .logo kita bisa menambahkan kode ini
dan
hasilnya seperti ini
12. Font URL Google
: Tidak perlu upload file tff |
ke google fonts, pilih, select this style
|
copy scriptnya
|
tempatkan di <head></head>
|
catat nama fontnya
dan
gunakan di main.css
13. Border radius
:
kita kosongkan <body></body> sehingga menjadi seperti ini
dan
hasilnya
|
membuat icon kelas di main.css
lalu buat script container di index.htmlnya
dan
hasilnya
,
selanjutnya menambahkan properti css untuk parent
dan
hasilnya
|
dengan tujuan agar lebih menarik ditambahkan border radius
dan
hasilnya
,
bisa juga memakai % instead of px
14. Background Image:
:
kita bisa menambahkan background image pada suatu object
,
butuh background-size: cover; agar gambarnya dapat menyesuaikan diri
,
kalau ingin full keluar semua bisa edit ukuran icon kelas
15. Gradient Background
:
kita tambahkan height pada header
,
di header logo kita tambahkan warna
,
selanjutnya di .header kita tambahkan liner-gradient
,
kita bisa mengganti dari linear ke radial
,
bisa juga menentukan arah dari liner-gradient to left, to right, to top dan to bottom
,
bisa juga menggunakan hex colour