Css 1

Cascading Style Sheets (CSS)
Erick Kurniawan, S.Kom
Garis Besar

Pengantar Inline Styles Embedded Style Sheets W3C CSS Validation Service Positioning Elements Backgrounds Element Dimensions Text Flow dan Box Model User Style Sheets Contoh-contoh
Tujuan
Pada kuliah ini anda akan mempelajari :

Mengontrol tampilan website dengan menggunakan CSS Penggunaan syle sheet untuk standarisasi semua halaman web Menggunakan class attribute Menentukan font, size, color dan property yang lain pada text Menentukan element background dan colors Bagaimana mengerti box model dan bagaimana mengontrol margin, border, dan padding Menggunaan style sheet untuk memisahkan tampilan dari isi
Pengantar

Cascading Style Sheet (CSS) Struktur yang terpisah dari tampilan
Cascading Style Sheet (CSS)
Dalam pemakaian HTML murni kita pasti menggunakan tag <font> dan tag lain untuk mengontrol bagaimana layout dari halaman anda. Hal ini mengikat presentasi halaman anda dengan isinya, dan terasa menyulitkan dalam perancangan dan pengembangannya.
Cascading Style Sheet (CSS)
Jika anda memiliki sekian halaman yang memiliki format yang seragam, dan kemudian ingin merubah format dasarnya, tentu yang anda lakukan adalah mengubah tiap halaman tersebut. Style Sheet menyediakan pemecahan terhadap masalah ini. Dengan Style Sheet dapat mengontrol seluruh layout dari site anda, dan jika anda mengubah tampilan dari web site anda cukup dengan memodifikasi style sheet.
Versi CSS
CSS pertama dikembangkan berpusat pada formating dokumen HTML, yaitu dengan spesifikasi CSS1. Browser Netscape 4x keatas dan IE 4x ke atas sudah mendukung CSS1. CSS2 dikembangkan untuk dapat memenuhi kebutuhan terhadap format dokumen untuk dapat ditampilkan pada printer,dsb
Versi CSS
CSS2 juga mendukung penentuan posisi content, downloadable, font, table layout, internationalization, dsb CSS Level 1 (http://www.w3.org/TR/REC-CSS1) CSS Level 2 (http://www.w3.org/TR/REC-CSS2)
Spesifikasi Style Sheet
Style Sheet terbentuk dari stuktur penulisan
selector {property: value}
Inline Styles
Mendeklarasikan individual elements format

Attribute
style CSS property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Inline Styles</title> </head> <body> <p>This text does not have any style applied to it.</p>   -->
24 25 26 27 28 29
<p style = "font-size: 20pt; color: #0000ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p> </body>
30 </html>
Embedded Style Sheets
CSS didefinisikan di dalam dokumen pada tag head

Property
background-color font-family font-size
Menentukan background color Menentukan jenis dari font yang digunakan Menentukan ukuran font
Property
Property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Style Sheets</title>  <style type = "text/css"> em { background-color: #8000ff; color: white } h1 p { font-family: arial, sans-serif } { font-size: 14pt }
.special { color: blue } </style> </head>
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
51
ul ul
{ text-decoration: underline; margin-left: 15px }
</style> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul>
</body>
52 </html>
Conflicting Styles
Inheritance
Descendants
properties mempunyai prioritas lebih tinggi dari ancestors properties
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>More Styles</title> <style type = "text/css"> a.nodec a:hover { text-decoration: none } { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold } ul { margin-left: 75px }
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
ul ul
{ text-decoration: underline; margin-left: 15px }
</style> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul>
49 50 51 52
<p><a class = "nodec" href = "http://www.food.com"> Go to the Grocery store</a></p> </body>
53 </html>
Linking External Style Sheets
External style sheets

File
css terpisah dengan dokumen html-nya
1 2 3 4 5 6 7 8 9
/* Fig. 6.4: styles.css
*/
/* An external stylesheet */ a { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #ccffcc } { color: red; font-weight: bold; background-color: #ffffff } { margin-left: 2cm } { text-decoration: underline; margin-left: .5cm }
10 li em 11 12 13 14 ul 15 16 ul ul 17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  -->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Linking External Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul>
26 27 28 29 30 31 32 33 34 35 36
</li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p> <a href = "http://www.food.com">Go to the Grocery store</a> </p> </body>
37 </html>
W3C CSS Validation Service

Validates external CSS documents Memastikan bahwa CSS yang kita buat benar
Positioning Elements
Absolute positioning z-index attribute
Layer overlapping elements relatif dari element
Relative positioning
Posisi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Absolute Positioning</title> </head> <body> <p><img src = "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First positioned image" /></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">Positioned Text</p> <p><img src = "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second positioned image" /></p> </body>
25 </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  -->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Relative Positioning</title> <style type = "text/css"> p { font-size: 1.3em; font-family: verdana, arial, sans-serif } span { color: red; font-size: .6em; height: 1em } .super { position: relative; top: -1ex } .sub { position: relative; bottom: -1ex }
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <body>
.shiftleft
{ position: relative; left: -1ex }
.shiftright { position: relative; right: -1ex } </style> </head>
<p>The text at the end of this sentence <span class = "super">is in superscript</span>.</p> <p>The text at the end of this sentence <span class = "sub">is in subscript</span>.</p> <p>The text at the end of this sentence <span class = "shiftleft">is shifted left</span>.</p> <p>The text at the end of this sentence <span class = "shiftright">is shifted right</span>.</p> </body>
51 </html>
Element Dimensions
CSS rules dapat menentukan dimensi aktual dari setiap page element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  -->
26 27 28 29 30 31 32 33 34 35 36 37 38 </body> 39 </html> <div style = "width: 20%; height: 30%; overflow: scroll"> This box is only twenty percent of the width and thirty percent of the height. What do we do if it overflows? Set the overflow property to scroll!</div> <div style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across eighty percent of the width of the screen.</div>
Text Flow and the Box Model

Floating
Menggeser
element ke sisi layar
Box model
Margins margin-top, margin-right, margin-left, margin-bottom Padding padding-top, padding-right, padding-left, and padding-bottom Border border-width

thin, medium, thick Sets the color none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset
border-color border-style
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Flowing Text Around Floating Elements</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em; font-size: 1.5em; width: 50% } p { text-align: justify }
</style> </head>
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
<body> <div style = "text-align: center"> Deitel & Associates, Inc.</div> <div style = "float: right; margin: .5em; text-align: right"> Corporate Training and Publishing</div> <p>Deitel & Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object technology education. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p> <div style = "float: right; padding: .5em; text-align: right"> Leading-Edge Programming Textbooks</div> <p>The company's clients include many Fortune 1000 companies, government agencies, branches of the military and business organizations.</p>
49 50 51 52 53 54 55 56
<p style = "clear: right">Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.</p> </body>
57 </html>
Text Flow and the Box Model
Ma rgin
C on te nt
Bo rd er Pa dd ing
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Borders</title> <style type = "text/css"> body div { background-color: #ccffcc } { text-align: center; margin-bottom: 1em; padding: .5em } .thick { border-width: thick }
.medium { border-width: medium } .thin { border-width: thin }
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
.groove { border-style: groove } .inset { border-style: inset }
.outset { border-style: outset } .red .blue </style> </head> <body> <div class = "thick groove">This text has a border</div> <div class = "medium groove">This text has a border</div> <div class = "thin groove">This text has a border</div> <p class = "thin red inset">A thin red line...</p> <p class = "medium blue outset"> And a thicker blue line</p> </body> { border-color: red } { border-color: blue }
50 </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  -->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Borders</title> <style type = "text/css"> body div { background-color: #ccffcc } { text-align: center; margin-bottom: .3em; width: 50%; position: relative; left: 25%; padding: .3em } </style> </head> <body>
26 27 28 29 30 31 32 33 34 </body> 35 </html> <div style = "border-style: solid">Solid border</div> <div style = "border-style: double">Double border</div> <div style = "border-style: groove">Groove border</div> <div style = "border-style: ridge">Ridge border</div> <div style = "border-style: inset">Inset border</div> <div style = "border-style: outset">Outset border</div>
User Style Sheets
Mengatur page sesuai keinginan user
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
24 25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  -->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>User Styles</title> <style type = "text/css"> .note { font-size: 9pt } </style> </head> <body> <p>Thanks for visiting my Web site. I hope you enjoy it. </p><p class = "note">Please Note: This site will be moving soon. Please check periodically for updates.</p>
</body>
26 </html>
1 2 3 4 5 6
/* Fig. 6.17: userstyles.css */ /* A user stylesheet body { font-size: 20pt; color: yellow; background-color: #000080 } */
User Style Sheets
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
25
<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  -->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>User Styles</title> <style type = "text/css"> .note { font-size: .75em } </style> </head> <body> <p>Thanks for visiting my Web site. I hope you enjoy it. </p><p class = "note">Please Note: This site will be moving soon. Please check periodically for updates.</p>
</body>
26 </html>
User Style Sheets
User Style Sheets

Css 1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascading Style Sheets (CSS)

Erick Kurniawan, S.Kom

Pada kuliah ini anda akan mempelajari :

Cascading Style Sheet (CSS) Struktur yang terpisah dari tampilan

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS)

Spesifikasi Style Sheet

Style Sheet terbentuk dari stuktur penulisan

selector {property: value}

Mendeklarasikan individual elements format

style CSS property

Embedded Style Sheets

CSS didefinisikan di dalam dokumen pada tag head

background-color font-family font-size

.special { color: blue } </style> </head>

{ text-decoration: underline; margin-left: 15px }

properties mempunyai prioritas lebih tinggi dari ancestors properties

{ text-decoration: underline; margin-left: 15px }

<p><a class = "nodec" href = "http://www.food.com"> Go to the Grocery store</a></p> </body>

Linking External Style Sheets

External style sheets

css terpisah dengan dokumen html-nya

/* Fig. 6.4: styles.css

/* An external stylesheet */ a { text-decoration: none }

W3C CSS Validation Service

W3C CSS Validation Service

W3C CSS Validation Service

Absolute positioning z-index attribute

Layer overlapping elements relatif dari element

{ position: relative; left: -1ex }

.shiftright { position: relative; right: -1ex } </style> </head>

Text Flow and the Box Model

element ke sisi layar

Text Flow and the Box Model

.medium { border-width: medium } .thin { border-width: thin }

.groove { border-style: groove } .inset { border-style: inset }

User Style Sheets

Mengatur page sesuai keinginan user

User Style Sheets

User Style Sheets

User Style Sheets

Anda mungkin juga menyukai