CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS.
Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :
Body {background-color: white;}
‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.
Contoh penulisan kode css :
Body {background-color: white;}
‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.
Berikut langkah-langkah membuat CSS pada HTML, pertama ketikkan tag seperti di bawah ini:
<html>
<title>Buat Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<header>
<h1>Buat Website</h1>
</header>
<menu>
<a href="index.html">Home</a>
<a href="profil.html">Profil</a>
<a href="#">Produk</a>
<a href="#">Kontak</a>
</menu>
<article>
<h1>Judul Artikel</h1>
<img src="images/2.jpg">
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
</article>
<footer>
<p>Copyright © 2016</p>
</footer>
</body>
</html>
<title>Buat Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<header>
<h1>Buat Website</h1>
</header>
<menu>
<a href="index.html">Home</a>
<a href="profil.html">Profil</a>
<a href="#">Produk</a>
<a href="#">Kontak</a>
</menu>
<article>
<h1>Judul Artikel</h1>
<img src="images/2.jpg">
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
</article>
<footer>
<p>Copyright © 2016</p>
</footer>
</body>
</html>
Screenshotnya seperti di bawah ini:
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang
ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan
ekstensi .html. Di sini saya memberi nama index.html. Setelah itu klik Save untuk menyimpan.
Lalu buat folder baru di tempat kita menyimpan file html tadi. Caranya klik kanan, lalu klik New, lalu klik Folder.
Beri nama images pada folder baru tersebut.
Lalu masukkan gambar sesuai dengan yang anda kehendaki pada folder images dengan syarat namanya harus sama dengan yang telah anda ketik pada file html tadi. Di sini gambar yang saya gunakan formatnya memiliki ukuran lebar dan tingginya 200pixels x 138pixels.
Lalu buat file baru, dengan cara klik menu File kemudian klik New File.
Ketikkan seperti di bawah ini.
*{padding: 0; margin: 0;}
body{background: #27ae60}
header{background: #3498db; width: 800px; margin: auto; padding: 25px; color: yellow;}
menu{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
menu a{color: white; text-decoration: none; margin: 0 20px 0 0;}
menu a:hover{text-decoration: underline}
article{background: #95a5a6; width: 800px; margin: auto; padding: 25px;}
article img{float: left; margin: 10px 10px 10px 0;}
article p{line-height: 20px; margin: 0 0 10px 0;}
footer{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
footer p{color: white;}
body{background: #27ae60}
header{background: #3498db; width: 800px; margin: auto; padding: 25px; color: yellow;}
menu{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
menu a{color: white; text-decoration: none; margin: 0 20px 0 0;}
menu a:hover{text-decoration: underline}
article{background: #95a5a6; width: 800px; margin: auto; padding: 25px;}
article img{float: left; margin: 10px 10px 10px 0;}
article p{line-height: 20px; margin: 0 0 10px 0;}
footer{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
footer p{color: white;}
Screenshotnya seperti di bawah ini.
Lalu simpan dengan cara klik menu File, lalu klik Save As.
Simpan di folder yang sama dengan file html tadi. Di sini saya menyimpan dengan nama style.css. Setelah itu klik Save untuk menyimpan.
Disimpan dengan nama style.css karena mengikuti apa yang kita ketik pada file html tadi.
Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi. Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak tampilan web di bawah ini terlihat lebih rapi dan nyaman dilihat.
Sekian dan terima kasih semoga bermanfaat bagi pembaca.
No comments:
Post a Comment