081296718180 mastrie90@gmail.com

KODING : CSS

May 2, 2025 | ELEKTRONIKA

CSS atau Cascading Style Sheet digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, berfungsi untuk memisahkan konten dari tampilan visualnya di situs, dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 dan sekarang sudah versi CSS3. HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Komponen CSS terdiri dari 2 bagian, yaitu :

  • Selector, digunakan untuk mencari bagian mana dari HTML yang ingin disisipi kode CSS. Ada 6 macam selektor yaitu :
    • Selektor Tag, atau Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag, misalnya : 
      • p {
    color: blue;
}
    • Selektor Class, selektor yang memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan tanda titik di depannya, misalnya : 
      • .pink {
  color: white;
  background: pink;
  padding: 5px;
}
    • Selektor ID, Hanya boleh digunakan oleh satu elemen saja. ditandai dengan tanda pagar (#) di depannya, misalnya : 
      • #header {
    background: teal;
    color: white;
    height: 100px;
    padding: 50px;
}
    • Selektor Atribut, selektor yang memiliki elemen berdasarkan atribut. Selektor ini hampir sama seperti selektor Tag, misalnya : 
      • input[type=text] {
    background: none;
    color: cyan;
    padding: 10px;
    border: 1px solid cyan;
}
    • Selektor Universal, selektor yang digunakan untuk menyeleksi semua elemen pada jangkauan (scope) tertentu dan digunakan untuk me-reset CSS untuk menghilangkan padding dan margin tersebut, misalnya : 
      • * {
    border: 1px solid grey;
}
    • Selektor Pseudo,selektor untuk memilih elemen semu seperti state pada elemen, elemen before dan after, elemen ganjil, dan sebagainya. Ada dua macam pseudo selektor, yaitu :
      • pseudo-class selektor untuk state elemen menggunakan tanda titik dua satu, cara penulisannya : 
        • a:hover {
  color: green;
}
      • pseudo-element selektor untuk elemen semu di HTML menggunakan tanda titik dua dua, cara penulisannya : 
        • p::first-line {
  color: magenta;
}
  • Declaration, bagian yang berada di antara tanda kurung kurawal, meliputi :
    • Property, atribut yang dibutuhkan untuk mengatur jenis style CSS atau bagian apa yang akan diubah dari sebuah tag HTML. Misalnya jenis font, ukuran huruf, warna background, lebar tabel dan hal yang berkaitan dengan komponen HTML lainnya
    • Value CSS, sangat bergantung
      kepada jenis property, misalnya untuk ukuran font bisa menggunakan satuan pixel, point, untuk property warna (color) kita harus menggunakan value berupa nama warna atau kode RGB.

Berdasarkan peletakan codenya, CSS dapat dibagi menjadi 3 jenis, yaitu :

  • Inline CSS, code CSS yang ditulis dalam tag yang sama dengan baris HTML. Contohnya berikut :

<h1 style="font-size:30px;color:#0C4FF5;">Hello World!</h1>

  • Internal CSS, ditulis pada bagian header file HTML. contoh berikut :
<html>
	<head>
		<style>
			Body  { background-color:#0C4FF5;  }
			p{ font-size:20px;  color:white;  }
		</style>
	</head>
	<body>
		<h1>Inline CSS</h1>
		<p>Ini adalah kalimat pertama saya.</p>
	</body>

</html>
  • External CSS , code CSS diletakkan terpisah dari file HTML. Contohnya berikut :
    • External style CSS dengan element
<html>
	<head>
		<link rel="stylesheet"  type="text/css"  href="style.css">
	</head>
	<body>
		<h1>Inline CSS</h1>
		<p>Ini adalah kalimat pertama saya.</p>
	</body>
</html>
    • External style CSS dengan @import

<html>
<head>
<style>
@import url("style.css");
</style>
</head>
<body>
<h1>Inline CSS</h1>
<p>Ini adalah kalimat pertama saya.</p>
</body>
</html>

Buat file style.css dengan code berikut :

body  { background-color:#0C4FF5;  }
p{ font-size:20px;  color:white;  }

Property CSS dasar, meliputi :

  • CSS Background, Property background, terdiri dari :
    • Background-color
      Contoh:
      Body {
      Background-color : green;
      }
    • Background-Image
      Contoh:
      Body {
      Background-image : url(gambar1.jpg);
      }
    • Background-attachment
      Body {
      Background-attachment : scroll;
      }
    • Background-Repeat
      Body {
      Background-repeat : repeat;
      Background-image : url(image/gambar1.jpg);
      }
    • Background-position
      Body {
      Background-repeat : no-repeat;
      Background-image : url(image/gambar1.jpg);
      Background-position : bottom center
      }
  • CSS Font, Property Font terdiri dari :
    • Font-family
      P {
      Font-family : Arial,Helvetica;
      }
    • Font-size (satuan em,pt,px,mm,cm,%)
      P {
      Font-size : 24em;
      }
    • Font-style (nilai : oblique,italic,normal)
      P {
      Font-style : oblique;
      }
    • Font-variant (nilai : normal,small-caps)
      P {
      Font-family : Arial,Helvetica;
      }
    • Font-weight (nilai :normal,bold,bolder,lighter,100-900)
      P {
      Font-weight : bolder;
      }
  • CSS Teks, Property teks terdiri dari :
    • color
      P {
      color :red;
      }
    • teks-align (nilai left,right,center,justify)
      P {
      Text-align :justify;
      }
    • text-decoration (nilai : none,underline,overline,line-through,blink)
      P {
      Text-decoration :overline;
      }
    • text-transform (nilai : none,capitalize,uppercase,lowercase)
      P {
      Text-transform : capitalize;
      }
    • Letter-spacing
      P {
      letter-spacing : 20px;
      }
    • Teks-indent
      P {
      Text-indent : 50px;
      }
  • CSS List, Property list terdiri dari :
    • List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)
      Ul {
      List-style-type : disc ;
      }
    • List-style-image (nilai : url,none)
      Ul {
      List-style-image : url(gambar1.jpg) ;
      }
    • List-style-position (nilai : inside,outside)
      Ul {
      List-style-position : inside;
      }
  • CSS Border, Property Border terdiri dari :
    • border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
      .b1 {
      Border-style-type : groove ;
      }
    • border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
      .b1 {
      Border-bottom-style : groove ;
      }
    • border-bottom-width ()
      .b1 {
      border-bottom-width :10px;
      }
    • border-bottom-color ()
      .b1 {
      border-bottom-color :red;
      }
  • Margin dan Padding
    • Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web
      Body {
      Margin-top : 4cm;
      Margin-right : 3cm;
      Margin-bottom :3cm;
      Margin-left : 4cm;
      }
    • Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
      Pd css
      .kotak {
      Padding-top : 25px;
      Padding-right : 25px;
      Padding-bottom : 25px;
      Padding-left: 25px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      }

 

Submit a Comment

Your email address will not be published. Required fields are marked *