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