Penggunaan website di era Revolusi Industri 4.0 kian bertambah seiring banyaknya aktivitas yang beralih ke online. Untuk membuat web diperlukan bahasa pemrograman HTML (Hyper Text Markup Language) dan CSS (Cascading Style Sheets). HTML berfungsi untuk membuat konten atau kerangka logis pada halaman web. Sedangkan fungsi CSS adalah untuk mendesain halaman website seperti mengatur warna background dan font yang digunakan, ukuran layout, mengubah tampilan form, dan masih banyak lagi. Jika kamu ingin membuat tampilan website menjadi lebih interaktif, maka kamu wajib belajar CSS untuk menguasai skill web design. Berikut pengenalan CSS dan HTML.
Tentang CSS
Seiring berkembanganya teknologi, CSS tidak hanya digunakan di HTML saja. Tapi juga dapat digunakan untuk mendesain tampilan aplikasi Android. Coding CSS menggunakan penanda id atau class. Berikut contoh tutorial HTML dan CSS dasar.
Dalam tutorial CSS di atas, terdapat atribut style pada tag <h1> di mana nilai dari atribut tersebut adalah kode CSS yang ingin diterapkan. Pada dasarnya HTML adalah kumpulan dari tag-tag yang disusun hingga memiliki bagian-bagian tertentu seperti paragraf, list atau tabel. Sedangkan CSS digunakan untuk mendesain tag-tag HTML ini. Pada contoh di atas ‘p’ (paragraf) merupakan bagian baris kode CSS untuk menspesifikasikan elemen HTML atau disebut selector. Dalam sintaks CSS, informasi yang ada di dalam tanda kurung merupakan sebuah deklarasi yang di dalamnya terdapat properti dan nilai yang diaplikasikan ke dalam selector.
Contoh properti dalam struktur dasar CSS adalah ukuran, font, warna, layout, format teks, dan sebagainya. Sedangkan nilai yang dimaksud adalah pengaturan yang diterapkan dalam properti. Misalnya dari contoh di atas, ‘color’ dan ‘text-align’ merupakan properti, sedangkan ‘blue’ dan ‘center’ adalah sebuah nilai. Jadi struktur CSS yang ada dalam tanda kurung color:blue;text-align:center; merupakan sebuah deklarasi. Lalu ‘p’ dalam paragraf HTML adalah sebuah selector. Keduanya merupakan prinsip dasar dari penggunaan CSS dan HTML.
Coding CSS
Kebutuhan akan halaman web yang semakin kompleks membuat bahasa CSS diperlukan untuk bisa membuat suatu paragraf menjadi berwarna sesuai dengan yang kita inginkan. Penggunaannya yang sangat mudah membuat CSS kerap digunakan, bahkan untuk programmer pemula sekalipun untuk membuat website modern. Jika kamu ingin belajar basic CSS, berikut contoh coding CSS.
Kode CSS Lengkap
CSS memungkinkan kita mengubah tampilan halaman website tanpa mengubah isi dari halaman tersebut. Kamu bisa belajar CSS lengkap dengan melihat panduan cara mendesain tampilan website berikut ini.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
/* overflow: hidden; */
}
.wave{
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap :7rem;
padding: 0 2rem;
}
.img{
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content{
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.img img{
width: 500px;
}
form{
width: 360px;
}
.login-content img{
height: 100px;
}
.login-content h2{
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div{
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
margin-top: 0;
}
.i{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i{
transition: .3s;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div > h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: .3s;
}
.input-div:before, .input-div:after{
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: .4s;
}
.input-div:before{
right: 50%;
}
.input-div:after{
left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
width: 50%;
}
.input-div.focus > div > h5{
top: -5px;
font-size: 15px;
}
.input-div.focus > .i > i{
color: #38d39f;
}
.input-div > div > input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
font-family: 'poppins', sans-serif;
}
.input-div.pass{
margin-bottom: 4px;
}
a{
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: .3s;
}
a:hover{
color: #38d39f;
}
.btn{
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover{
background-position: right;
}
@media screen and (max-width: 1050px){
.container{
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px){
form{
width: 290px;
}
.login-content h2{
font-size: 2.4rem;
margin: 8px 0;
}
.img img{
width: 400px;
}
}
@media screen and (max-width: 900px){
.container{
grid-template-columns: 1fr;
}
.img{
display: none;
}
.wave{
display: none;
}
.login-content{
justify-content: center;
}
}
/* MAIN PAGE */
navbar {
display: flex;
background-color: #05d595;
justify-content: space-between;
padding: 10px;
color: white;
position: fixed;
top: 0;
width: 100%;
}
navbar button {
background-color: white;
border: none;
width: 80px;
border-radius: 10px;
color: black;
cursor: pointer;
transition: .5s;
}
navbar button:hover {
background-color: white;
opacity: 0.9;
font-weight: bold;
transform: scale(1.1);
}
.main-container {
margin: 4% 6%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card {
/* transition: .5s; */
box-shadow: 2px 2px 10px gray;
margin: 30px;
}
.card:hover {
/* transform: scale(1.1); */
box-shadow: 5px 5px 25px #cae8d5;
}
.card .card-image img {
width: 250px;
}
.card .card-name {
display: flex;
background-color: #05d595;
justify-content: center;
align-items: center;
color: white;
padding: 10px;
}
.card .card-info {
display: flex;
align-items: center;
}
.card .card-info span {
padding: 5px;
background-color: #32be8f;
opacity: 0.4;
color: white;
font-weight: bold;
}
.card .card-info p {
padding: 5px;
background-color: #32be8f;
opacity: 0.4;
color: white;
font-weight: bold;
text-align: right;
width:100%;
}
.add-btn {
position: fixed;
bottom: 15px;
right: 15px;
background-color: #05d595;
border-radius: 100%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
cursor: pointer;
}
.add-btn i {
font-size: 30px;
color: white;
}
.add-btn:hover {
transform: scale(1.2);
font-weight: bold;
}
.edit-container {
margin: 5% 6%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
.edit-container h1 {
margin: 20px;
}
Setelah ini kamu bisa mencari materi atau tutorial CSS lengkap di internet untuk latihan dasar CSS atau ikut kelas Intro to Programming Hacktiv8. Di program ini kamu akan mempelajari fundamental pemrograman dan bahasa pemrograman seperti HTML, CSS, dan JavaScript untuk membuat website yang interaktif dengan dibimbing instruktur profesional. Kamu bisa belajar di luar jam kerja serta mendapat sertifikat setelah menyelesaikan kelas untuk mendukung karirmu. Yuk, kuasai skill CSS dengan belajar di kelas Intro to Programming. Daftar sekarang melalui hacktiv8.com/parttime/intro-to-programming
