Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Css

Diunggah oleh

Iin Karmila Putri
98 tayangan42 halaman

Hak Cipta

© Attribution Non-Commercial (BY-NC)

Format Tersedia

PPT, PDF, TXT atau baca online dari Scribd

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Hak Cipta:

Attribution Non-Commercial (BY-NC)
Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
98 tayangan42 halaman

Css

Diunggah oleh

Iin Karmila Putri

Hak Cipta:

Attribution Non-Commercial (BY-NC)
Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
Tandai sebagai konten tidak pantas
dari 42

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

Anda mungkin juga menyukai