This action might not be possible to undo. Are you sure you want to continue?
Cascading Style-Sheet Style
-
(CSS) CSS)
Bahtiar, S.Pd., M.Si.
UIN ALAUDDIN MAKASSAR
Apa itu CSS?
CSS : Cascading Style-Sheet Pengembangan HTML (harus memahami HTML) CSS diletakkan dalam kode HTML pada tag <head>«..</head> CSS dapat berbentuk sebuah file
Web 1, Kuliah-11
Manfaat CSS?
Struktur dasar halaman web menjadi lebih mudah dan sederhana Ukuran file HTML menjadi lebih kecil Tampilan web menjadi lebih konsisten Pengembangan web menjadi lebih mudah
Web 1, Kuliah-11
Contoh
H1, huruf:times new roman, warna:merah paragraf, huruf:arial,ukuran:2, warna:biru
Web 1, Kuliah-11
HTML
<html> <head> <title>HTML Murni</title> <body> <h1><font face="Times new Roman" color="red">HTML</font></h1> <p> <font face="arial" size="3" color="blue">HTML adalah singkatan dari Hipertext Markup Language</font> </p> <h1><font face="Times new Roman" color="red">PHP</font></h1> <p> <font face="arial" size="3" color="blue">PHP adalah singkatan dari Hypertext Preprocessor</font> </p> </body> </html>
Web 1, Kuliah-11
HTML+CSS
<html> <head> <title>HTML + CSS</title> <style> h1 { font-family: "Times new roman"; color: red; } p { font-family:arial;color: blue; } </style> <body> <h1>HTML</h1> <p> HTML adalah singkatan dari Hipertext Markup Language </p> <h1>PHP</h1> <p> PHP adalah singkatan dari Hypertext Preprocessor </p> </body> </html>
Web 1, Kuliah-11
Struktur CSS
Web 1, Kuliah-11
Struktur CSS
Struktur CSS terdiri atas 3 bagian: Selector selector {property: value} Property value selector {
<html> <head> <style type="text/css">
selector {property: value}
property: value }
</style> </head> <body> <p>Isi web!</p> </body> </html>
Web 1, Kuliah-11
Contoh:
body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red} p{ text-align: center; color: black; font-family: arial }
Web 1, Kuliah-11
CSS FONT
Web 1, Kuliah-11
CSS FONT
Color Font-family Font-size Font-style Font-variant dll
Web 1, Kuliah-11
CSS Font
Color h2 { color: red; } p { color: #000000; }
<html> <head> <title>HTML + CSS</title> <style> h2 { color: red;} p {color: #000000; } </style> <body> <h2>Ini adalah judul JUDUL</h1> <p> Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> </html>
Web 1, Kuliah-11
CSS Font
font-family h2 { color: red; font-family: ³times new roman´; } p { color: #000000; font-family: arial; }
Web 1, Kuliah-11
CSS Font
<html> <head> <title>HTML + CSS</title> <style> h2 { color: red;
font-family: ³times new roman´; }
p {color: #000000;
font-family: arial;}
</style> <body> <h2>Ini adalah judul JUDUL 1</h1> <p> Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <h2>Ini adalah judul JUDUL 2</h1> <p> Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </html> Web 1, Kuliah-11
CSS Font
Web 1, Kuliah-11
CSS Font
font-size h2 { color: red; font-family: ³times new roman´; font-size: 12px;} p { color: #000000; font-family: arial; font-size: 120%;}
Web 1, Kuliah-11
Web 1, Kuliah-11
CSS Font
Properties lainnya««
Silahkan dicari, dipelajari, dan dikembangkan sendiri«««
Web 1, Kuliah-11
CSS Background
Web 1, Kuliah-11
CSS Background
Background-color Background-image Repeated
repeat, repeat-x, repeat-y, no-repeat
Fixed Positioning
Web 1, Kuliah-11
Background-color
h2 { color: red; font-family: ³times new roman´; font-size: 12px; background-color: yellow;} p { color: #000000; font-family: arial; font-size: 120%; background-color: #66FFFF;}
Web 1, Kuliah-11
Background-color
Web 1, Kuliah-11
Background-image
h2 { color: red; font-family: ³times new roman´; font-size: 12px; background-color: yellow; background-image: url(gambarkecil.gif);} p { color: #000000; font-family: arial; font-size: 120%; background-color: #66FFFF; background-image: url(gambar.jpg);}
Web 1, Kuliah-11
Background-image
Web 1, Kuliah-11
Background-repeat
h2 { color: red; font-family: ³times new roman´; font-size: 12px; background-color: yellow; background-image: url(gambar.jpg); background-repeat: repeat-x;} p { color: #000000; font-family: arial; font-size: 120%; background-color: #66FFFF; background-image: url(gambar.jpg) background-repeat: no-repeat;}
Web 1, Kuliah-11
Background-repeat
Web 1, Kuliah-11
Background-repeat
Properties lainnya««
Silahkan dicari, dipelajari, dan dikembangkan sendiri«««
Web 1, Kuliah-11
CSS Text
Text-decoration line-through, overline, underline, none Text-indent px, % Text-align left, right, justify Text-transform capitalize, uppercase, lowercase Word-spacing px
Web 1, Kuliah-11
Text-decoration
h2 { « background-repeat: repeat-x; text-decoration: line-through;} p {« background-repeat: no-repeat; text-indent: 20px;}
Web 1, Kuliah-11
Text-decoration
Web 1, Kuliah-11
Text-decoration
Properties lainnya««
Silahkan dicari, dipelajari, dan dikembangkan sendiri«««
Web 1, Kuliah-11
Class Selector
Web 1, Kuliah-11
Class Selector
p.kanan { text-align: right } p.kiri{ text-align: left }
<p class=³kanan">Paragraf ini rata kanan</p> <p class=³kiri">Paragraf ini rata kiri</p>
Web 1, Kuliah-11
Class Selector
h2 { « background-repeat: repeat-x; text-decoration: line-through;} p {« background-repeat: no-repeat; text-indent: 20px;} p.kanan { text-align: right} p.kiri{ text-align: left}
Web 1, Kuliah-11
HTML+CSS Class Selector
<body> <h1>Ini adalah judul 1</h1> <p class=³kanan"> Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <h1>Ini adalah judul 2</h1> <p class=³kiri"> ini adalah paragraf 2. ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> </body>
Web 1, Kuliah-11
Class Selector
Web 1, Kuliah-11
Menggabung Selector
Web 1, Kuliah-11
Menggabung Selector
h1,h2,h3,h4,h5,h6 { color: green }
Web 1, Kuliah-11
Menggabung Selector
h2, p { color: red; font-family: ³times new roman´; font-size: 12px; background-color: yellow; background-image: url(gambar.jpg); background-repeat: repeat-x;} p { color: #000000; font-family: arial; font-size: 120%; background-color: #66FFFF; background-image: url(gambar.jpg) background-repeat: no-repeat;}
Web 1, Kuliah-11
Menggabung Selector
Web 1, Kuliah-11
Reference
http://www.w3scools.com http://www.tizag.com
Web 1, Kuliah-11
Tugas
Web 1, Kuliah-11