pembahsan tentang css
2 posters
Halaman 1 dari 1
pembahsan tentang css
CSS atau kepanjangan dari “Cascading Style Sheets” adalah bahasa style sheet yang digunakan untuk menggambarkan presentasi dari dokumen yang ditulis dalam bahasa markup. Meskipun paling sering digunakan untuk mengatur gaya visual halaman web dan user interface yang ditulis dalam HTML dan XHTML, yang bahasa dapat diterapkan untuk setiap XML dokumen, termasuk XML polos, SVG dan XUL, dan berlaku untuk render di pidato, atau media lainnya. Seiring dengan HTML dan JavaScript, CSS adalah teknologi dasar yang digunakan oleh sebagian besar website untuk membuat halaman web secara visual menarik, user interface untuk aplikasi web, dan user interface untuk aplikasi mobile. Nah, bahasa mudahnya versi kami, CSS merupakan merupakan kode-kode dasar dan kode yang saling berhubungan untuk mengatur format atau susunan HTML. konsep CSS pertama kali di usulkan pada tahun 1994 oleh Håkon Wium Lie dan Bert Bos saat mereka bekerja di CERN.
Re: pembahsan tentang css
Panduan dan cara penggunaa
Jika anda telah memiliki pengetahuan dasar pada HTML, maka tidaklah sulit untuk membangun sebuah css yang menarik bagi website anda. Anda tinggal mengkombinasikan platform apa yang anda pakai untuk membuat website. Untuk mudahnya, kami sangat menyarankan anda belajar menggunakan template website dasar. yaitu gabungan dari CSS + JS + HTML. Jika sudah mahir, barulah anda menerapkannya ke beberapa platform website seperti wordpress, drupal, meganto, joomla, dan lainnya. Untuk dasar CSS, ikuti contoh berikut.
body {
….kombinasikan dengan css seluruh laman anda..
}
#header {
…
.menu {
}
}
#footer {
…
.credit {
}
}
Penjelasan:
Tag body menandakan element keseluruhan dari susunan HTML
Tanda {..} merupakan tanda pembuka dan penutup di CSS
Tanda : dan ; biasanya digunakan untuk membuka dan menutup kode di css yang ada di dalam kode pembuka dan penutup { dan }. Contoh: body { background: #fff; }
Tanda # biasanya di gunakan untuk menandakan kode id tertentu saat kita memanggil kode css tersebut di markup HTML. misalnya pemanggilan kode css di markup HTML seperti di bawah.
<div id=”header”>
<div class=”menu”></div></div>
Ikuti contoh diatas untuk membuat kode CSS di masing-masing elemen dan menyusunnya di HTML.
Contoh CSS
body {
background: #fff;
font-family: “Roboto Slab”;
font-size: 30px;
margin: 0 1px 0 0;
border: 3px solid;
#header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
.menu {
display: inline;
}
}
#footer{
width:980px;
height: 150px;
padding: 10px;
font-size: 12px;
background-color: #94171b;
color: #fff;
}
#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{width:300px; text-align:left; border: 1px solid;}
#footer_right{float:right; width:300px; text-align:left; border: 1px solid;}
Penjelasan
Contoh diatas meliputi body, header, menu, footer 3 colom.
Contoh Pemanggilan Kode CSS di HTML
<div id:”header”>
<div class:”menu”>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
</div>
</div>
<div id=”footer”>
<div id=”footer_left”>
<b>SITE NAVIGATION</b><br>
<a href=”/dev/site/”>Home</a><br>
<a href=”/dev/site/about.php”>About</a><br>
<a href=”/dev/site/dining.php”>Food</a><br>
<a href=”/dev/site/drinks.php”>Drinks</a><br>
<a href=”/dev/site/”>Contact</a>
</div>
<div id=”footer_middle”>
<b>CONNECT WITH US SOCIALLY</b><br>
https://www.facebook.com
http://www.twitter.com
http://www.instagram.com
https://www.youtube.com
</div>
<div id=”footer_right”>
©2015 Site. All rights reserved<br><br>
</div>
</div>
Pemanggilan file style css di HTML
Biasanya, folder file assets baik css, images, js di pisahkan di folder public HTML di file manager anda. Nah, untuk pemanggilan folder tersebut, silahkan gunakan berikut ini dibawah tag <head> anda.
<link rel=”stylesheet” href=”assets/css/style.css” />
File CSS selalu berakhiran “.css”. jadi, perhatikan tulisan assets/css/style.css yang saya berikan tanda Bold tersebut. penjelasannya adalah 2 folder public yaitu folder assets, folder css dan satu file css yaitu style.css. Silahkan kombinasikan sesuai dengan folder di public html anda.
Note:
Dibeberapa kasus yang sering kita jumpai, ada beberapa file css yang sedikit. Nah, agar anda menghemat ruang di hosting anda, silahkan langsung letakkan saja file css anda di file HTML tanpa membuatnya di folder tertentu di file manager anda. untuk kode pemanggilannya adalah sebagai berikut.
<head>
..
<style>
…
KODE CSS ANDA DISINI
..
</style>
Jika anda telah memiliki pengetahuan dasar pada HTML, maka tidaklah sulit untuk membangun sebuah css yang menarik bagi website anda. Anda tinggal mengkombinasikan platform apa yang anda pakai untuk membuat website. Untuk mudahnya, kami sangat menyarankan anda belajar menggunakan template website dasar. yaitu gabungan dari CSS + JS + HTML. Jika sudah mahir, barulah anda menerapkannya ke beberapa platform website seperti wordpress, drupal, meganto, joomla, dan lainnya. Untuk dasar CSS, ikuti contoh berikut.
body {
….kombinasikan dengan css seluruh laman anda..
}
#header {
…
.menu {
}
}
#footer {
…
.credit {
}
}
Penjelasan:
Tag body menandakan element keseluruhan dari susunan HTML
Tanda {..} merupakan tanda pembuka dan penutup di CSS
Tanda : dan ; biasanya digunakan untuk membuka dan menutup kode di css yang ada di dalam kode pembuka dan penutup { dan }. Contoh: body { background: #fff; }
Tanda # biasanya di gunakan untuk menandakan kode id tertentu saat kita memanggil kode css tersebut di markup HTML. misalnya pemanggilan kode css di markup HTML seperti di bawah.
<div id=”header”>
<div class=”menu”></div></div>
Ikuti contoh diatas untuk membuat kode CSS di masing-masing elemen dan menyusunnya di HTML.
Contoh CSS
body {
background: #fff;
font-family: “Roboto Slab”;
font-size: 30px;
margin: 0 1px 0 0;
border: 3px solid;
#header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
.menu {
display: inline;
}
}
#footer{
width:980px;
height: 150px;
padding: 10px;
font-size: 12px;
background-color: #94171b;
color: #fff;
}
#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{width:300px; text-align:left; border: 1px solid;}
#footer_right{float:right; width:300px; text-align:left; border: 1px solid;}
Penjelasan
Contoh diatas meliputi body, header, menu, footer 3 colom.
Contoh Pemanggilan Kode CSS di HTML
<div id:”header”>
<div class:”menu”>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>
</div>
</div>
<div id=”footer”>
<div id=”footer_left”>
<b>SITE NAVIGATION</b><br>
<a href=”/dev/site/”>Home</a><br>
<a href=”/dev/site/about.php”>About</a><br>
<a href=”/dev/site/dining.php”>Food</a><br>
<a href=”/dev/site/drinks.php”>Drinks</a><br>
<a href=”/dev/site/”>Contact</a>
</div>
<div id=”footer_middle”>
<b>CONNECT WITH US SOCIALLY</b><br>
https://www.facebook.com
http://www.twitter.com
http://www.instagram.com
https://www.youtube.com
</div>
<div id=”footer_right”>
©2015 Site. All rights reserved<br><br>
</div>
</div>
Pemanggilan file style css di HTML
Biasanya, folder file assets baik css, images, js di pisahkan di folder public HTML di file manager anda. Nah, untuk pemanggilan folder tersebut, silahkan gunakan berikut ini dibawah tag <head> anda.
<link rel=”stylesheet” href=”assets/css/style.css” />
File CSS selalu berakhiran “.css”. jadi, perhatikan tulisan assets/css/style.css yang saya berikan tanda Bold tersebut. penjelasannya adalah 2 folder public yaitu folder assets, folder css dan satu file css yaitu style.css. Silahkan kombinasikan sesuai dengan folder di public html anda.
Note:
Dibeberapa kasus yang sering kita jumpai, ada beberapa file css yang sedikit. Nah, agar anda menghemat ruang di hosting anda, silahkan langsung letakkan saja file css anda di file HTML tanpa membuatnya di folder tertentu di file manager anda. untuk kode pemanggilannya adalah sebagai berikut.
<head>
..
<style>
…
KODE CSS ANDA DISINI
..
</style>
Re: pembahsan tentang css
ohh jadi itu css
lalu adakah kegunanan lain selain untuk mengatur gaya visual halaman web dan user interface?
lalu adakah kegunanan lain selain untuk mengatur gaya visual halaman web dan user interface?
Re: pembahsan tentang css
Yang saya tahu sih cuman itu kalau css buat mempercantik tampilan website misal menjadi flat design atau apa
Re: pembahsan tentang css
kaka...koq cman 2 orang ajah yang coment sihh....gue ikutan coment dehhh :v
Mahmudin- Tamu
Halaman 1 dari 1
Permissions in this forum:
Anda tidak dapat menjawab topik
|
|