Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
(Cascading Style Sheet)
CSS (Cascading Style Sheet)
2
CSS CSS singkatan dari Cascading Style Sheets
CSS mendefinisikan bagaimana elemen HTML yang akan ditampilkan Gaya ditambahkan ke HTML 4.0 untuk memecahkan masalah tampilan HTML
3
Metode Penulisan CSS Inline Style sheet Embedded/Internal Style Sheet
Linked/External Style Sheet
4
Inline Style Sheet CSS didefinisikan langsung pada tag2 html yang bersangkutan. Contoh penulisannya dengan menambahkan attribut style=“...” dalam tag2 html tersebut. Contoh. <p style=“color:red;text-align:center;”> </p>
5
Embedded/Internal Style Sheet
CSS didefinisikan terlebih dulu dalam tag <style>...</style>sebelum tag <body>. Contoh.
6
<html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } </style> </head> <body> </body> </html>
7
Linked/External Style Sheet
CSS akan didefinisikan dalam bentuk file .css Untuk memanggil file css, harus dipanggil dengan menggunakan tag <link> di antara tag <head>...</head> Contoh.
8
Contoh <html> <head> <link rel="stylesheet" type="text/css" href=“style.css"> </head> <body> </body> </html>
9
style.css body { background-color: lightblue; } h2 { color: navy; margin-left: 20px; }
10
Linked/External Style Sheet
Linked/External Style Sheet ini sangat ideal bila gaya ini diterapkan untuk banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs dengan mengubah hanya satu file.
11
Multiple Styles Will Cascade into One
CSS mana yang akan digunakan bila ada lebih dari satu style yang ditentukan untuk sebuah elemen HTML?
12
Multiple Styles Will Cascade into One
Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" menjadi dengan aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
13
Multiple Styles Will Cascade into One
Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)
14
Multiple Styles Will Cascade into One
Jadi, inline style (dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan dalam <head> tag, atau dalam style sheet eksternal, atau dalam browser (nilai default).
15
Syntax
16
Selector The element Selector The id Selector The class Selector
Grouping Selectors
17
Element Selector p { text-align: center; color: red; }
18
Id Selector #para1 { text-align: center; color: red; }
19
Class Selector .center { text-align: center; color: red; }
20
Grouping Selector h1, h2, p { text- align: center; color: red; }
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } h1, h2, p { text- align: center; color: red; }
21
Property Background Text Font Link Table
22
Background background-color background-image background-repeat
background-attachment background-position
23
Background h1 { background-color: #6495ed; } p { background-color: #e0ffff; } div { background-color: #b0c4de; }
24
Text color text-align text-decoration text-transform text-indent
25
h1 { color: #00ff00; } h1 { text-align: center; } a { text-decoration: none; } p.lowercase { text-transform: lowercase; } p { text-indent: 50px; } Bila mendefinisikan property color, maka background-color harus didefinisikan juga
26
Font font-style font-size Font-family
27
Font-family p { font-family: "Times New Roman", Times, serif; }
Fallback system Jika font yang didepan tidak ada, maka digantikan dengan font dibelakang p { font-family: "Times New Roman", Times, serif; }
28
Link a:link - a normal, unvisited link
a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked
29
a:hover MUST come after a:link and a:visited
/* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; } a:hover MUST come after a:link and a:visited a:active MUST come after a:hover
30
Table Border border-collapse Height Width Vertical-align Padding
background-color
Presentasi serupa
