BAB 015 - Styles CSS

CSS adalah singkatan dari Cascading Style Sheets.

CSS menjelaskan bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lain.

CSS menghemat banyak pekerjaan . Itu dapat mengontrol tata letak beberapa halaman web sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:

  • Inline - dengan menggunakan atribut style dalam elemen HTML
  • Internal - dengan menggunakan <style> elemen di <head> bagian tersebut
  • Eksternal - dengan menggunakan file CSS eksternal

Cara paling umum untuk menambahkan CSS, adalah dengan Eksternal Css.

Namun, di sini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk ditunjukkan, dan lebih mudah bagi Anda untuk mencobanya sendiri.

 

 

Inline Style CSS

Inline Style CSS digunakan untuk menerapkan gaya unik ke elemen HTML tunggal.

Inline Style CSS disisipkan secara langsung kedalam Tag Html sebagai Atribut.

Contoh mengatur warna teks <h1> menjadi biru:

Contoh


Cobalah utak-atik contoh diatas

 

 

Internal Style CSS

CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML.

CSS internal didefinisikan di <head> bagian halaman HTML, di dalam elemen <style>

Contoh :


Cobalah utak-atik contoh diatas


 

Eksternal Style CSS

CSS eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file CSS saja.

Untuk menggunakan style sheet eksternal, tambahkan tautan ke dalamnya di <head> bagian halaman HTML:

Contoh :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"href="css/styles.css">
</head>
<body>

<h1>Belajar HTML</h1>
<p>Step By Step Belajar HTML 5.</p>

</body>
</html>

 

 

Font CSS

Properti color CSS mendefinisikan warna teks yang akan digunakan.
Properti font-family CSS mendefinisikan font yang akan digunakan.
Properti font-size CSS menentukan ukuran teks yang akan digunakan.

Contoh :


Cobalah utak-atik contoh diatas

 

 

Properti Border CSS

Properti border CSS mendefinisikan border batas di sekitar elemen HTML:

Contoh :


Cobalah utak-atik contoh diatas

 

 

Properti Padding CSS

Properti padding CSS mendefinisikan padding (spasi) antara teks dan border.

Contoh :


Cobalah utak-atik contoh diatas

 

 

Properti Margin CSS

Properti margin CSS mendefinisikan margin (spasi) di luar border.

Contoh :


Cobalah utak-atik contoh diatas

 

 

Atribut id

Untuk menentukan gaya tertentu untuk satu elemen khusus, tambahkan atribut id ke elemen tersebut, lalu tentukan style css untuk elemen dengan id spesifik itu.

Id suatu elemen harus unik di dalam suatu halaman, jadi pemilihan id digunakan untuk memilih satu elemen unik.

Contoh :


Cobalah utak-atik contoh diatas

 

 

Atribut class

Untuk menentukan gaya tertentu untuk satu elemen khusus, tambahkan atribut class ke elemen tersebut, lalu tentukan style css untuk elemen dengan id spesifik itu.

Contoh :


Cobalah utak-atik contoh diatas

 


Sebelumnya
BAB 014 - Image
  Berikutnya
BAB 016 - Table

 

(1) Komentar

avatar user

wahyu04 Apr 2019

oke

Beri komentar





Hanya komentar yang sudah di-approve admin yang tampil.

KESIMPULAN : CSS adalah singkatan dari Cascading Style Sheets. CSS menjelaskan bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lain. CSS menghemat banyak pekerjaan . Itu dapat mengontrol tata letak beberapa halaman web sekaligus. CSS dapat ditambahkan ke elemen HTML dalam 3 cara: Inline - dengan menggunakan atribut style dalam elemen HTML Internal - dengan menggunakan <style> elemen di <head> bagian tersebut Eksternal - dengan menggunakan file CSS eksternal Cara paling umum untuk menambahkan CSS, adalah dengan Eksternal Css. Namun, di sini kita akan menggunakan gaya inline dan internal, karena ini lebih mudah untuk ditunjukkan, dan lebih mudah bagi Anda untuk mencobanya sendiri.     Inline Style CSS Inline Style CSS digunakan untuk menerapkan gaya unik ke elemen HTML tunggal. Inline Style CSS disisipkan secara langsung kedalam Tag Html sebagai Atribut. Contoh mengatur warna teks <h1> menjadi biru: Contoh Cobalah utak-atik contoh diatas     Internal Style CSS CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML. CSS internal didefinisikan di <head> bagian halaman HTML, di dalam elemen <style> Contoh : Cobalah utak-atik contoh diatas   Eksternal Style CSS CSS eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file CSS saja. Untuk menggunakan style sheet eksternal, tambahkan tautan ke dalamnya di <head> bagian halaman HTML: Contoh : <!DOCTYPE html> <html> <head> <link rel="stylesheet"href="css/styles.css"> </head> <body> <h1>Belajar HTML</h1> <p>Step By Step Belajar HTML 5.</p> </body> </html>     Font CSS Properti color CSS mendefinisikan warna teks yang akan digunakan. Properti font-family CSS mendefinisikan font yang akan digunakan. Properti font-size CSS menentukan ukuran teks yang akan digunakan. Contoh : Cobalah utak-atik contoh diatas     Properti Border CSS Properti border CSS mendefinisikan border batas di sekitar elemen HTML: Contoh : Cobalah utak-atik contoh diatas     Properti Padding CSS Properti padding CSS mendefinisikan padding (spasi) antara teks dan border. Contoh : Cobalah utak-atik contoh diatas     Properti Margin CSS Properti margin CSS mendefinisikan margin (spasi) di luar border. Contoh : Cobalah utak-atik contoh diatas     Atribut id Untuk menentukan gaya tertentu untuk satu elemen khusus, tambahkan atribut id ke elemen tersebut, lalu tentukan style css untuk elemen dengan id spesifik itu. Id suatu elemen harus unik di dalam suatu halaman, jadi pemilihan id digunakan untuk memilih satu elemen unik. Contoh : Cobalah utak-atik contoh diatas     Atribut class Untuk menentukan gaya tertentu untuk satu elemen khusus, tambahkan atribut class ke elemen tersebut, lalu tentukan style css untuk elemen dengan id spesifik itu. Contoh : Cobalah utak-atik contoh diatas  

 

 

Step By Step Belajar HTML 5

 

 

Artikel Lainnya :