Menambahkan CSS


       Halo! Selamat pagi! :D Di sini saya akan memposting bagaimana caranya menggunakan css dasar. CSS sendiri adalah Cascading Style Sheet yang merupakan dokumen website yang fungsinya untuk mengatur gaya (style) dari tampilan website.

Di dalam CSS, ada 3 hal, yaitu selector, property, dan value.
contohnya, begini:

h2{
         color: blue;
}

Dalam kode di atas, h2 adalah selectornya, color adalah propertinya, sedangkan blue adalah valuenya.

   Css ada banyak macamnya, ada yang inline, yaitu css tersebut terletak di dalam file html yang sama, di dalam masing-masing tag. Kemudian embedded, letak cssnya sama seperti inline, yaitu di dalam file html, namun tag yang dibutuhkan tidak terlalu banyak. Ada juga css external, yang berada di luar fie html dan bisa digunakan juga oleh file html yang lain.
Dalam css external, perlu ditambah kode sbb di awal koding, yaitu di dalam tag head:

<link rel="stylesheet" type="text/css" href="cssluar.css">

Di bawah ini adalah contoh dari inline CSS
See the Pen ZEzQqxV by Ayulia (@arreh_au) on CodePen.

Di bawah ini adalah embedded css:

See the Pen PoYZyPG by Ayulia (@arreh_au) on CodePen.



Selanjutnya sama, embedded css, namun lebih terorganisir dengan ditambahkannya id dan class sebagai pengidentifikasi. Class ditandai dengan titik (.) dan id ditandai dengan pagar (#)

See the Pen qBWbJKd by Ayulia (@arreh_au) on CodePen.


Ini adalah external CSS
See the Pen gOYPBjR by Ayulia (@arreh_au) on CodePen.



Ini adalah contoh lain.
See the Pen WNeraay by Ayulia (@arreh_au) on CodePen.


Ini adalah contoh pengaturan spasi pada huruf yang bersifat external css
See the Pen WNeraLy by Ayulia (@arreh_au) on CodePen.



Dan ini adalah contoh lain dimana terdapat dekorasi teks dimana kita bahkan bisa mengganti warna dari sebuah link yang ketika kursor kita diarahkan, tidak akan berubah warna:
See the Pen bGbEmzM by Ayulia (@arreh_au) on CodePen.


Ini adalah pengaturan dimana kita bisa mengubah tulisan kita yang awalnya biasa saja menjadi kapital, kecil, dan menjadi kapital di setiap awal kata:
See the Pen KKPVGEr by Ayulia (@arreh_au) on CodePen.



Dibawah adalah kodingan saya yang berisi autobiografi


See the Pen LYPRdPK by Ayulia (@arreh_au) on CodePen.



Komentar

Postingan Populer