Cerita sedikit tentang CSS

Assalamu'alaikum, pada kesempatan kali ini saya akan sedikit bercerita dan share sedikit tentang skrip CSS. langsung aja..

1. Pseudo Class
Pseudo Class digunakan untuk menunjukan keadaan khusus pada selector yang dipilih. Misalnya elemen yang di tunjuk pointer mouse, elemen yang fokus, elemen yang aktif dan sebagainya. Ciri-ciri Pseudo Class yaitu di awali tanda titik dua (:). Pseudo Class ditulis setelah selector tanpa di pisahkan spasi.

Berikut adalah sedikit contoh Pseudo code :

Selector	Contoh	Keterangan
:active	a:active	Memilih link yang aktif
:checked	Input:checked	Memilih tag <input> yang di centang, biasanya untuk type radio dan checkbox
:disabled	Input:disabled	Memilih tag <input> yang di disable
:empety	p:empety	Memilih tag <p> yang tidak memiliki elemen anak
:enable	Input:enable	Memilih tag <input> yang tidak di nonaktifkan (enable)
:first-child	P:first-child	Memilah tag <p> pertama dalam satu container
:focus	Input:focus	Memilih tad <input> yang sedang fokus

Contoh :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.biru{
color: blue;
}
.biru:hover{
color: red;
text-decoration: none;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h2><a class="biru"> Belajar CSS bersama A and Komputer </a></h2>
</body>
</html>

2. `Pseudo-Element

Pseudo-Element digunakan untuk memilih bagian dari suatu element. Ciri-ciri Pseudo-Element yaitu diawali dengan tanda titik dua doubel (::). Beberapa Pseudo-Element yang dapat digunakan pada CSS dapat dilihat pada tabel berikut

Selector	Contoh	Keterangan
::after	P::after	Menyisipkan sesuatu setelah konten pada tag <p>
::before	P::before	Menyisipkan sesuatu sebelum konten pada tag <p>
::first-letter	P::first-letter	Memilih huruf pertama pada tag <p>
::first-line	P::first-line	Memilih baris pertama pada tag <p>
::selection	P::selection	Memilih bagian elemen <p> yang dipilih (diblok) oleh pengguna

Sedikit contoh, silahkan diperhatikan :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p::first-letter{
color: red;
font-size: 60px;
}
</style>
<title></title>
</head>
<body>
<center>
<p>A and Komputer</p>
<p>Huruf pertama besar</p>
</center>
</body>
</html>

3. Font
Property Font mengatur segala sesuatu yang berhubungan dengan penggunaan font seperti jenis font, ukuran font, dan sebagai nya. Beberapa property yang berhubungan dengan font yaitu :
a. font family, mengatur jenis font yang digunakan, dapat diisi dengan nama grup font yang terdiri dari serif, sans-serif dan monospace, atau diisi nama font seperti arial, calibri, verdana dan sebagainya. Biasanya font yang masukkan lebih dari satu dengan dipisahkan tanda koma. Maksudnya, jika font pertama tidak ada pada komputer, akan digunakan font kedua dan seterusnya, jika nama font lebih dari 1 suku kata digunakan tanda petik. Contoh :
font-family: "Time New Roman", Times, Serif;
b. font-style, mengatur teks miring atau tidak. Nilai yang dapat dimasukan yaitu normal, italic dan oblique. italic dan oblique sama-sama miring, hanya oblique kurang dukungan.
c. font size, mengatur ukuran huruf. Nilai yang dapat diberikan berupa angka dengan satuan px atau em.
d. font-wight, mengatur teks tebal atau tidak, Nilai yang dapat diberikan normal atau bold.
e. font-variant, mengatur teks ditampilkan dalam small-caps atau tidak. Nilai yang dapat diberikan normai atau small-caps. jika diisi small-caps, semua teks kecil (lowercase) akan dikonversikan ke huruf kapital tapi dengan ukuran lebih kecil dibanding huruf kapital yang sesungguhnya.
f. font-stretch, mengatur font tampil lebih lebar (expanded) atau sempit (condensed). Nilai yang dapat diberikan yaitu ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, dan ultra-expanded.

Beberapa property di atas dapat digabungkan dalam properti font, dengan format sebagai berikut :
font: [font-style] [font-variant] font-weight] [font-size] [font-family]
Tidak semua property harus dicantumkan, kecuali font-size dan font family yang wajib ada.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
font-family: arial, verdana, helvetica;
font-size: 18px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
}
</style>
<title></title>
</head>
<body>
<center>
<p>saya belajar css di A and Komputer</p>
</center>
</body>
</html>

Sebenernya saya ingin share lebih banyak lagi seperti Text, Backround, List Style, Rounded Corner, Shandow, Gradient, Text effect, Web font dan masih banyak lagi. Semoga di artikel selanjut nya saya bisa share. Sebagai penutup saya akan bikin from login sederhana.

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section class="login-box">

<h2>Selamat datang di A and Komputer</h2>
<form method="post" action="ceklogin.php">
<input type="text" placeholder="Username" id="username">
<input type="password" placeholder="password" id="password">
<input type="submit" value="Login">
</form>
</div>
</div>
</body>
</html>

Agar layout responsive, pada skrip di atas ditambah tag <meta name="viewport"> pada bagian head.

skrip css nya :

*{
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
background: #038ade;
}
.container{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.login-box{
border-radius: 20px;
margin-top: 150px;
flex-basis: 400px;
background: #fff;
padding: 20px;
}
.login-box h2{
border-buttom: 1px solid #ccc;
color: #555;
text-align: center;
padding-bottom: 20px;
margin: 0 0 20px;
}
input, select{
border-radius: 20px;
width: 100%;
padding: 15px 20px;
margin: 8px 0;
border: 1px solid #ccc;
}
input [type=submit]{
background-color: #038ade;
border: none;
color: #fff;
text-decoration: none;
cursor: pointer;
}

Dan jika berhasil hasil nya seperti dibawah ini :

See you..