Professional Documents
Culture Documents
Cascading Style Sheets (CSS) : Tutorial - Lesson
Cascading Style Sheets (CSS) : Tutorial - Lesson
-Tutorial - Lesson
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").
Value background-position: 2cm 2cm background-position: 50% 25% background-position: top right
Description The image is positioned 2 cm from the left and 2 cm down the page The image is centrally positioned and one fourth down the page The image is positioned in the top-right corner of the page
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.
Fonts
Font family [font-family] h1 {font-family: arial, verdana, sans-serif; } h2 {font-family: "Times New Roman", serif; }
Fonts
Font 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 Arial And heading 2 in Times New Roman - italic
Fonts
Font 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; }
Fonts
Font 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; }
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> </p> <table border="1" cellpadding="10"> <tr> <td>Text in bold in the cells</td> </tr> </table> <p>Normal text here</p> </body> </html>
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;}
Fonts
Compiling [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
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; }
TEXT
Text alignment [text-align] th { text-align: right; } td { text-align: center; } p{ text-align: justify; }
TEXT
Text decoration [text-decoration]
h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
TEXT
Letter space [letter-spacing] h1 { letter-spacing: 6px; } p{ letter-spacing: 3px; }
TEXT
Text 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. h1 { text-transform: uppercase; } li { text-transform: capitalize; } capitalize
Capitalizes the first letter of each word. For example: "john doe" will be "John Doe". Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE". Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe". No transformations - the text is presented as it appears in the HTML code.
Links
a{ color: blue; } a:link { color: blue; } a:visited { color: red; } a:active { background-color: #FFFF00; } a:hover { color: orange; font-style: italic; }
Links
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; } Menghilangkan garis bawah pada link a{ text-decoration:none; }
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.
span.benefit { color:red; }
<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>
Borders
The width of borders [border-width]
Borders
The color of borders [border-color] The property border-color defines which Borders color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow"
Borders
Types of borders [border-style]
Borders
Examples of defining borders
h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } } } ul { border-width: thin; border-style: solid; border-color: orange; p{ border-width: 1px; border-style: dashed; border-color: blue;
Borders
h1 { 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; }
Borders
Compilation [border] p{ border-width: 1px; border-style: solid; border-color: blue; } Dikompilasi: p{ border: 1px solid blue; }
Positioning of elements
The principle behind CSS positioning h1 { position:absolute; top: 100px; left: 200px; }
Positioning of elements
Absolute 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; }
Positioning of elements