Pengertian CSS dan Contohnya

  1. Pengertian CSS

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID. Fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

2.  Struktur CSS

Bagian pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan blue adalah value.

 

SUBLIME TEXT 3, Aplikasi Web Editor Terbaik

Assalamualaikum Wr. Wb,

Alhamdulillah, kali ini bisa posting artikel lagi. Dan pada postingan ini saya akan membagi sedikit pengalaman pribadi dalam membuat halaman website. Yang mana dalam membuat website tersebut pasti tidak pernah lepas dari aplikasi web editor sebagai pendukungnya.

 

Sublime Text 3 merupakan aplikasi Web Editor yang saya pakai sampai saat ini. Yang mana aplikasi ini sangat ringan dan tidak ribet dalam penggunaannya. Desain warna tulisan kodingnya yang sangat interaktif beserta variasi warna yang menarik. Selain itu warna teks kodingnya juga bisa diganti warna temanya. Jadi dengan teks koding yang enak untuk dilihat bisa membuat banyak pengguna betah dalam proses koding. Itulah beberapa alasan yang tepat untuk membangun sebuah web.

Continue reading

Menggunakan Satuan Ukuran Relatif

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menggunakan satuan ukuran relatif dengan CSS. Nah biar sobat WebHozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya sobat Webhozz.

Salah satu pendekatan penting dalam membuat tampilan yang responsive adalah pemakaian satuan ukuran relatif. Lebar sebuah elemen web tidak menggunakan satuan tetap seperti px (piksel), namun menggunakan prosentase. Continue reading

Pentingnya Belajar Web Desain

Assalamualaikum Wr. Wb,

Kembali lagi dengan saya, dan Alhamdulillah sekarang bisa posting artikel lagi. Pada postingan ini, saya ingin membahas tentang Web Desain. Yang mana Web Desain itu merupakan suatu ilmu atau pemahaman tentang desain bentuk halaman suatu website.

 

Web Desain itu termasuk penting, karena web desain itu merupakan tahap awal dalam membuat suatu website. Web desain itu meliputi style, warna, bentuk kerangka suatu website. Dengan tampilan yang baik juga, seorang pengguna website bisa merasa nyaman dan betah berada dalam web yang kita bangun.

Continue reading

Menata Font Dengan CSS

 

Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai menata font dengan CSS. Agar sobat Webhozz tidak bingung langsung aja yuk kita masuk ke pembahasan artikelnya sobat Webhozz.

Untuk menata font, kalian dapat menggunakan properti font dengan berbagai variasinya. Berikut contohnya : Continue reading

Membuat Link Menarik Pada Text Link Menggunakan CSS

Assalamualaikum Wr. Wb.

Kembali lagi bersama Webhozz Blog. Pada postingan ini saya ingin membagikan sedikit ilmu tentang CSS, yaitu tentang text hyperlink yang biasanya berisi teks biasa yang selalu kita gunakan untuk menuju halaman tertentu saat diklik. Biasanya Tampilan Standarnya seperti ini.

Biasanya text link seperti itu ketika sudah pernah kita klik, akan berubah menjadi warna ungu. Akan tetapi, saat belum diklik warnanya jadi warna biru. Hal tersebut pasti rasanya agak kurang enak menarik untuk dilihat kan? Jadi, di postingan ini kita akan membuat hal tersebut menjadi menarik semenarik mungkin. Disini kita akan membuatnya menjadi tombol yang menarik. Mari kita mulai.

Continue reading

HTML Layouts

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena dengan mudah dapat diposisikan dengan CSS.
Contoh ini menggunakan 4 div elemen untuk membuat tata letak beberapa kolom:

kode html nya seperti berikut:


<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>

<p>
London is the capital city of England.
 It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>

<p>
Standing on the River Thames, 
London has been a major settlement for two millennia,
its history going back to its founding by the Romans, 
who named it Londinium.
</p>

</div>

<div id="footer">
Copyright © webhozz.com
</div>

lalu kode css seperti ini:

 

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 

maka hasinya akan sperti ini:

html_layout

HTML Classes

Classing Blok Elements Class HTML atribut befungsi memungkinkan untuk menentukan style yang sama untuk “equel” elemen.

kode cssnya seperti berikut:

div.sama {    
background-color:black;    
color:white;    
margin:20px;    
padding:20px;
}

maka kode pada htmlnya adalah sebagai berikut:


<div class="cities">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>

<div class="cities"><h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater</p>
</div>

maka hasilnya akan seperti gambar di bawah ini:

classes

HTML Block dan Inline Elements

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.

-Elemen blok-tingkat

Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa). Elemen div adalah elemen blok-tingkat.

Contoh unsur blok-tingkat:

     <div>
     <h1> - <h6>
     <p>
     <form>

-Inline Elements

Sebuah elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.

Ini adalah inline span elemen dalam sebuah paragraf.

Contoh elemen inline:


<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Maka akan terlihat seperti ini :
london