1 PEMROGRAMAN WEB 06 CSS Dasar Andi WRE Cascading Style Sheet (CSS) Berperan dalam desain tampilan Mendefinisikan bagaimana sebuah element HTML akan d...
Cascading Style Sheet (CSS) Berperan dalam desain tampilan Mendefinisikan bagaimana sebuah element HTML akan ditampilkan Menyelesaikan masalah pada HTML 4.0 CSS Saves a Lot of Work! (dengan External style sheets, kita dapat mengubah tampilan dan layout dari seluruh halaman web hanya dengan mengubah 1 file saja)
comes your–footer WebHere Programming CSS Dasar
1
Implementasi CSS – Inline Styles Didefinisikan sebagai atribut pada tag HTML Hanya berlaku untuk content pada tag tersebut Use this method sparingly! style="property1 : nilai; property2 : nilai"
Contoh :
Belajar CSS
comes your–footer WebHere Programming CSS Dasar
Implementasi CSS – Internal Style Sheet Didefinisikan pada tag dengan menggunakan tag <style> Hanya berlaku untuk halaman tersebut An internal style sheet should be used when a single document has a unique style. <style type="text/css"> selector{ property1 : nilai; property2 : nilai; } selector2{ property1 : nilai; property2 : nilai; }
<style type="text/css"> body {background:#0000FF; color:#FFFF00; margin-left:0.5in} h1 {font-size:18pt; color:#FF0000} p {font-size:12pt; font-family:arial; text-indent:0.5in} comes your–footer WebHere Programming CSS Dasar
2
Implementasi CSS – External Style Sheet CSS berada pada file terpisah dengan extension .css Berlaku untuk halaman yang melakukan pemanggilan pada file .css tersebut Ideal when the style is applied to many pages With an external style sheet, you can change the look of an entire Web site by changing one file Setiap halaman harus menggunakan tag pada bagian head Pemanggilan file .css
comes your–footer WebHere Programming CSS Dasar
Implementasi CSS – Multiple Style Sheet What style will be used when there is more than one style specified for an HTML element? Priority : 1. 2. 3. 4.
Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element) highest priority (override a style defined inside the tag, or in an external style sheet, or in a browser (a default value))
Note: If the link to the external style sheet is placed after the internal style sheet in HTML , the external style sheet will override the internal style sheet!
comes your–footer WebHere Programming CSS Dasar
3
CSS Comments A CSS comment begins with "/*", and ends with "*/" /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
comes your–footer WebHere Programming CSS Dasar
CSS Class & Id CSS Class Specify a style for a group of elements Set a particular style for many HTML elements with the same class The class selector uses the HTML class attribute, and is defined with a ".“ You can give the name for selector Do NOT start a class name with a number! This is only supported in Internet Explorer
CSS Id Specify style for a single, unique element The class selector uses the HTML class attribute, and is defined with a “#“ You can give the name for selector Only use ID's once Do NOT start an ID name with a number! It will not work in Mozilla/Firefox comes your–footer WebHere Programming CSS Dasar
4
CSS Class – Private Class Style hanya digunakan pada tag yang bersangkutan tag.selector{ property1 : nilai; property2 : nilai; }
H1.merah{color:red} H1.hijau{color:lime}
Penggunaan pada tag : <[tag] class="selector">…
Belajar
CSS
comes your–footer WebHere Programming CSS Dasar
CSS Class – Public Class Style dapat digunakan pada seluruh tag selector{ property1 : nilai; property2 : nilai; }
.merah{ color : red; text-align : right}
Penggunaan pada tag : <[tag] class="selector">…
Belajar
CSS
comes your–footer WebHere Programming CSS Dasar
5
CSS Id - Private Style hanya dapat digunakan pada tag yang bersangkutan tag#selector{ property1 : nilai; property2 : nilai; }
H1.merah{color:red} H1#miring{font-style:italic}
Penggunaan pada tag : <[tag] id="selector">…
Belajar
CSS
comes your–footer WebHere Programming CSS Dasar
CSS Id - Public Style dapat digunakan pada seluruh tag #selector{ property1 : nilai; property2 : nilai; }
#merah{ color : red; text-align : right}
Penggunaan pada tag : <[tag] id="selector">…
CSS
comes your–footer WebHere Programming CSS Dasar
6
CSS Background Define the background effects of an element CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position
comes your–footer WebHere Programming CSS Dasar
Background Color Specifies the background color of an element <style type="text/css"> body { background-color:#FFCC00; }
My CSS web page!
Hello world! This is a W3Schools.com example.
comes your–footer WebHere Programming CSS Dasar
7
Background Color <style type="text/css"> h1{background-color:#6495ed;} P{background-color:#e0ffff;} div{background-color:#b0c4de;}
CSS background-color example!
This is a text inside a div element.
This paragraph has its own background color.
We are still in the div element.
comes your–footer WebHere Programming CSS Dasar
Background Image Specifies an image to use as the background of an element Default the image is repeated <style type="text/css"> body{background-image:url('flower1.jpg');} h1{background-image:url('flower2.png');}
Hello World!
This text is not easy to read on this background image.
comes your–footer WebHere Programming CSS Dasar
8
Background Image - Repeat Horizontally or Vertically <style type="text/css"> body { background-image:url('flower1.jpg'); background-repeat:repeat-x; }
Hello World!
comes your–footer WebHere Programming CSS Dasar
Background Image - Set position and no-repeat <style type="text/css"> body { background-image:url('Flower1.jpg'); background-repeat:no-repeat; background-position:right top; margin-right:200px; }
Hello World!
W3Schools background no-repeat, set postion example.
Now the background image is only shown once, and positioned away from the text.
In this example we have also added a margin on the right side, so the background image will never disturb the text.
comes your–footer WebHere Programming CSS Dasar
9
Background - Shorthand property Specify all the properties in one single property When using the shorthand property the order of the property values are: background-color <style type="text/css"> background-image body background-repeat { background:#ffffff url('flower2.jpg') no-repeat right top; background-attachment margin-right:200px; background-position }
Hello World!
Now the background image is only shown once, and it is also positioned away from the text.
In this example we have also added a margin on the right side, so that the background image will not disturb the text.
comes your–footer WebHere Programming CSS Dasar
Text Alignment Set the horizontal alignment of a text Value : left, right, center, justify <style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
CSS text-align Example
May, 2009
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,'
Note: Resize the browser window to see how the value "justify" works.
Note: The "blink" value is not supported in IE, Chrome, or Safari.
comes your–footer WebHere Programming CSS Dasar
Text Transformation <style type="text/css"> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
This is some text.
This is some text.
This is some text.
comes your–footer WebHere Programming CSS Dasar
11
Text Indentation <style type="text/css"> p {text-indent:50px; text-align:justify;}
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
comes your–footer WebHere Programming CSS Dasar
CSS Font Families 2 Tipe : 1. 2.
Generic family - a group of font families with a similar look (like "Serif" or "Monospace") Font family - a specific font family (like "Times New Roman" or "Arial")
comes your–footer WebHere Programming CSS Dasar
12
Font Family The font family of a text is set with the font-family property Should hold several font names If the browser does not support the first font, it tries the next font Start with the font you want, and end with a generic family <style type="text/css"> p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;}
CSS font-family
This is a paragraph, shown in the Times New Roman font.
This is a paragraph, shown in the Arial font.
comes your–footer WebHere Programming CSS Dasar
Font Style Values : normal (the text is shown normally), italic (the text is shown in italics), oblique (the text is "leaning") <style type="text/css"> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
This is a paragraph, normal.
This is a paragraph, italic.
This is a paragraph, oblique.
comes your–footer WebHere Programming CSS Dasar
13
Font Size Sets the size of the text Value in : o o o o
em (font size unit) px (screen size unit) pt (1/72 of an inch), % (persentase terhadap ukuran parent)
1em = 12pt =16px = 100%
comes your–footer WebHere Programming CSS Dasar
CSS Links The four links states : 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
CSS Lists Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker <style type="text/css"> ul.a {list-style-type:circle;} ol.d {list-style-type:lower-alpha;}
Example of ordered lists:
Coffee
Tea
Example of unordered lists:
Coffee
Tea
comes your–footer WebHere Programming CSS Dasar
15
An Image as The List Item Marker <style type="text/css"> ul { list-style-image:url('smile.jpg'); }
Coffee
Tea
Coca Cola
comes your–footer WebHere Programming CSS Dasar
List - Shorthand property Specify all the list properties in one, single property The order of the values : 1. 2. 3.
<style type="text/css"> ul { list-style:square url("smile.jpg"); } It does not matter if one of the values above are missing, as long as the rest are in the specified order.
