Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang CSS alias Cascading Style Sheet. Mari kita bahas mengenai informasi dasar tentang CSS.
Apa itu CSS?
Cascading StyleSheet atau lebih dikenal dengan CSS merupakan salah satu dokumen website yang bertujuan mengatur gaya(style) dari tampilan website.
Lalu, apa saja manfaat menggunakan CSS?
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur;
2. Ukuran file menjadi lebih kecil sehinggan proses load file lebih cepat;
3. Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS-nya saja;
4. Dapat berkolaborasi dengan JavaScript;
5. Dapat digunakan dalam hampir semua jenis web browser.
CSS terdiri dari bagian apa saja ?
CSS terdiri dari 3 bagian :
1. Selector - {body, h1, h2, p, table, class(.), id(#)}
2. Property - {color, font-family, background-color, margin}
3. Value - {black, times new roman, 16px}
Jenis - jenis penggunaan CSS
1. Inline
Didalam file html yang sama dan pada masing - masing tagnya. Mari kita lihat contohnya!
Syntax Pembuatan CSS Inline :
<html>
<head><title>Inline pada CSS, by Fadli Mahesa</title>
</head>
<body style="background-image:url('Media/images.png')">
<p align="center"
style="color:#B5C9C3;
font-family:Zona pro bold, Arial black;
font-size:55px;
text-shadow: 9px 5px 3px grey;
background-image:url('Media/WallP.jpg');">
Hello World, ini adalah contoh penggunaan inline!
<br><br>
Dan ini masih dalam tag paragraph yang sama.<br>
</p>
<p align="center"
style="color:#eeeeee;
font-family:Arial black ;
font-size:33px;
background-color:#222831 ;">
Nah sekarang paragraph selanjutnya.
</p>
</body>
</html>Hasil
2. Embedded
Didalam file html yang sama namun dengan tempat yang berbeda dengan tagsnya. Mari kita lihat contohnya!
Syntax Pembuatan CSS Embedded 1 :
<html>
<head><title>Contoh Embedded, Selector Class & ID, by Fadli Mahesa</title>
</head>
<style type="text/css">
#Bubblegum {
height: 20%;
background-color: #222831 ;
border: solid;
font-family: Aileron heavy;
box-align: center;
cursor: crosshair;
}
#Lemonade {
background-color: #B7CECE ;
border: dashed;
font-family: Aileron light;
}
#Mint {
height: 28%;
background-color: #6E7E85;
border: hidden;
font-family: Aileron;
}
.kotak {
text-shadow: 5px 5px 5px silver;
text-align: center;
font-size: 66pt;
color: #eeeeee ;
}
input#tombol {
color: #1C0F13;
background: #E2E2E2;
border: 2px dotted dodgerblue;
font-size: 14px;
font: bold;
}
.username {
color: #1C0F13;
background: ;
size: 12px;
}
input#tombol:hover {
color: #E2E2E2;
background: #1C0F13;
}
</style>
<body>
<div id="Bubblegum" class="kotak">Bismillah</div>
<div id="Lemonade">
<form name="LOGIN">
<table align="center"><tr>
<td><label for="username" class="username">Username</label></td>
<td><input type="text"></input></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password"></input></td>
</tr>
<tr>
<td colspan ="2" align="center">
<input id="tombol" type="submit" value=" Login "></input>
</td>
</tr>
</table>
</div>
<div id="Mint" class="kotak">Tetap Semangat</div>
</body>
</html>
Hasil 1
<html>
<head><title>Embedded CSS dengan Align, by Fadli Mahesa</title>
<style ="text/css">
h1 {
height: 44px;
color: Coral;
}
body, p {
color: #b2d9ea ;
background-color: teal;
font-family: ArgentSans-DemiBold, Arial black ;
}
P {
text-indent: 5cm;
text-align: Justify;
}
p.besar {
text-transform: uppercase;
}
p.kecil {
text-transform: lowercase;
}
p.kapital {
text-transform: capitalize;
}
p.ex {
color: rgb(255,220,244); }
p.ex::first-line {
color: rgb(0,255,0);
}
</style>
</head>
<body>
<h1>Selamat Datang XI RPL! Ini adalah header 1</h1>
<p>Ini adalah paragraph biasa, ditulis dengan warna biru pastel. Default text-color didefinisikan pada body selector.</p>
<p class="ex">Ini adalah paragraph with class="ex". Dan warna teks hijau, tapi pada baris kedua, akan berwarna lain coba kalian buktikan saja ~~ Dengan text indent.
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari
pengguna,
untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemograman web,
baik secara server side scripting(misal PHP, JSP)ataupun client-side scripting(javascript). </p>
<p class="besar">pengubahan menjadi huruf besar(Kapital).</p>
<p class="kecil">PENGUBAHAN MENJADI HURUF KECIL</p>
<p class="kapital">huruf kapital pada setiap awal kata.</p>
</body>
</html>
Hasil 2
3. External
Diluar file HTML, bisa digunakan di berbagai file HTML, dengan format "file.css". Mari kita lihat contohnya!
Syntax (HTML) Pembuatan CSS External 1:
<html>
<head>
<title>External CSS, Format Paragraph & Text Decoration, by Fadli Mahesa</title>
<link rel = "icon" href="Media/icon.png">
<link href="Ext1.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<p>Pengaturan Spasi pada huruf</p>
<h4> ini adalah Header 4 </h4>
<em>Bentuk overline</em>
<h2>pada h2 ini line through</h2>
<h3> ini h3, ini garis bawah</h3>
<p><a href="twitter.com">
aku ini link tapi warna biru dan garis bawah :) ala HTML awkoakaowkaowk.
</a></p>
<p class="duasenti">
Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Berikut ini adalah contoh penerapan dari
style tersebut :Bila listing kode diatas dijalankan akang menghasilkan tampilan seperti berikut.
</p>
<p class="limapiksel">
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang
ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi
berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
</p>
</body>
</html> Syntax (CSS) Pembuatan CSS External 1 :
h2 {
text-decoration:line-through;
}
h3 {
text-decoration:underline;
}
h4 {
letter-spacing: -1px;
color: coral;
}
P {
color:DarkSeaGreen;
}
em {
letter-spacing: 0.5cm;
text-decoration: overline;
color: Salmon
}
a {
text-decoration:none;
color:dodgerbloe;
}
p.duasenti {
word-spacing:2cm;
}
p.limapiksel{
word-spacing:5px;
}
body {
background-image:url('Media/'), url('');
}
p, h4, em, h2, h3, a{
text-indent: 2cm;
background-color:bisque;
font-family: Barlow condensed semi bold, verdana;
}Hasil 1
Syntax (HTML) Pembuatan CSS External 2:
<html>
<head><title>CSS Pada Image, by Fadli Mahesa</title>
<link href="ExtImage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="atas"><h1>Penempatan Gambar pada CSS</h1>
<img id="P_Photo" src="Media/billie.jpg" />
<div id="profil">Billie Eilish Pirate Baird O'Connell (lahir 18 Desember 2001; umur 18 tahun) adalah seorang penyanyi dan penulis lagu asal Amerika Serikat.
Pada 2016, Eilish merilis single debutnya, "Ocean Eyes" yang kemudian menjadi viral. EP Debutnya Don't Smile at Me dirilis pada bulan Agustus tahun 2017.
Menyusul kesuksesan EP, Apple Music menamai Eilish sebagai artis Up Next terbarunya pada September 2017. Album studio debutnya, When We All Fall Asleep, Where Do We Go? dirilis pada 29 Maret 2019.</div>
</body>
</html> Syntax (CSS) Pembuatan CSS External 2 :
#atas {
background-image: url(Media/lndscp.jpg);
height: 268px;
width: 900px;
position: relative;
display:block;
margin-top:-10;
text-align:center;
margin-left: auto;
margin-right: auto;
}
h1 {
font-family:Hey August;
padding-top:40px;
font-size:40pt;
text-shadow:-5px -5px -5px darkgray;
color:ghostwhite;
}
img#P_Photo {
margin-top :10px
margin-left :250px;
float :left;
clear :both;
position :relative;
border-radius: 5%;
color :dimgray;
border-style:dotted;
}
#Profil{
width:400px;
height:500px;
margin-top:10px;
margin-left:480px;
margin-right:200px;
padding-left:12px;
display:block;
font-family: montserrat;
}
body{
background-image: url(Media/855818.jpg);
}
Hasil 2
Syntax (HTML) Pembuatan CSS External 3:
<html>
<head><title>CSS Pada Tabel, by Fadli Mahesa</title>
<link href="ExtTable.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Family Name</th>
<th>Country</th>
</tr>
<tr>
<td>Ariana</td>
<td>Grande</td>
<td>America</td>
</tr>
<tr>
<td>Taylor</td>
<td>Swift</td>
<td>America</td>
</tr>
<tr>
<td>Lorde</td>
<td>AJAH</td>
<td>New Zealand</td>
</tr>
</table>
</body>
</html> Syntax (CSS) Pembuatan CSS External 3 :
table,td,th {
border: 1px solid salmon;
border-top: 2px solid red;
border-right: 2px groove yellow;
border-left: 2px dashed green;
border-bottom: 2px dotted black;
}
td {
background-color:Lawngreen;
color:snow;
text-align:right;
height:30px;
vertical-align:middle;
padding-right: 10px;
}
th {
background-color:khaki;
color:blue;
text-align:right;
height:50px;
vertical-align:bottom;
padding:15px;
}
body{
font-family:montserrat;
}
Hasil 3
CHALLENGE KALI INI
CHALLENGE 01
Syntax (HTML) :
<html>
<head><title>Challenge 01, Bio Fadli M</title>
<link href="stylenya.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<figure class="card">
<figcaption>
<h2>Fadli <span>Mahesa</span></h2>
<p>Seorang siswa yang kini duduk di bangku kelas XI RPL 3 yang tepat di SMKN 4 Bandung. Ia lahir pada 9 Agustus 2003</p>
</figcaption>
<img src="Media/ale.png"/>
<div class="position">XI RPL 3</div>
</figure>
</body>
</html> Syntax (CSS) :
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
html {
height: 100%;
}
body {
font-family: 'Muli', sans-serif;
background-color: #1e272e;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
height: 100%;
}
figure.card {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.card * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.card > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.card figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.card figcaption h2,
figure.card figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.card figcaption h2 {
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.card figcaption h2 span {
font-weight: 800;
color: #b71540;
}
figure.card figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.card figcaption .icons {
width: 100%;
text-align: left;
}
figure.card figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
.icons i:hover {color: #b71540 !important; cursor: pointer;}
figure.card figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.card .position {
width: 100%;
padding: 15px 20px;
font-size: 0.9em;
opacity: 1;
color: #ffffff;
background: #b71540;
clear: both;
font-weight: bold;
}
figure.card:hover > img,
figure.card.hover > img {
right: -12%;
}
Hasil
CHALLENGE 02
Syntax (HTML) :
<html>
<head>
<title>Challenge 02, Tabel CSS</title>
<link href="styletabel.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center" border="1">
<tr>
<th colspan="2" class="thead">Pendaftaran Acara Porak SMKN 4 Bandung</th>
<th colspan="2" class="thead"><img src="Media/icecream.png" width="50" height="50"></th>
</tr>
<tr class="head">
<th width="25">No</th>
<th width="300">Nama</th>
<th width="100">Kelas</th>
<th width="100">XI-RPL</th>
</tr>
<tr>
<td>1</td>
<td>Krisan</td>
<td class="photo" colspan="2" rowspan="7"></td>
</tr>
<tr>
<td>2</td>
<td>Jaka</td>
</tr>
<tr>
<td>3</td>
<td>Alena</td>
</tr>
<tr>
<td>4</td>
<td>Martin</td>
</tr>
<tr>
<td>5</td>
<td>Justin</td>
</tr>
<tr>
<td>6</td>
<td>Viona</td>
</tr>
<tr>
<td>7</td>
<td>Delonix</td>
</tr>
</table>
</body>
</html> Syntax (CSS) :
table{
width: 50%;
border-style: dashed;
border-color: blue;
background-color: #17333E;
}
table td{
border-color: black;
border-right: #17333E;
border-bottom-color: #17333E;
background-color: #B0C6B8;
}
.thead {
color: white;
background-color: black;
border-bottom: 1px dotted #17333E;
border-right: 1px dashed #466A6D;
border-left: 1px dashed #466A6D;
border-top: 1px dotted #17333E;
}
.head {
border: solid #17333E;
background-color: #8A9B90;
border-style: solid;
border-width: 10px;
}
.photo {
background-image: url(Media/pixels8.gif);
background-size: cover;
}
Hasil
0 komentar: