Oke sekarang kita sudah sampai di style 
Di sini ane hanya akan menjelaskan sedikit saja atribut untuk pengenalan style. Nanti atribut-atribut dan fungsi yang lain akan dibahas lebih dalam di tutor CSS. Oke langsung aja check it out
berikut adalah macam-macam atribut dari style
lalu ada juga style yang digunakan untuk merubah style bawaan dari link alias tag <a>. Karena biasanya link memiliki style default seperti
Kira-kira seperti itulah style CSS dasar dan tentunya masih banyak lagi atribut-atribut di dalam style lainnya yg nanti akan kita bahas di tutor CSS. Sekarang kita coba dulu kodingnya biar lebih paham kita akan bikin file baru untuk css nya dengan nama style.css (bisa diganti sesuai selera), dan untuk uji coba menggunakan file index.html
di atas adalah koding file css nya
pada file index.html tinggal dipanggil saja file style.css dengan menggunakan tag <link rel="stylesheet" href="style.css"> seperti koding di atas. Sekarang kita run di browser
Oke sekian dulu kita lanjut ke tutor berikutnya
Di sini ane hanya akan menjelaskan sedikit saja atribut untuk pengenalan style. Nanti atribut-atribut dan fungsi yang lain akan dibahas lebih dalam di tutor CSS. Oke langsung aja check it out- Use the style attribute for styling HTML elements alias memberi style atau desain pada HTML
- Inline - by using the style attribute in HTML elements alias langsung ditulis menjadi atribut di dalam tag
- Internal - by using a <style> element in the <head> section alias memisahkan style di luar tag dan menaruhnya di <head> dan tinggan di panggil di tag html dengan atribut id="" atau class=""
- External - by using an external CSS file alias membuat file CSS tersendiri yang berisi style yang tinggal dipanggil menggunakan tag <link rel="stylesheet" href="style.css"> ini ditaruh di dalam <head> dan tinggal dipanggil fungsi stylenya dengan menggunakan atribut id="" atau class="" dari dalam tag
berikut adalah macam-macam atribut dari style
- Use background-color for background color memberi wana pada background
- Use color for text colors untuk memberi warna pada tulisan
- Use font-family for text fonts alias macam-macam font seperti arial, times ne roman, verdana, dll
- Use font-size for text sizes untuk ukuran font
- Use text-align for text alignment untuk rata tulisan seperti rata kanan, rata kiri, atau yg lain
- width / height lebar atau tinggi digunakan untuk menentukan lebar (width) dan tinggi (height)
- border untuk memberi pembatas di sekitar elemn/tag HTML yang diberi border
- padding untuk memberi spasi atau jarak di dalam elemen/tag html
- margin untuk memberi spasi atau jarak di luar elemen/tag HTML
- atribut id="" digunakan untuk memanggil style yang didefinisikannya diawali dengan tanda pagar (#)
- atrbut class="" digunakan untuk memanggil style yang didefinisakannya diawali dengan tanda titik (.)
lalu ada juga style yang digunakan untuk merubah style bawaan dari link alias tag <a>. Karena biasanya link memiliki style default seperti
- An unvisited link is underlined and blue - link yang belum di klik atau dikunjungi akan berwarna biru dan memiliki underline atau garis bawah
- A visited link is underlined and purple - link yang sudah di klik atau dikunjungi akan berubah warnanya menjadi ungu
- An active link is underlined and red
Kira-kira seperti itulah style CSS dasar dan tentunya masih banyak lagi atribut-atribut di dalam style lainnya yg nanti akan kita bahas di tutor CSS. Sekarang kita coba dulu kodingnya biar lebih paham
kita akan bikin file baru untuk css nya dengan nama style.css (bisa diganti sesuai selera), dan untuk uji coba menggunakan file index.html
body {
background-color:lightblue;
}
p {
color:red;
padding:10px;
}
pre{
font-family:verdana;
margin:20px;
}
address{
font-size:70px;
border: 1px solid red;
}
blockquote{
text-align:right;
}
img{
width:50px;
height:100px;
}
bdo{
}
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
background-color:lightblue;
}
p {
color:red;
padding:10px;
}
pre{
font-family:verdana;
margin:20px;
}
address{
font-size:70px;
border: 1px solid red;
}
blockquote{
text-align:right;
}
img{
width:50px;
height:100px;
}
bdo{
}
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
di atas adalah koding file css nya
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>ini <abbr>contohnya</abbr>
untuk paragraf
spasi enter tidak terdeteksi</p>
<br />
<pre>ini <cite>contoh</cite>
untuk paragrafnya
mendeteksi paragraf</pre>
<address>contoh
<bdo dir="rtl">paragraf terbalik</bdo>
sama <q>seperti</q> <pre></address>
<blockquote>tulisan ini
nantinya menjorok
kedalam</blockquote>
<img src="c.jpg" />
<a href="lain.html">ini linknya</a>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>ini <abbr>contohnya</abbr>
untuk paragraf
spasi enter tidak terdeteksi</p>
<br />
<pre>ini <cite>contoh</cite>
untuk paragrafnya
mendeteksi paragraf</pre>
<address>contoh
<bdo dir="rtl">paragraf terbalik</bdo>
sama <q>seperti</q> <pre></address>
<blockquote>tulisan ini
nantinya menjorok
kedalam</blockquote>
<img src="c.jpg" />
<a href="lain.html">ini linknya</a>
</body>
</html>
pada file index.html tinggal dipanggil saja file style.css dengan menggunakan tag <link rel="stylesheet" href="style.css"> seperti koding di atas. Sekarang kita run di browser
Oke sekian dulu kita lanjut ke tutor berikutnya
Tidak ada komentar:
Posting Komentar