Pada bab kali ini, akan dibahas materi tentang inline, internal dan eksternal style pada CSS.

Inline Style
Sesuai namanya, inline style pada CSS adalah menyisipkan kode CSS ke dalam tag html, kode diletakkan pada atribut style di dalam tag html. Contoh perintah seperti berikut :
<p style=”color: red;”>Ini Tulisan berwarna merah</p>

Pada contoh baris kode di atas, ketika dibuka di web browser, akan menampilkan tulisan paragraf “Ini Tulisan berwarna merah” yang nantinya warna tulisan menjadi warna merah.

Internal Style
Internal style pada prinsipnya adalah menaruh blok kode CSS ke dalam halaman html dengan menggunakan elemen <style>, di CSS yang lebih lama, bentuk style terdapat atribut tambahan seperti ini : <style type=”text/css”>, sedangkan di html 5, lebih disederhanakan menjadi tag <style>. Contoh bentuk internal style :

<style>
body {
color: darkgrey;
background-color: lightgrey;
}
</style>

Eksternal Style
Sesuai namanya, Eksternal style adalah konsep dimana halaman web memanggil file luar atau eksternal yang berisikan sekumpulan blok kode CSS, yang nama filenya berekstensi *.css. Kelebihan dari penggunaan file eksternal style / css ini adalah, 1 file css dapat dipanggil oleh beberapa halaman web jika menganut desain pada layout utama semuanya sama. Untuk penempatan pemanggilan parameter file eksternal style, baris perintah wajib diletakkan di atas perintah </head>. Contoh perintah eksternal style :

<link href=”filestyle.css” rel=”stylesheet”>

Kesimpulannya, penggunaan konsep inline, internal dan eksternal bergantung pada kebutuhan website, jika itu bukan blok kode yang digunakan untuk membangun layout utama dan tidak dipakai oleh beberapa halaman, mungkin bisa hanya menggunakan inline style, namun jika itu digunakan untuk banyak halaman, lebih cocok jika menggunakan konsep eksternal style.

TUGAS !
1. Tuliskan cara menerapkan inline style pada tag html <h1> untuk memberikan warna tulisan menjadi biru dan background warna hijau !
2. Sebutkan 3 website untuk belajar html dan CSS !

Apa itu CSS?

CSS adalah kependekan dari Cascading Style Sheets. Ini memberi Anda kontrol kreatif atas keseluruhan desain dan tata letak halaman web Anda. Tujuan CSS adalah untuk merampingkan proses menata halaman web. CSS adalah bahasa desain sederhana yang memungkinkan Anda membuat halaman web yang menarik. Ini membantu untuk menentukan berpikir seperti warna, font, posisi elemen tertentu, dan sedikit animasi. Jika Anda telah menggunakan gaya dalam pengolah kata seperti Microsoft Word atau program tata letak halaman seperti Adobe InDesign, CSS akan terasa akrab bagi Anda. Elemen visual apa pun di situs web seperti latar belakang, kotak, teks, header, dan footer, secara harfiah apa pun dapat diubah dengan CSS.

Apa itu CSS3?

CSS3 adalah iterasi terbaru dari bahasa Cascading Style Sheets dan angka 3 bukan hanya referensi ke fitur baru di CSS tetapi tingkat ketiga dalam kemajuan spesifikasi CSS. CSS3 adalah versi modular baru dari spesifikasi CSS dengan beberapa fitur baru yang menarik untuk membuat desain web Anda berupaya ke tingkat yang sama sekali baru, membuatnya lebih mudah dan lebih fleksibel. Ini adalah istilah selimut baru yang digunakan untuk menggambarkan fitur dan fungsionalitas CSS baru yang telah muncul selama beberapa tahun terakhir. Sekarang, bagian dari fungsionalitas baru ini adalah pengembangan CSS yang berkelanjutan melalui W3C dan bagian lain dari itu sedang didorong oleh generasi baru browser yang secara khusus dilayani untuk menyediakan alat yang lebih kuat untuk membuat desainer untuk membuat situs web situs web. Ini membawa sejumlah besar fitur dan penambahan baru, seperti pemilih canggih, sudut bulat, tata letak baru, animasi atau transisi, bayangan, gradien, pemilihan warna, dan banyak lagi.

Perbedaan antara CSS3 dan CSS

Pemilih

– Selektor berada di jantung lembaran gaya cascading yang pada dasarnya adalah pola yang digunakan untuk memilih elemen HTML yang ingin Anda gaya. CSS3 menampilkan kotak peralatan baru yang kuat dan kuat yang memungkinkan Anda memilih elemen yang lebih spesifik untuk penataan sambil menghilangkan kebutuhan untuk ID dan kelas sewenang -wenang yang sering Anda sertakan. Dengan berbagai pemilih, Anda dapat menargetkan hampir semua elemen halaman. CSS3 menambah fungsionalitas pemilih atribut dasar dengan memungkinkan Anda memilih elemen berdasarkan string dalam nilai atribut.

Warna

– CSS3 menawarkan beberapa cara baru yang menarik untuk bermain dengan warna. Sebelumnya, warna dinyatakan menggunakan format heksadesimal – sistem penomoran yang dimulai pada 00 dan berakhir di FF. Spesifikasi warna CSS3 mendefinisikan daftar kata kunci warna yang diperluas yang didukung oleh browser web. Daftar ini sekarang mencakup 147 kata kunci warna tambahan dan model baru yang disebut ‘RGBA’ (penambahan alpha) yang memungkinkan spesifikasi opacity warna. Perubahan yang paling signifikan adalah Anda sekarang dapat menyatakan warna semitransparen.

Border-Radius

– Properti CSS Border-Radius mendefinisikan sudut-sudut bulat dari elemen apa pun, memungkinkan Anda untuk dengan mudah memanfaatkan sudut-sudut bulat di elemen desain Anda. Dengan CSS3, Anda bahkan dapat menggunakan gambar untuk perbatasan dan membuat sudut bulat di perbatasan Anda tanpa gambar atau markup tambahan. Ini juga memiliki penambahan properti latar belakang seperti kemampuan untuk memiliki banyak latar belakang dan peningkatan untuk mengontrol ukuran gambar latar belakang, orientasi dan kliping. Properti Box Shadow memungkinkan Anda untuk menambahkan bayangan drop ke elemen.

Pembentukan teks

– CSS3 menyediakan satu ton properti pemformatan teks, banyak di antaranya sudah ada di CSS2 tetapi dengan beberapa fitur tambahan seperti Properti Bayangan Teks Baru. Properti Teks Bayangan Teks Baru ini memungkinkan Anda untuk menambahkan bayangan ke karakter individu dalam node teks. Efek bayangan untuk teks membuat halaman web terlihat lebih jelas dan menarik. Sebelum CSS3, Anda akan melakukan hal yang sama menggunakan gambar atau elemen teks duplikat dan kemudian posisikan.

Gradien

– Gradien adalah salah satu fitur yang paling dinanti untuk menjadi asli CSS. Ini adalah tambahan yang sangat kuat untuk CSS yang memungkinkan Anda mengatur warna latar belakang suatu elemen ke gradien. Anda dapat menggunakan gradien dua warna yang sederhana dan sederhana atau Anda bisa keluar dengan menggunakan banyak penghentian warna dan berbagai tingkat opacity di seluruh gradien. Gradien dapat berupa linier atau radial dan membuat efek visual yang secara visual kaya seperti gradien dalam teknologi lain seperti SVG.

Transisi dan animasi

– CSS3 memiliki fitur menarik lainnya yang disebut transisi yang menyediakan cara untuk mengontrol kecepatan animasi saat Anda bertransisi dari satu nilai properti CSS ke yang lain. Misalnya, Anda dapat menghidupkan ketinggian elemen dari nol piksel menjadi seratus piksel untuk mengungkapkan isi elemen. Animasi CSS3 memiliki spesifikasi sendiri dan mereka memungkinkan Anda membuat kerangka kunci untuk mengontrol animasi dan properti yang memungkinkan Anda untuk mengontrol waktu, durasi, dan perulangan animasi.

TUGAS !
1. Tonton video di youtube yang berhubungan dengan Materi CSS dan CSS 3 !
2. Tuliskan atribut baru yang ada di CSS 3 di buku !