Pengertian CSS Dan Cara Penulisannya

1

Jika kalian pernah membuat website sendiri secara dasarnya atau bahkan ingin menjadi seorang programmer web. Atau mungkin juga dari kalian pernah menempuh sekolah kejuruan jurusan RPL, maka tentunya kalian tidak asing dengan istilah CSS ini. Pada postingan kali ini saya ingin membahas mengenai css, dimana css ini sangat dibutuhkan khususnya untuk para programmer web dalam membangun sebuah website yang mampu memikat perhatian pengunjung. Langsung saja simak pembahasan css berikut ini.

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheet  yang mampu menghemat banyak pekerjaan sehingga ini dapat mengontrol tata letak halaman web sekaligus. Tetapi perlu diketahui, CSS bukan merupakan bahasa pemrograman. Karena pada umumnya dulu CSS dipakai untuk memformat tampilan halaman web yang dibuat menggunakan bahasa HTML.

Jadi kenapa harus menggunakan CSS? CSS ini berfungsi sebagai “styles” pada halaman web, dimana CSS dapat mengatur tata letak ruang yang baik, ukuran gambar, ukuran table, warna background, warna teks, dan variasi untuk berbagai perangkat dan ukuran layar.

Penulisan CSS

Untuk penulisan syntax pada CSS berikut saya buatkan ilustrasinya:

Selector adalah sebagai penempatan elemen yang ingin kita rubah secara segi tampilan dari selector yang kita pilih. Nah, untuk pemilihan elemen ada 3 macam pemilihan elemen yaitu :

  • Id Selector ini menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Namun id ini hanya dapat digunakan satu kali dalam satu elemen, maka dari itu untuk aturan penamaan id ini harus bersifat Uniq atau berbeda dengan yang lain. Jika id yang sama digunakan pada beberapa elemen HTML, maka yang akan dieksekusi hanyalah id yang pertama, setelahnya tidak akan dieksekusi. Untuk memilih elemen id pada CSS, tuliskan saja karakter hash (#) dan diikuti dengan id elemen tertentu.

Penulisan pada CSS:

#header{
   width: 100%;
   height: 150px;
   background: green;
}

Penulisan pada HTML:

<div id="header">
     Selamat datang di website kami.
</div>
  • Class Selector sebenarnya hampir sama dengan Id Selector hanya saja untuk perbedaanya, class mampu digunakan lebih dari satu elemen dimana didalamnya terdapat class tertentu. Untuk penulisan class, cukup simbolkan dengan titik (.) kemudian sertakan nama classnya sesuai dengan class yang dibuat pada elemen HTMLnya.

Penulisan pada CSS:

.heading{
   text-align: center;
   font-weight: bold;
   font-size: 34px;
   color: #ffffff
}

Penulisan pada HTML:

<div class="heading">
     Ini adalah heading, jadi ini adalah heading karena ini adalah heading.
</div>

 

  • Element Selector adalah pemanggilan elemen HTML sendiri secara langsung pada CSS. Untuk penulisan kita tidak menambahkan simbol apapun, cukup tuliskan saja elemen yang akan dipilih dari HTML. Misalkan saya ingin merubah elemen <p>, contoh berikut :

Penulisan pada CSS:

p{
   text-align: left;
   color: black;
   font-size: 20px;
}

Property sebagai jenis style untuk merubah suatu elemen. Seperti halnya kita ingin merubah panjang, lebar, warna, transisi, border, dll. Sedangkan Value sebagai nilai dari property. Misalkan property adalah background-color maka untuk memasukan nilainya adalah dengan menuliskan warna, bisa menggunakan penulisan langsung (green, black, dll) maupun dengan angka heksadesimal (#FF55CC) dengan rujukan RGB(Red,Green,Blue).

Untuk Property dan Value sendiri memiliki banyak variasi style untuk merubah suatu elemen html, kalian bisa lihat – lihat sendiri pada W3school. Disana ada banyak jenis style yang dapat digunakan, seperti membuat transisi, animasi, dll.

Cara Memasukkan CSS

Ada 3 cara untuk memasukkan css ke dalam webs, yaitu :

  • External Style Sheet yaitu penulisan CSS yang dilakukan diluar HTML. Cara ini memungkinkan kita untuk membuat sebuah file baru dengan ekstensi “.css” pada text editor. Lalu kita tinggal memanggil file.css nya tersebut ke dalam HTML tepatnya pada tag <head>.

Contoh:

...
   <head>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="folder/style.css">
   </head>
...
  • Internal Style Sheet yaitu penulisan CSS didalam HTML dengan menambahkan tag <style> didalam elemen <head>. Lalu tuliskan script CSS didalam tag <style> tersebut.
  • Inline Style dalam penulisannya juga hampir sama dengan cara Internal Style Sheet, hanya saja untuk penulisan diringkas dalam satu baris.

Contoh:

... 
<h1 style="text-align:center; color:white; font-size:50px">Selamat Datang.</h1>
...

Jika diulas lebih dalam mengenai css ini sangatlah banyak, karena berdasarkan setiap element pada html tidaklah sama dalam hal penulisan pada cssnya. Oleh karena itu, pada artikel ini saya hanya memperkenalkan css terlebih dahulu. Mungkin untuk kedepan saya bisa berbagi lebih dalam untuk css di lain waktu, dan mungkin pembahasan pengenalan CSS cukup sampai disini. Jika terdapat kekeliuran atau bahkan kesalahan pada artikel yang saya buat, saya mohon maaf sebelumnya.

Terimakasih telah berkunjung. 🙂

Refrensi : https://www.w3schools.com/css/

1
%d bloggers like this: