Belajar CSS Outline, Text, Fonts, Icons, Links, List, Tables, Display

byJodi Setiawan

CSS

Materi Belajar CSS kali ini saya akan memberikan tutorial CSS seputar Outline, Text, Fonts, Icons, Links, List, Tables, Display, yuk kita simak materinya dibawah ini.

Belajar CSS Outline, Text, Fonts, Icons, Links, List, Tables, Display

1. Belajar CSS Outline

Gaya Kerangka CSS

Properti menentukan gaya garis besar, dan dapat memiliki salah satu nilai berikut:outline-style

  • dotted - Mendefinisikan garis besar putus-putus
  • dashed - Mendefinisikan garis putus-putus
  • solid - Mendefinisikan garis besar yang solid
  • double - Mendefinisikan kerangka ganda
  • groove - Mendefinisikan garis besar beralur 3D
  • ridge - Mendefinisikan garis bergerigi 3D
  • inset - Mendefinisikan garis besar inset 3D
  • outset - Mendefinisikan garis besar awal 3D
  • none - Mendefinisikan tidak ada garis besar
  • hidden - Mendefinisikan garis besar tersembunyi

Contoh berikut menunjukkan nilai yang berbeda:outline-style 

sumber Properti Kerangka CSS (w3schools.com)

2. Belajar CSS Text

CSS memiliki banyak properti untuk memformat teks.

PEMFORMATAN TEKS

Teks ini ditata dengan beberapa properti pemformatan teks. Judul menggunakan properti text-align, text-transform, dan color. Paragraf dijodarakan, diselaraskan, dan ruang antar karakter yang ditentukan. 

Warna Teks

Properti ini digunakan untuk mengatur warna teks. Warna ditentukan oleh:color

  • nama warna - seperti "merah"
  • nilai HEX - seperti "#ff0000"
  • nilai RGB - seperti "rgb(255,0,0)"

Lihatlah Nilai Warna CSS untuk daftar lengkap kemungkinan nilai warna.

Warna teks default untuk halaman didefinisikan dalam pemilih tubuh.

Warna Teks dan Warna Latar Belakang

Dalam contoh ini, kami mendefinisikan properti dan properti:background-colorcolor

Contoh CSSnya seperti ini

 

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

 

 sumber Teks CSS (w3schools.com)

3. Belajar CSS Fonts

Memilih font yang tepat untuk situs web Anda adalah penting! Pemilihan Font Penting

Memilih font yang tepat memiliki dampak besar pada bagaimana pembaca mengalami situs web.

Font yang tepat dapat menciptakan identitas yang kuat untuk merek Anda.

Menggunakan font yang mudah dibaca adalah penting. Font menambahkan nilai pada teks Anda. Penting juga untuk memilih warna dan ukuran teks yang benar untuk font.

Keluarga Font Generik

Dalam CSS ada lima keluarga font generik:

  1. Font Serif memiliki goresan kecil di tepi setiap huruf. Mereka menciptakan rasa formalitas dan keanggunan.
  2. Font Sans-serif memiliki garis bersih (tidak ada goresan kecil yang terpasang). Mereka menciptakan tampilan modern dan minimalis.
  3. Font monospace - di sini semua huruf memiliki lebar tetap yang sama. Mereka menciptakan tampilan mekanis.
  4. Font kursif meniru tulisan tangan manusia.
  5. Font fantasi adalah font dekoratif / menyenangkan.

Semua nama font yang berbeda milik salah satu keluarga font generik.

Perbedaan Antara Font Serif dan Sans-serif

Serif vs. Sans-serif

Properti harus memegang beberapa nama font sebagai sistem "fallback", untuk memastikan kompatibilitas maksimum antara browser / sistem operasi. Mulailah dengan font yang Anda inginkan, dan akhiri dengan keluarga generik (untuk membiarkan browser memilih font serupa dalam keluarga generik, jika tidak ada font lain yang tersedia). Nama font harus dipisahkan dengan koma. Baca lebih lanjut tentang font fallback di bab berikutnya.font-family

 

 

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
 sumber Font CSS (w3schools.com)

4. Belajar CSS Icons

Cara menambahkan ikon

Cara paling sederhana untuk menambahkan ikon ke halaman HTML Anda, adalah dengan perpustakaan ikon, seperti Font Awesome.

Tambahkan nama kelas ikon yang ditentukan ke elemen HTML sebaris apa pun (seperti atau ).<i><span>

Semua ikon di perpustakaan ikon di bawah ini, adalah vektor terukur yang dapat disesuaikan dengan CSS (ukuran, warna, bayangan, dll.).

Ikon Font Awesome

Untuk menggunakan ikon Font Awesome, buka fontawesome.com, masuk, dan dapatkan kode untuk ditambahkan di bagian halaman HTML Anda:<head>

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Baca lebih lanjut tentang cara memulai dengan Font Awesome dalam tutorial Font Awesome 5 kami.

Nota: Tidak diperlukan pengunduhan atau instalasi!

 

 

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>

 sumber Ikon CSS (w3schools.com)

5. Belajar CSS Links

Tautan dapat ditata dengan properti CSS apa pun (misalnya, , , dll.).colorfont-familybackground

Selain itu, tautan dapat ditata secara berbeda tergantung pada keadaan mereka.

Empat negara link tersebut adalah:

  • a:link - tautan normal yang tidak divisit
  • a:visited - tautan yang telah dikunjungi pengguna
  • a:hover - tautan saat pengguna mouse di atasnya
  • a:active - tautan saat diklik

Saat mengatur gaya untuk beberapa negara tautan, ada beberapa aturan pesanan:

  • a:hover HARUS datang setelah a:link dan a:visited
  • a:aktif HARUS datang setelah a:hover

Tombol Tautkan

Contoh ini menunjukkan contoh yang lebih maju di mana kami menggabungkan beberapa properti CSS untuk menampilkan tautan sebagai kotak / tombol:

Contoh :

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

6. Belajar CSS List

Daftar HTML dan Properti Daftar CSS

Dalam HTML, ada dua jenis utama daftar:

  • daftar yang tidak diurutkan (<ul>) - item daftar ditandai dengan poin
  • daftar yang dipesan (<ol>) - item daftar ditandai dengan angka atau huruf

Properti daftar CSS memungkinkan Anda untuk:

  • Mengatur penanda item daftar yang berbeda untuk daftar yang dipesan
  • Mengatur penanda item daftar yang berbeda untuk daftar yang tidak diurutkan
  • Mengatur gambar sebagai penanda item daftar
  • Menambahkan warna latar belakang ke daftar dan mencantumkan item

Penanda Item Daftar yang Berbeda

Properti menentukan jenis penanda item daftar.list-style-type

7. Belajar CSS Tables

Posisikan Penanda Item Daftar

Properti menentukan posisi penanda item daftar (poin-poin).list-style-position

"list-style-position: outside;" berarti poin-poin akan berada di luar item daftar. Awal setiap baris item daftar akan disejajarkan secara vertikal. Ini adalah default:

  • Kopi - Minuman yang diseduh yang dibuat dari biji kopi panggang ...
  • Teh
  • Coca-cola

"list-style-position: inside;" berarti bahwa poin-poin akan berada di dalam item daftar. Karena merupakan bagian dari item daftar, itu akan menjadi bagian dari teks dan mendorong teks di awal:

  • Kopi - Minuman yang diseduh yang dibuat dari biji kopi panggang ...
  • Teh
  • Coca-cola

Hapus Pengaturan Default

Properti ini juga dapat digunakan untuk menghapus spidol / peluru. Perhatikan bahwa daftar ini juga memiliki margin dan padding default. Untuk menghapus ini, tambahkan dan ke <ul> atau <ol>:list-style-type:nonemargin:0padding:0

Daftar - Properti singkatan

Properti ini adalah properti singkatan. Ini digunakan untuk mengatur semua properti daftar dalam satu deklarasi:list-style

Saat menggunakan properti singkatan, urutan nilai properti adalah:

  • list-style-type (jika gambar gaya daftar ditentukan, nilai properti ini akan ditampilkan jika gambar karena alasan tertentu tidak dapat ditampilkan)
  • list-style-position (menentukan apakah penanda item daftar akan muncul di dalam atau di luar alur konten)
  • list-style-image (menentukan gambar sebagai penanda item daftar)

Jika salah satu nilai properti di atas hilang, nilai default untuk properti yang hilang akan dimasukkan, jika ada.

Daftar Styling Dengan Warna

Kita juga bisa menata daftar dengan warna, untuk membuatnya terlihat sedikit lebih menarik.

Apa pun yang ditambahkan ke tag <ol> atau <ul>, memengaruhi seluruh daftar, sementara properti yang ditambahkan ke tag <li> akan memengaruhi item daftar individual:

Contoh Lainnya

Daftar yang disesuaikan dengan batas
kiri merah Contoh ini menunjukkan cara membuat daftar dengan batas kiri merah.

Daftar
berbatasan lebar penuh Contoh ini menunjukkan cara membuat daftar berbatasan tanpa peluru.

Semua penanda item daftar yang berbeda untuk daftar
Contoh ini menunjukkan semua penanda item daftar yang berbeda dalam CSS.

8. Belajar CSS Display

Properti tampilan

Properti menentukan apakah/bagaimana elemen ditampilkan.display

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen apa itu. Nilai tampilan default untuk sebagian besar elemen adalah atau .blockinline

Elemen tingkat blok

Elemen tingkat blok selalu dimulai pada garis baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

Elemen <div> adalah elemen tingkat blok.

Contoh elemen tingkat blok:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <bagian>

Elemen Sebaris

Elemen sebaris tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.

Ini adalah elemen inline <span> dalam paragraf.

Contoh elemen sebaris:

  • <pan>
  • <a>
  • <img>

Tampilan: tidak ada;

display: none; umumnya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakannya kembali. Lihatlah contoh terakhir kami di halaman ini jika Anda ingin tahu bagaimana hal ini dapat dicapai.Elemen menggunakan sebagai default. <script>display: none;

Menimpa Nilai Tampilan Default

Seperti disebutkan, setiap elemen memiliki nilai tampilan default. Namun, Anda dapat menimpa ini.

Mengubah elemen sebaris ke elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Contoh umum adalah membuat elemen sebaris untuk menu horizontal:<li>

Contoh Lainnya

Perbedaan antara tampilan: tidak ada; dan visibilitas: tersembunyi;
Contoh ini menunjukkan tampilan: tidak ada; versus visibilitas: tersembunyi;

Menggunakan CSS bersama dengan JavaScript untuk menampilkan konten
Contoh ini menunjukkan cara menggunakan CSS dan JavaScript untuk menampilkan elemen pada klik.

Penutup

Mohon maaf masih ada point yang kosong itu dikarenakan saya masih mencari informasi yang akurat untuk ditulis disini doakan saya semoga selalu diberi kesehatan dan kesempatan untuk terus melanjutkan materi ini.

Itulah materi pembelajar CSS kali ini tentang CSS Outline, Text, Fonts, Icons, Links, List, Tables, Display. Semoga membantu anda dalam mempelajari Pemrograman CSS ini. Terimakasih telah berkunjung

Tags:
Previous Post Next Post