Teori CSS lengkap
Hari Ini:
CSS
Jam Digital
Oke IT programer go kembali lagi,kali ini akan memmbagikan teori tentang CSS.oke simak saja ya.....:)
1. PENGERTIAN CSS, apa sebelumnya Anda tau apa itu css???
CSS adalah kependekan dari Cascading Style Sheet. Merupakan satu kode pemrograman yang bertujuan untuk menghias dan mengatur layout pada web supaya menjadi lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consurtium atau bisa disebut W3C pada tahun 1996. Awalnya 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 Mozila XUL (Xml User Interface Language).
CSS digunakan oleh web programmer dan juga web designer untuk menentukan warna, tata letak font, dan juga semua aspek lain dari presentasi dokumen. Saat ini,hampir tidak ada situs web yangbdi bangun tanpa kode CSS.
2. Menginput Kode CSS ke Halaman HTML
Sebelum kita menginput file.css kita harus membuat file html terlebih dahulu, lalu kita menambah kan tag<link> pada html di dalam tag <head>.
Kemudian kita membuat file css dengan format namafile.css
Lalu kita buat tag link terlebih dahulu di dalam tag head, kemudian kita berikan atribut untuk mereferensi file css dengan menggunakan href="namafile.css"
Lalu setelah href="namafile.css" kita tambahkan type dan rel sehingga akan menjadi: <link href="namafile.css" type="text/css" rel="stylesheet">
3. Pengertian Selector, property,Value pada CSS
Selector, property dan value ini adalah elemen inti dari CSS, saya akan membahas tentang ketiga aspek ini.
Karena kode CSS digunakan untuk memanipulasi suatu tag HTML, maka dari itu CSS membutuhkan untuk menghubungkan kode CSS dengan HTML yang sesuai. Inilah yang dimaksud dengan selector dalam CSS. Gimana ud paham???:)
Sesuai dengan namanya, selector digunakan untuk memanipulasi suatu web atau memberikan style.
Selector paling dasar pada CSS adalah tag HTML itu sendiri, misalnya: tag p, i, li, dll. Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan.
Value CSS adalah nilai property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya berupa red,blue, dll.
Untuk lebih jelasnya tentang selector, properti, value pada css:
h1 {color:blue; font-size:12px;}
4. Aturan dan penulisan kode CSS
Penulisan kode CSS dalam HTML dibagi menjadi tiga yaitu dengan cara internal, eksternal, inline.
<!DOCTYPE html>
<html>
<head>
<title>.....</title>
<style type ="text/css">
h1 {
font-family :Helvetica;
color :#FF0000;
}
p {
font-family :arial;
color :blue;
}
</style>
</head>
<body>
<h1> saya lagi belajar</h1>
<p>mencoba css</p>
</body>
</html>
Eksternal css => harus buat file css terlebih dahulu,dengan ekstensi (.css)
Kode pembuatan:
<link href = "style.css" type = "text/css" rel = "stylesheet">
Inline css => ditulis langsung pada atribut elemen HTML.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<h1 style = "color :green; font-family :calibri;">saya lagi belajar</h1>
<p>mencoba css</p>
</body>
</html>
5. Macam-macam selector
6. Satuan nilai (value)
Absolut => biasa digunakan dimedia percetakan antara lain mm, cm, in, pt dan pica.( 1 inchi = 25,4mm) ukuran point(pt) biasa digunakan seperti microsoft word (1 inchi =72 pt) ukuran normal 12 pt=1/8inchi. Contoh penggunaan: p{font-size :18pt;}
Relatif => seperti (px), (em), (ex) yang paling banyak digunakan adalah pixel(px). (1px = 1px dimonitor)
7. Kode warna
RGBA => untuk menulis kode warna RGBA yaitu harus menggunakan desimal, dan menambahkan keyword " rgba" di awal penulisan nilai.
Kode pembuatan:
h2 {
color :rgba(255,0,0,0.3);
background-color :rgba(0,0,255,0.6);
}
HSL => kode awalnya memakai variabel Hue, saturation, dan Lightness. Hue-> nilai dari sudut pandang dari vertikal, Saturation -> nilai jarak horizontal, Lightness -> tingginya. Dan menggunakan (%) dan harus menambahkan keyword "hsl" di awal penulisan nilai.
HSLA => sama halnya dengan HSL
8. Atribut selector dengan CSS
Atribut selector -> selector css yang digunakan untuk mencari elemen HTML dengan menggunakan nilai atribut dari tag HTML. Untuk menggunakan atribut selector penulisan harus didalam kurung siku contoh: [href], img[width = "200 px"]
Macam-macam atribut selector
-> [attr = value] => img[width = " 200px"] {
border : 2px solid red;
}
-> [attr^= value] => a [href^="http://"] {
color :red;
}
->[attr$ = value] => a [href$=".pdf"] {
color :brown;
}
9. Pseudo-class dan pseudo-element
Kode pembuatan:
/*link belum dikunjungi*/
a : link {
color :#FF0000;
}
/*link sudah dikunjungi*/
a : visited {
color :#00FF00;
}
/*ada cursor mouse di atas link*/
a : hover {
color: #0000FF;
}
10. Mengatur tinggi baris (line-height)
Nilai dari property line-height bisa diisi dengan nilai pixel,persen,em,atau angka(tanpa satuan)
Kode pembuatan:
p {
line-height :18px;
}
11. Membuat teks Underline,Overline, dan Line-through
Kode pembuatan:
span.under {
text-decoration : underline;
}
span.over {
text-decoration : overline;
}
span.line {
text-decoration : line-through;
}
tambahan:
-> text-decoration : none; ( untuk tag<a>)
-> text-decoration : blink; (untuk teks berkedip)
12. Mengatur lebar spasi antara kata
Untuk membuat spasi antar karakter semakin jauh gunakan nilai positif, dan sebaliknya jika ingin merapatkan spasi antar karakter gunakan nilai negatif
Kode pembuatan:
h1 {
letter-spacing :2px;
}
h2 {
letter-spacing : -3px;
}
Dan sekian penjelasan tentang css klo ada kata yang salah saya minta maaf..... Sampai ketemu kembali :)
CSS
Oke IT programer go kembali lagi,kali ini akan memmbagikan teori tentang CSS.oke simak saja ya.....:)
1. PENGERTIAN CSS, apa sebelumnya Anda tau apa itu css???
CSS adalah kependekan dari Cascading Style Sheet. Merupakan satu kode pemrograman yang bertujuan untuk menghias dan mengatur layout pada web supaya menjadi lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consurtium atau bisa disebut W3C pada tahun 1996. Awalnya 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 Mozila XUL (Xml User Interface Language).
CSS digunakan oleh web programmer dan juga web designer untuk menentukan warna, tata letak font, dan juga semua aspek lain dari presentasi dokumen. Saat ini,hampir tidak ada situs web yangbdi bangun tanpa kode CSS.
2. Menginput Kode CSS ke Halaman HTML
Sebelum kita menginput file.css kita harus membuat file html terlebih dahulu, lalu kita menambah kan tag<link> pada html di dalam tag <head>.
Kemudian kita membuat file css dengan format namafile.css
Lalu kita buat tag link terlebih dahulu di dalam tag head, kemudian kita berikan atribut untuk mereferensi file css dengan menggunakan href="namafile.css"
Lalu setelah href="namafile.css" kita tambahkan type dan rel sehingga akan menjadi: <link href="namafile.css" type="text/css" rel="stylesheet">
3. Pengertian Selector, property,Value pada CSS
Selector, property dan value ini adalah elemen inti dari CSS, saya akan membahas tentang ketiga aspek ini.
Karena kode CSS digunakan untuk memanipulasi suatu tag HTML, maka dari itu CSS membutuhkan untuk menghubungkan kode CSS dengan HTML yang sesuai. Inilah yang dimaksud dengan selector dalam CSS. Gimana ud paham???:)
Sesuai dengan namanya, selector digunakan untuk memanipulasi suatu web atau memberikan style.
Selector paling dasar pada CSS adalah tag HTML itu sendiri, misalnya: tag p, i, li, dll. Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan.
Value CSS adalah nilai property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya berupa red,blue, dll.
Untuk lebih jelasnya tentang selector, properti, value pada css:
h1 {color:blue; font-size:12px;}
4. Aturan dan penulisan kode CSS
Penulisan kode CSS dalam HTML dibagi menjadi tiga yaitu dengan cara internal, eksternal, inline.
- Internal css => ditulis di dalam blok head ataupun body.
<!DOCTYPE html>
<html>
<head>
<title>.....</title>
<style type ="text/css">
h1 {
font-family :Helvetica;
color :#FF0000;
}
p {
font-family :arial;
color :blue;
}
</style>
</head>
<body>
<h1> saya lagi belajar</h1>
<p>mencoba css</p>
</body>
</html>
Eksternal css => harus buat file css terlebih dahulu,dengan ekstensi (.css)
Kode pembuatan:
<link href = "style.css" type = "text/css" rel = "stylesheet">
Inline css => ditulis langsung pada atribut elemen HTML.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<h1 style = "color :green; font-family :calibri;">saya lagi belajar</h1>
<p>mencoba css</p>
</body>
</html>
5. Macam-macam selector
- Selector tag = p{ }, li{ }, h2 { }.
- Selector class = ditandai dengan(.) sebelum nama selector, misalkan p.satu { }. Bisa digunakan berulang-ulang.
- Selector id = ditandai dengan (#) sebelum nama selector, misalkan #aaa. Bisa digunakan hanya sekali.
- Selector Pseudo class = digunakan untuk mengatur atribut suatu tag.misalkan mengatur (a), jadi :hover, :link, :visited, :active
6. Satuan nilai (value)
Absolut => biasa digunakan dimedia percetakan antara lain mm, cm, in, pt dan pica.( 1 inchi = 25,4mm) ukuran point(pt) biasa digunakan seperti microsoft word (1 inchi =72 pt) ukuran normal 12 pt=1/8inchi. Contoh penggunaan: p{font-size :18pt;}
Relatif => seperti (px), (em), (ex) yang paling banyak digunakan adalah pixel(px). (1px = 1px dimonitor)
7. Kode warna
RGBA => untuk menulis kode warna RGBA yaitu harus menggunakan desimal, dan menambahkan keyword " rgba" di awal penulisan nilai.
Kode pembuatan:
h2 {
color :rgba(255,0,0,0.3);
background-color :rgba(0,0,255,0.6);
}
HSL => kode awalnya memakai variabel Hue, saturation, dan Lightness. Hue-> nilai dari sudut pandang dari vertikal, Saturation -> nilai jarak horizontal, Lightness -> tingginya. Dan menggunakan (%) dan harus menambahkan keyword "hsl" di awal penulisan nilai.
HSLA => sama halnya dengan HSL
8. Atribut selector dengan CSS
Atribut selector -> selector css yang digunakan untuk mencari elemen HTML dengan menggunakan nilai atribut dari tag HTML. Untuk menggunakan atribut selector penulisan harus didalam kurung siku contoh: [href], img[width = "200 px"]
Macam-macam atribut selector
-> [attr = value] => img[width = " 200px"] {
border : 2px solid red;
}
-> [attr^= value] => a [href^="http://"] {
color :red;
}
->[attr$ = value] => a [href$=".pdf"] {
color :brown;
}
9. Pseudo-class dan pseudo-element
Kode pembuatan:
/*link belum dikunjungi*/
a : link {
color :#FF0000;
}
/*link sudah dikunjungi*/
a : visited {
color :#00FF00;
}
/*ada cursor mouse di atas link*/
a : hover {
color: #0000FF;
}
10. Mengatur tinggi baris (line-height)
Nilai dari property line-height bisa diisi dengan nilai pixel,persen,em,atau angka(tanpa satuan)
Kode pembuatan:
p {
line-height :18px;
}
11. Membuat teks Underline,Overline, dan Line-through
Kode pembuatan:
span.under {
text-decoration : underline;
}
span.over {
text-decoration : overline;
}
span.line {
text-decoration : line-through;
}
tambahan:
-> text-decoration : none; ( untuk tag<a>)
-> text-decoration : blink; (untuk teks berkedip)
12. Mengatur lebar spasi antara kata
Untuk membuat spasi antar karakter semakin jauh gunakan nilai positif, dan sebaliknya jika ingin merapatkan spasi antar karakter gunakan nilai negatif
Kode pembuatan:
h1 {
letter-spacing :2px;
}
h2 {
letter-spacing : -3px;
}
Dan sekian penjelasan tentang css klo ada kata yang salah saya minta maaf..... Sampai ketemu kembali :)
0 Response to "Teori CSS lengkap"
Post a Comment