YOU ARE DOWNLOADING DOCUMENT

Please tick the box to continue:

Transcript
Page 1: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)-Tutorial- Lesson

Page 2: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

• Software yang dibutuhkan:browser dan teks editor

• CSS adalah style language untuk mendefinisikan layout dokumen HTML ex. Fonts, colours, margins,lines, height, width, background images, advanced positions, etc..

Page 3: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

• Perbedaan CSS & HTML: HTML digunakan untuk membuat structure content. CSS digunakan untuk formatting structured content.

• Keuntungan menggunakan CSS:– Mengkontrol layout banyak dokumen dari satu style

sheet.– Lebih akurat dalam mengkontrol layout– Mengaplikasikan perbedaan layout ke berbagai jenis

media ex. Screen, print, etc..– Dapat menggunakan teknik-teknik tertentu.

Page 4: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

HTML vs. XHTML • Strict• Transitional• Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en"> <head> <title>My XHTML Page</title> </head> <body> <p>This is my first XHTML page.</p> </body> </html>

Page 5: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Cara Kerja CSS

• Sintaks dasar CSS:HTML -> <body bgcolor=“#FF0000”>CSS -> body {background-color: #FF0000;}

Selector {property: value;}

Lokasi tempat pemformatan dilakukan pada tag(s) HTML

Yang dilakukan property Nilai dari property

Page 6: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Applying CSS to an HTML Document

• In-line (the attribute style)Menggunakan atribut style HTML

ex. <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html>

Page 7: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Applying CSS to an HTML Document

• Internal (the tag style)Menyertakan kode CSS menggunakan tag HTML <style>

ex. <html> <head> <title>Example</title> <style type="text/css">

body {background-color: #FF0000;}</style></head> <body> <p>This is a red page</p> </body> </html>

Page 8: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Applying CSS to an HTML Document

• External (link to a style sheet)ex.

<link rel="stylesheet" type="text/css“ href="style/style.css" />

Page 9: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Applying CSS to an HTML Document

<html> <head>

<title>My document</title> <link rel="stylesheet" type="text/css“ href="style/style.css" />

</head> <body> ...

Page 10: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Applying CSS to an HTML Document

default.htm<html> <head>

<title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" />

</head> <body>

<h1>My first stylesheet</h1> </body> </html>

style.cssbody { background-color: #FF0000; }

Page 11: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & Backgrounds

• color• background-color• background-image• background-repeat• background-attachment• background-position• background

Page 12: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & Backgrounds

Foreground color: the 'color' property

h1 { color: #ff0000;

}

Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors ("red") or rgb- values (rgb(255,0,0)).

Page 13: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & BackgroundsThe 'background-color' property

body { background-color: #FFCC66;

} h1 {

color: #990000; background-color: #FC9804;

}

Page 14: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & BackgroundsBackground images [background-image]body {

background-color: #FFCC66; background-image: url("butterfly.gif");

} h1 {

color: #990000; background-color: #FC9804;

}

Notice how we specified the location of the image as url("butterfly.gif"). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url("../images/butterfly.gif") or even on the Internet indicating the full address of the file: url("http://www.html.net/butterfly.gif").

Page 15: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & BackgroundsRepeat background image [background repeat]

Example:body {

background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat;

} h1 {

color: #990000; background-color: #FC9804;

}

Value background-repeat: repeat-x background-repeat: repeat-ybackground-repeat: repeatbackground-repeat: no repeat

Page 16: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & BackgroundsLock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls (scroll) along with the containing element.

body { background-color: #FFCC66; background-image: url("butterfly.gif");background-repeat: no-repeat; background-attachment: fixed;

}h1 {

color: #990000; background-color: #FC9804;

}

Page 17: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & Backgrounds

Place background image [background-position]

Value Description

background-position: 2cm 2cm

The image is positioned 2 cm from the left and 2 cm down the page

background-position: 50% 25%

The image is centrally positioned and one fourth down the page

background-position: top right

The image is positioned in the top-right corner of the page

Page 18: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & Backgrounds

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

} h1 {

color: #990000; background-color: #FC9804;

}

Page 19: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Colors & BackgroundsCompiling [background]

With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.

background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

Dapat di tulis langsung:background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Urutan: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Apabila tidak diisi maka akan diset sebagai default.

Page 20: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Fonts

• Font family [font-family]h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

Page 21: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

FontsFont style [font-style]

The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics.

h1 {font-family: arial, verdana, sans-serif;

} h2 {

font-family: "Times New Roman", serif; font-style: italic;}

Layout:Heading 1 written in ArialAnd heading 2 in Times New Roman - italic

Page 22: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

FontsFont variant [font-variant]

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

h1 {font-variant: small-caps;

} h2 {

font-variant: normal;}

Page 23: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

FontsFont weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font

Ex.p {

font-family: arial, verdana, sans-serif;} td {

font-family: arial, verdana, sans-serif; font-weight: bold;}

Page 24: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Fonts<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head><title>Font weight - Lesson 4, Example 4 | CSS Tutorial | HTML.net</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" href="lesson4_ex4.css" type="text/css" media="all" /></head><body><p>&nbsp;</p><table border="1" cellpadding="10"><tr><td>Text in bold in the cells</td></tr></table><p>Normal text here</p></body></html>

Page 25: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Fonts

Font size [font-size]

The size of a font is set by the property font-size.

h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

Page 26: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

FontsCompiling [font]p {

font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;

}

Dapat dipersingkat:p { font: italic bold 30px arial, sans-serif; }

Urutan:font-style | font-variant | font-weight | font-size | font-family

Page 27: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

TEXT

Text indention [text-indent]The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:

p { text-indent: 30px;

}

Page 28: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

TEXTText alignment [text-align]

th { text-align: right;

} td {

text-align: center;} p {

text-align: justify;}

Page 29: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

TEXT

Text decoration [text-decoration]h1 {

text-decoration: underline; } h2 {

text-decoration: overline; } h3 {

text-decoration: line-through; }

Page 30: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

TEXT

Letter space [letter-spacing]

h1 { letter-spacing: 6px;

} p {

letter-spacing: 3px;}

Page 31: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

TEXTText transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

• capitalize – Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

• uppercase – Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".

• lowercase – Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".

• none – No transformations - the text is presented as it appears in the HTML code.

h1 { text-transform: uppercase;

}

li { text-transform: capitalize;

}

Page 32: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Links a {

color: blue; }

a:link { color: blue;

} a:visited {

color: red; }

a:active { background-color: #FFFF00;

}

a:hover { color: orange; font-style: italic;

}

Page 33: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Linksa:hover {

text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow;

}

Menghilangkan garis bawah pada linka {

text-decoration:none;}

Page 34: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Identification and grouping of elements (class and id)

Grouping elements with class Ex. In HTML<p>Grapes for white wine:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>

Page 35: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Identification and grouping of elements (class and id)

Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.

Page 36: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Identification and grouping of elements (class and id)

Dalam HTML

<p>Grapes for white wine:</p> <ul> <li><a href="ri.htm“ class="whitewine">Riesling</a></li><li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>

Page 37: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Identification and grouping of elements (class and id)

a { color: blue;

} a.whitewine {

color: #FFBB00; } a.redwine {

color: #800000; }

Page 38: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Identification of element using idIn addition to grouping elements, you might need to identify one unique element.

<h1>Chapter 1</h1> ... <h2>Chapter 1.1</h2> ... <h2>Chapter 1.2</h2> ... <h1>Chapter 2</h1> ... <h2>Chapter 2.1</h2> ... <h3>Chapter 2.1.2</h3>…

<h1 id="c1">Chapter 1</h1> ... <h2 id="c1-1">Chapter 1.1</h2> ... <h2 id="c1-2">Chapter 1.2</h2> ... <h1 id="c2">Chapter 2</h1> ... <h2 id="c2-1">Chapter 2.1</h2> ... <h3 id="c2-1-2">Chapter 2.1.2</h3> ...

Page 39: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Identification of element using id

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:

#c1-2 { color: red;

}

Page 40: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Grouping of elements (span and div) Grouping with <span>

The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.

<p>Early to bed and early to rise makes a man <spanclass="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p>

span.benefit { color:red;

}

Page 41: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Grouping of elements (span and div)

Grouping with <div>Whereas <span> is used within a block-level element as seen in the previous example, <div> is used to group one or more block-level elements.

<div id="democrats"><ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div>

<div id="republicans"><ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>

Page 42: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Grouping of elements (span and div)

#democrats { background:blue;

} #republicans {

background:red;

}

Page 43: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

The box model The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:

Page 44: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

The box model<h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights.

They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>

Page 45: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Margin and padding

Set the margin in an elementAn element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document)

Page 46: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Margin and paddingCSS code:body {

margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;

}

Kompilasi:body {

margin: 100px 40px 10px 70px; }

Page 47: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Margin and padding

body { margin: 100px 40px 10px 70px;

} p {

margin: 5px 50px 5px 50px; }

Page 48: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Margin and paddingSet padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

h1 { background: yellow;

} h2 {

background: orange;}

Page 49: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Margin and padding

h1 { background: yellow; padding: 20px 20px 20px 80px;

} h2 {

background: orange; padding-left:120px;

}

Page 50: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Borders

The width of borders [border-width]

Page 51: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Borders

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow"

Borders

Page 52: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Borders

Types of borders [border-style]

Page 53: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Borders

Examples of defining bordersh1 {

border-width: thick; border-style: dotted; border-color: gold;

} h2 {

border-width: 20px; border-style: outset; border-color: red;

}

p { border-width: 1px; border-style: dashed; border-color: blue;

} ul {

border-width: thin;border-style: solid; border-color: orange;

}

Page 54: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Bordersh1 {

border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange;

}

Page 55: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

BordersCompilation [border] p {

border-width: 1px; border-style: solid; border-color: blue;

}

Dikompilasi:p {

border: 1px solid blue; }

Page 56: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Height and width Setting the width [width]

div.box { width: 200px; border: 1px solid black; background: orange;

}

<body><h1>200px width &lt;div&gt; with text</h1><div class="box">Text </div></body>

Page 57: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Height and width

Setting the height [height]div.box {

height: 500px; width: 200px; border: 1px solid black;background: orange;

}<h1>200px width and 500px height &lt;div&gt; with text</h1><div class="box">Text </div>

Page 58: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)

An element can be floated to the right or to left by using the property float

Page 59: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)<div id="picture">

<img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarumvoluntatum...</p>

#picture { float:left; width: 100px;

}

Page 60: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)Another example: columns

HTML Code:<div id="column1">

<p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p>

</div> <div id="column2">

<p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

</div> <div id="column3">

<p>nam nihil esset in nostra potestate si res ita se haberet...</p>

</div>

Page 61: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)CSS Codefloat can be set as either left, right or none.

#column1 { float:left; width: 33%;

}#column2 {

float:left; width: 33%;} #column3 {

float:left; width: 33%;}

Page 62: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)

Page 63: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)The property clear

The clear property is used to control how the subsequent elements of floated elements in a document shall behave.

<div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

Page 64: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Floating elements (floats)#picture {

float:left; width: 100px; } .floatstop {

clear:both;

}

Page 65: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Positioning of elements The principle behind CSS positioningh1 {

position:absolute; top: 100px; left: 200px;}

Page 66: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Positioning of elementsAbsolute positioning #box1 {

position:absolute; top: 50px; left: 50px; } #box2 {

position:absolute; top: 50px; right: 50px; } #box3 {

position:absolute; bottom: 50px; right: 50px; } #box4 {

position:absolute; bottom: 50px; left: 50px; }

Page 67: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Positioning of elements

Page 68: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Layer on layer with z-index (Layers)

#ten_of_diamonds { position: absolute; left: 100px;

bottom: 100px; z-index: 1;}#jack_of_diamonds { position: absolute; left: 115px; bottom: 115px; z-index: 2;} #queen_of_diamonds { position: absolute; left: 130px; bottom: 130px; z-index: 3;}

#king_of_diamonds { position: absolute; left: 145px; bottom: 145px; z-index: 4;} #ace_of_diamonds { position: absolute; left: 160px; bottom: 160px; z-index: 5;}

Page 69: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Layer on layer with z-index (Layers)

<div id="ten_of_diamonds"><img src="diamonds_10.gif" alt="10 of diamonds">

</div>

<div id="jack_of_diamonds"><img src="diamonds_jack.gif" alt="Jack of diamonds">

</div>

<div id="queen_of_diamonds"><img src="diamonds_queen.gif" alt="Queen of diamonds">

</div>

<div id="king_of_diamonds"><img src="diamonds_king.gif" alt="King of diamonds">

</div>

<div id="ace_of_diamonds"><img src="diamonds_ace.gif" alt="Ace of diamonds">

</div>

Page 70: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Web-standards and validation

• W3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others)

• The idea of having standards is to agree upon a common denominator on how to use web technologies

Page 71: Cascading Style Sheets (CSS) - Gunadarma Universityivan_maurits.staff.gunadarma.ac.id/.../7991/Cascading+Style+Sheets.pdf · browser dan teks editor ... Cascading Style Sheets (CSS)

Web-standards and validationCSS validator

To make it easier to observe the CSS standard, W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validate

http://jigsaw.w3.org/css-validator/