Home  ›  Blogger  ›  Programmer

Kumpulan Kode CSS Lengkap dan Fungsinya

"Silahkan kunjungi postingan Kumpulan Kode CSS Lengkap dan Fungsinya untuk membaca artikel selengkapnya dengan klik link di atas."

8 min read
Kumpulan Kode CSS Lengkap dan Fungsinya - Belajar CSS dasar itu sangat mudah. Cukup memahami struktur penulisannya dan mengetahui selector serta declaration, maka kemampuan mendesain web kamu semakin meningkat.

Dalam silabus pembelajaran web designer atau web desain, setelah belajar HTML, maka tiba saatnya untuk masuk ke tahap editing tampilan web yang lebih mudah menggunakan kode CSS. Kamu wajib belajar HTML dulu. Setelah itu, CSS kemudian JavaScript dan PHP jika ingin belajar desain web.

Apa itu CSS?


Cascading Style Sheet atau CSS adalah sebuah bahasa style sheet yang berfungsi untuk mendesain tampilan website lebih menarik. Jika kita membangun sebuah halaman website dari segi tampilan dengan hanya menggunakan HTML (Pure HTML), maka tampilannya akan sangat monoton dan kurang enak dipandang.

Karena itulah, banyak programmer web yang juga mengatakan kalau CSS adalah pelengkap HTML. Dan dalam pembuatan sebuah template website, HTML dan CSS adalah dua bahasa yang tidak terpisahkan.

Jika HTML berfungsi untuk membangun struktur dasar sebuah website, maka CSS adalah daya tarik tampilannya. Namun HTML tetaplah bahasa utama dalam sebuah website. Sementara CSS hanya melengkapi dari segi tampilan yang lebih menarik dan mudah diatur.

Manfaat menggunakan kode CSS


Dengan menggunakan CSS dalam mendesain tampilan website, maka kita akan untung dari segi:
  1. Kode HTML menjadi lebih sederhana
  2. Pengaturan tampilan website lebih mudah menggunakan kode CSS
  3. Ukuran file HTML menjadi kecil sehingga loading halaman web lebih cepat
  4. Mengedit tampilan website lebih mudah hanya pada bagian CSS
  5. Dapat disandingkan dengan JavaScript
  6. Hampir semua web browser terbaru mendukung kode CSS

Struktur Penulisan Kode CSS


Belajar CSS Untuk Pemula Langsung Bisa Menulis Kode CSS Lengkap
Belajar CSS Untuk Pemula Langsung Bisa Menulis Kode CSS Lengkap

Pada dasarnya, memahami dan menguasai CSS itu sederhana saja. Kia hanya perlu memahami struktur penulisan sebuah CSS yang terdiri dari dua bagian utama, yaitu Selector dan Declaration.

1. Selector CSS


Berdasarkan cara memanggilnya ke dalam dokumen HTML dan jenis-jenisnya, terdapat 3 macam selector pada CSS, yaitu sebagai berikut.

- Selector berupa elemen HTML


Umumnya, selector CSS berupa elemen HTML dipanggil ke dalam tag body sesuai dengan nama tag HTML itu sendiri.

<html>
<head>
<title>Belajar CSS dasar</title>
<style>
h1 {color:red;}
p {color:green;}
</style>
</head>
<body>
<h1>Belajar CSS H1</h1>
<p>Memanggil CSS ke dalam HTML</p>
</body>
</html>

Untuk melihat hasil dari kode CSS dan HTML di atas, kamu bisa menggunakan fitur HTML EDITOR Offline di blog ini. Cukup copy paste kode di atas dan pastekan di kolom HTML EDITOR kemudian klik preview.

HTML EDITOR

- Selector Class pada CSS


Selector class dideklarasikan pada elemen head HTML dengan menggunakan tanda titik ".". Fungsi dari selector class ini adalah dapat digunakan pada beberapa tag.

<html>
<head>
<title>Belajar CSS dasar untuk pemula</title>
<style>
.center {text-align:center;color:orange;}
.warnahijau {color:green;background:black;}
</style>
</head>
<body>
<h2 class="center">Tulisan rata tengah H2</h2>
<p class="center">Tulisan rata tengah P</p>
<h3 class="warnahijau">Kode CSS warna hijau tag H3</h3>
<p class="warnahijau">Kode CSS warna hijau tag p</p>
</body>
</html>

- Selector ID pada CSS


Selector ID dideklarasikan pada elemen head dengan menggunakan tanda pagar "#" untuk menentukan satu style unik pada satu tag. Dari namanya ID, kita bisa mengetahui bahwa selector ID hanya digunakan satu kali saja.

<html>
<head>
<title>Belajar CSS Dasar</title>
<style>
#utama {color:green;}
</style>
</head>
<body>
<h1 id="utama">Kode CSS Selector ID</h1>
</body>
</html>

2. Declaration CSS


Jika selector adalah identitas yang akan dipanggil, maka declaration adalah ciri khas dari suatu identitas selector. Sebuah declaration dilengkapi oleh property dan value.

Berdasarkan gambar di atas, setiap selector memiliki property dan valuenya masing-masing. Sebuah selector bisa memiliki lebih dari satu declaration property yang dipisahkan oleh titik koma ";".

Belajar CSS: Cara memanggil kode CSS ke dalam HTML


Bagaimana cara memanggil kode CSS yang telah dideklarasikan untuk ditampilkan di halaman web? Ada beberapa cara dan metode pemanggilan CSS ke dalam dokumen HTML untuk ditampilkan.

1. Metode Inline Style Sheet


Metode pemanggilan CSS yang pertama ini kurang bagus karena akan membuat coding program terlilhat rumit dan sulit untuk diatur. Pemanggilan kode CSS dilakukan langsung dalam tag HTML yang diberikan attribut..

<html>
<head>
<title>Cara memanggil CSS Metode Inline</title>
</head>
<body bgcolor ="#FFFFFF">
<h1 style="color:red">H1 Warna Merah</h1>
<p style ="font-size:14pt;color:red">Style CSS Tulisan Ukuran 14 dan Warna Merah</p>
</body>
</html>

Penjelasan kode:

  1. Body adalah elemen utama HTML
  2. H1 adalah tag heading
  3. P adalah tag paragrah
  4. Style adalah atribut
  5. Color dan Font-size adalah property
  6. 14pt dan red adalah value dari property.
Sebelumnya pahami juga ini dulu:

- Contoh cara mengelompokkan selector CSS

h1,h2,h3,h4,h5,h6 {
color: green;
font-family: calibri;
}

- Menulis komentar CSS

Dalam bahasa pemrograman, selalu ada yang dinamakan comment atau penulisan komentar. Penulisan komentar ini digunakan untuk mempermudah pengguna bahasa dalam mengingat settingan suatu kode.

Komentar ini tidak akan dieksekusi namun lebih berguna untuk memudahkan penulisn dan pengguna kode mencari suatu struktur yang akan diedit. Berikut cara penulisan kode CSS di dalam elemen head.

/* CSS untuk Heading */

h1,h2,h3,h4,h5,h6 {color: green;}

2. Metode Internal Style Sheet (Embedded)


Metode penulisan kode CSS dilakukan di dalam elemen head dokumen HTML. Di elemen head ini dideklarasikan selector dan declaration. Jadi, selector yang didefinisikan di dalam elemen head bebas dipanggil lagi untuk ditampilkan di elemen body.

<html>
<head>
<title>Cara Penulisan dan Pemanggilan CSS</title>
<style>
h2 {font-family:calibri;color:green;font-style:italic}
</style>
</head>
<body>
<h2>Semua tag h2 akan didefinisikan sesuai dengan kode CSS yang ada di elemen head.</h2>
</body>
</html>

3. Metode External Style Sheet (Linked)


Metode external style sheet adalah sebuah metode penulisan CSS di luar dokumen HTML. File CSS yang berformat nama.css tersebut akan disimpan di sebuah tempat khusus untuk dipanggil ke dalam dokumen HTML menggunakan fitur tag link pada elemen head.

Umumnya file css ini akan disimpan di web hosting seperti Github untuk kemudian dipanggil jika dibutuhkan menggunakan tag link. Untuk lebih jelasnya, berikut cara membuat kode CSS eksternal.

1. Buka notepad
2. Ketik coding CSS, contohnya:

h1 {font-family:sans;color:#333;}
h2 {font-family:calibri;color:green;font-style:italic}
p {font-size:17pt;margin-left:14px;}

3. Save as dengan nama file contohcss.css
4. Upload file contohcss.css ke web hosting seperti Github.
5. Copy URL file contohcss.css yang telah diupload tersebut. (Contoh url https://github.com/simentik/manifest.json/blob/master/contohcss.css)

Lihat sintaknya seperti di bawah ini!

<html>
<head>
<title>Kode CSS Eksternal</title>
<link type="text/css" rel="stylesheet" href="https://github.com/simentik/manifest.json/blob/master/contohcss.css">
</head>
<body>
<h1>Contoh script CSS eksternal</h1>
<h2>Style tag yang akan ditampilkan sesuai deklarasi dalam file contohcss.css</h2>.
</body>
</html>

Umumnya metode penulisan kode CSS yang paling direkomendasikan adalah metode eksternal ini. Meskipun tidak semua harus menggunakan kode eksternal, namun biasaya seorang programmer yang membuat template website memang menggunakan kode CSS eksternal sebagai salah satu stylenya sehingga tidak perlu menulis kode ulang ketika akan memanggil format CSS yang sama.

Kode CSS Lengkap


Untuk belajar CSS sebenarnya sampai pada tahap di atas kamu sudah memiliki gambaran tentang CSS. Namun sebelum kamu belajar sendiri, kamu sebaiknya melakukan kembali evaluasi dengan melihat contoh kode CSS di bawah ini dan cara pemanggilannya.

<html>
<head>
<title>Contoh Kode CSS</title>
<style>
h1 {color:red;font-style:bold}
.formatteks {text-align:center;color:red;}
</style>
</head>
<body>
<h1>Belajar CSS Dasar untuk Pemula</h1>
<p class="formatteks">Format teks rata tengah warna merah.</p>
</body>
</html>

Berikut kode-kode CSS untuk mendeklarasikan suatu selector.

a. Background CSS


- Background-image: url('https://www.simentik.eu.org/gambarcss.jpg')

Ganti https://www.simentik.eu.org/gambarcss.jpg dengan url background gambar Anda

- Backgournd-repeat: no-repeat

Digunakan untuk menampilkan perulangan pada gambar. Adapun value lainnya dari property bakcground-repeat adalah repeat-y dan repeat-x.

- Background-attachment: fixed

Membuat gambar tidak dapat scroll bersama dengan tampilan dokumen.

- Background-position: left top

Digunakan untuk menentukan posisi background.

- Backgorund-color: #FFFFFF

Digunakan untuk memberikan warna background

b. Font CSS


- Font-family:Arial

Mengatur jenis font

- Font-style:italic

Format teks miring

- Font-weight:bold

Digunakan untuk menebalkan huruf. Value lainnya dari property font-weight seperti : 30, 100, -200

- Font-size:12px

Digunakan untuk mengatur ukuran huruf.

- Color:#ffffff

Berfungsi untuk menetukan warna font..

- Text-decoration:line-through

Memberikan teks efek penulisan tertentu. Value lainnya seperti underline, blink, overline, dan lain-lain.

- Text-transform:capitalize

Menjadikan huruf kapital pada teks. Value lainnya seperti Lowercase dan Uppercase.

- Text-align:left

Digunakan untuk menentukan posisi teks.

c. Margin dan Padding CSS


Dalam bahasa CSS dan dalam desain web untuk pemula, banyak yang tidak bisa membedakan antara margin dan padding. Sebenarnya mudah saja, margin adalah batas luar antar elemen sedangkan padding adalah batas dalam atau isi elemen.

- Margin: 6px 3px 0px 2px;

Batas luarnya untuk sisi atas 6, sisi kanan 3 sisi bawah 0 dan sisi kiri 2.

- Margin-top: 4px;

- Margin-bottom: 2em;

- Margin-right: 2px;

- Margin-left: 2em;

- Padding: 2em;

d. Border CSS


- border-color:#FF0000

Warda border

- Border:1px

Mengatur ukuran border

- Border-width:8px

- Border:dotted

Menetukan jenis border, value lainnya adalah double, dashed, solid, inset, outset atau groove dan lain sebagainya.

- Border-top:1px

- Border-right:1px

- border: groove #EBFF00 3px

- Border-radius:10px

Membuat garis lengkung

- Border-top-left-radius:1em 0,5em;

Contoh membuat garis lengkung dari sisi atas ke kiri. Contoh lainnya seperti Border-bottom-right-radius:1em 2em;

- Box-shadow: 10px 10px 5px #888888;

Memberikan bayangan

Contohnya bisa dilihat di bawah sini:

<html>
<head>
<style>
.belajar {border-top-style: dotted; border-right-style: solid;
 border-bottom-style: dotted; border-left-style: solid;border-color:#FFF000;}
.belajar1 {border-style: groove; border-width: 3px;}
</style>
</head>
<body>
<h1 class="belajar">Belajar CSS</h1>
<p class="belajar1">Belajar CSS Dasar</p>
</body>
</html>

e. Link CSS


Ingat tag a adalah HTML untuk link yang berfungsi untu menuju ke suatu halaman web.

- a:link untuk link awal
- a:hover untuk link yang disorot oleh mouse atau disentuh
- a:active untuk link yang diklik
- a:visited untuk link yang sudah pernah diakses

<html>
<head>
<style>
a:link {color: #FFF000;}
a:visited {color: #FFFF00;}
a:hover {color: #FFF0FF;}
a:active {color: #000FFF;}
</style>
</head>
<body>
<p><a href="https://www.simentik.eu.org" target="_blank">Belajar CSS Dasar</a></p>
</body>
</html>

f. Position CSS


 - position:static

Sesuai dengan elemen induk dan merupakan format default normal.

- position:relative

Disesuaikan dengan bantuan property seperti top left sehingga tergantung dari elemen lain.

- position:absolute

Mengikuti induk elemen atau jendela browser yang digunakan.

- position:fixed

Selalu tampil di halaman web browser meskipun discroll

- position:inherit

Posisi mengikut elemen induk.

<html>
<head>
<style>
.contohcss {position: relative;left: 20px;border: 3px solid #FFF000;}
</style>
</head>
<body>
<h2 class="contohcss">Test drive CSS coding</h2>
</body>
</html>

g. Float CSS


Float:left

Obyek atau elemen akan menempel pada sebelah kiri elemen induk. Lainnya seperti float:right dan sebagainya.

h. Clear CSS


Clear:left

Elemen akan menempel pada posisi sebelah kiri bawah. Lainnya yang bisa dicoba adalah clear:both, clear:right dan lain-lain.

Kode Warna CSS Lengkap


Oh ya, hampir lupa tentang masalah warna pada kode CSS. Berbeda dengan HTML, warna CSS bisa kamu tulis menggunakan bahasa tingkat manusia seperti Bahasa INggris. Contohnya green, red, yellow, white, purpe, gray, brown, gold, blue, dan lain-lain.

Belajar web design dengan CSS sebenarnya sangat menyenangkan. Selain itu, kamu juga sebaiknya belajar JavaScript dan PHP termasuk menggunakan boostrap untuk memudahkan dalam koding dan mendesain tampilan website.

Saya juga pernah menulis buku Belajar HTML dan CSS untuk Pemula. Silahkan lihat dan pelajari materi belajar membuat template website dengan HTML dan CSS. Untuk informasi lainnya tentang web design khusus pemula, selain dapat ditemukan di label Programmer dalam blog ini juga terdapat pada label Blogger. Silahkan dikunjungi satu-satu.

Silahkan didalami dan dikembangkan lagi agar kamu bisa membuat template blog atau website sendiri atau pun bisa mengedit template agar beda dari yang lain.

Sampai di sini materi belajar CSS dasar untuk pemula langsung bisa menulis kumpulan kode CSS lengkap. Semoga bermanfaat!
Posting Komentar