you can read some articles and programs from my blog and you can experiment after read this blog. now we are must study hard from now.
1. Introduction to CSS Cascading Style Sheets is a technology used to beautify website page views (the site). With the overall color and CSS Method display in a web site can be converted / reformatted quickly. CSS also been in standartkan by the World Wide Web Consortium (W3C) for use on the web browser.
Writing CSS <style Type="text/css"> ... CSS ... </ STYLE> Example: <h1 style="color:red;"> Red, hahaha ...</ h1> 2. The terms in the Style Sheet Style rules Cascading style sheets is a collection of rules that define style from the document. As an example we can create the style rules determine that all <H2> display with the color orange. Style sheets Style sheets can be embedded into HTML document. Or called embedded style sheet. Style sheets can also be made as an external file and the link to an HTML document. Style roles can be wearing on the of a certain web page. For example you can determine certain paragraphs in the show with bold and italic style while others remain as usual. Selector property1 {selector: value, property2: value,. . .} h1 {color: green; background-color: orange;} Style sheets consist of two parts: 1. Selector The first part before the "{}" is called selector 2. Declaration Consisting of the property and its value. 3. Use the style element Let's start by setting the font color and background. You can do this by using the style element to set the character code tags of your document. a. Inheritance (Inheritance):
Writing CSS <style Type="text/css"> ... CSS ... </ STYLE>
Example: <h1 style="color:red;"> Red, hahaha ...</ h1>
2. The terms in the Style Sheet Style rules Cascading style sheets is a collection of rules that define style from the document. As an example we can create the style rules determine that all <H2> display with the color orange. Style sheets Style sheets can be embedded into HTML document. Or called embedded style sheet. Style sheets can also be made as an external file and the link to an HTML document. Style roles can be wearing on the of a certain web page. For example you can determine certain paragraphs in the show with bold and italic style while others remain as usual. Selector property1 {selector: value, property2: value,. . .} h1 {color: green; background-color: orange;}
Style sheets consist of two parts: 1. Selector The first part before the "{}" is called selector 2. Declaration Consisting of the property and its value. 3. Use the style element Let's start by setting the font color and background. You can do this by using the style element to set the character code tags of your document. a. Inheritance (Inheritance):
<html> <head> <style type="text/css" media=”all”> b { color : green; } </style> </head> <body> <b> Q: Why, if we consider <font size="+1"> a job </ font> it easy then the real work will become easier? <br /> A: Because it is a suggestion of ourselves. </ b> </ body> </ html>
<html> <head> <style type="text/css" media=”all”> b { color : green; } </style> </head> <body> <b>
Q: Why, if we consider <font size="+1"> a job </ font> it easy then the real work will become easier? <br /> A: Because it is a suggestion of ourselves. </ b> </ body> </ html>
b. Classes: This time we define two classes of "ask" and "responsibility" with CSS rules apply. From here we can see kalu two classes should not same and can be modified in accordance with the wishes and interests of our needs.
<html> <head> <style type="text/css" media=”all”> .question {color: red;} .answer {color: blue;} </style> </head> <body> <p class="question"> Q: Why if we deem it an easy job then the real work will become easier? </ p> <p class="jawab"> A: Because it is a suggestion CLASS="tanya"> <FONT </ FONT> of ourselves </ p> </ body> </html>
<html> <head> <style type="text/css" media=”all”> .question {color: red;} .answer {color: blue;} </style> </head> <body> <p class="question">
Q: Why if we deem it an easy job then the real work will become easier? </ p> <p class="jawab"> A: Because it is a suggestion CLASS="tanya"> <FONT </ FONT> of ourselves </ p> </ body> </html>
c. Contextual selector (Contextual-Selector) Contextual selector is similar to conditional statements - Style-Sheet declaration that there will be an effect if the conditions / circumstances encountered. For example, suppose you want to make all text bold and italic performed with arial and blue letters. Contextual selector, it will be like this:
<head> <style type="text/css" media=”all”> b i {color: blue; font-family: Arial;} / * this selector all for bold + italic text * / </style> </head>
<head> <style type="text/css" media=”all”> b i {color: blue; font-family: Arial;} / * this selector all for bold + italic text * /
</style> </head>
CSS offers a variety of ways to change the color. Is easiest by using one of the pre-defined colors - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. You can also use hexadecimal color combinations by adding attribute # (sign Kreiss). i {color: # 0000FF;) Or the combination of RGB in the absolute value of percent, like this: i {color: rgb (0, 0, 255);) i {color: rgb (0%, 0%, 100%);) We can change the color combination in accordance with the style that we like.
<html> <head> <style type="text/css" media=”all”> .blue {color: cyan; background-color: #FF8000;} .green {color: lime; background-color: black;} </style> </head> <body> <p class="blue"> Actually all the work is easy! </p> <p class="green"> Agreed, but not as easy to say it .... </p> </body> </html>
<html> <head> <style type="text/css" media=”all”> .blue {color: cyan; background-color: #FF8000;} .green {color: lime; background-color: black;} </style> </head>
<body> <p class="blue">
Actually all the work is easy!
</p> <p class="green"> Agreed, but not as easy to say it .... </p> </body> </html>
We can also add attributes format for the web we become more alive. For example, changing the link color, font color add bold, italics, underline, gives color to the textbox, textarea, scrollbar, and others.
<html> <head> <style type="text/css" media=”all”> body { color: black; background: white; } i, u { color: red; } b { color : green; } </style> </head> <body> Q: Why, if we consider <i> a job </ i> it is easier then the job real will become easier <b> </ b>? <br /> A: Because it is a suggestion <u> </ u> to <b> ourselves </ b> </ Body> </ Html>
<html> <head> <style type="text/css" media=”all”> body { color: black; background: white; } i, u { color: red; } b { color : green; } </style> </head> <body>
Q: Why, if we consider <i> a job </ i> it is easier then the job real will become easier <b> </ b>? <br /> A: Because it is a suggestion <u> </ u> to <b> ourselves </ b> </ Body> </ Html>
<html> <head> <style type="text/css" media=”all”> .question {text-decoration: underline} /* garis bawah */ .answer {text-decoration: overline} /* garis atas text */ .repeat {text-decoration: line-through}/* garis melalui text */ .no-imagination {text-decoration: blink; font-weight: bolder} /* text berkedip */ </style> </head> <body> <p class="question"> Q. Kenapa why, tidak pernah never, selalu always ? </p> <p class="answer"> A. Because Because always always sometime Sometimes? </p> <p class="repeat"> Q. Do you know, who the funniest in Indonesia? </p> <p class="repeat"> A. I Don’t know, Kasino and Indro. </p> <p class="no-imagination"> Haha??? </p> </body> </html>
<html> <head> <style type="text/css" media=”all”> .question {text-decoration: underline} /* garis bawah */ .answer {text-decoration: overline} /* garis atas text */ .repeat {text-decoration: line-through}/* garis melalui text */ .no-imagination {text-decoration: blink; font-weight: bolder} /* text berkedip */ </style> </head> <body> <p class="question"> Q. Kenapa why, tidak pernah never, selalu always ? </p> <p class="answer"> A. Because Because always always sometime Sometimes? </p> <p class="repeat"> Q. Do you know, who the funniest in Indonesia? </p> <p class="repeat"> A. I Don’t know, Kasino and Indro. </p> <p class="no-imagination">
Haha??? </p> </body> </html>
Watermark Concepts CSS also comes with properties that allow you to define how how the background image (background) you in the show. First, property "Background-image" allows you to specify a background image for each HTML element. If you require this background as a watermark, which can not discroll when you to scroll down a page, you must add property "background-attachment" - The values accepted are "fixed" and "scroll" You can also set a Yes / No its an image / images that pass through one page with the property "background-repeat". This property may be taken one of four parts: a "repeat" (horizontal layout and vertically), "repeat-x" (horizontal position only), "repeat-y" (location seacara vertical only), and "no repeat" (no arrangement) The examples below we take to indicate the keyword "repeat-y", please try:
<html> <head> <style type="text/css" media=”all”> .question {font-size: 20pt; background-image: url("./letak_folder/bunga.gif"); background-repeat: repeat-y} </style> </head> <body> <p class="question"> Q. Hmm ... turns out you now have to understand about the concept of a watermark? A. Yes, There Really is sir! </p> </body> </html>
<html> <head> <style type="text/css" media=”all”> .question {font-size: 20pt; background-image: url("./letak_folder/bunga.gif"); background-repeat: repeat-y} </style>
</head> <body> <p class="question"> Q. Hmm ... turns out you now have to understand about the concept of a watermark?
A. Yes, There Really is sir!
</p> </body> </html>
Model format CSS berasumsi bahwa tiap-tiap elemen dikelilingi oleh tiga area yang berbeda. Dimulai dari dalam keluar, area ini adalah padding, border, dan margin. Masing-masing entitas ini dapat diatur melalui spesial properties CSS, mengijinkan para developer untuk secara singkat mengatur tampilan dan posisi dari setiap elemen HTML. Nilai margin (garis tepi) dapat kita atur besar dan letaknya melalui properti “margin-top”, “margin-bottom”, “margin-right”, dan “margin-left”.
<html> <head> </head> <body> <div style="position: absolute; top:10; left:50; font-family: Verdana; font-size: 35pt; color: green;"> Q. Does everyone who reads this module already understand? </div> <div style="position: absolute; top:140; left:300; font-family: Verdana; font-size: 20pt; color: blue;"> A. Belum Tentu! </div> <div style="position: absolute; top:180; left:50; letter-spacing:5px; font-family: Verdana; font-size: 33pt; color: red;"> The ability of each individual is not necessarily the same. </div> </body> </html>
<html> <head> </head> <body> <div style="position: absolute; top:10; left:50; font-family: Verdana; font-size: 35pt; color: green;"> Q. Does everyone who reads this module already understand?
</div> <div style="position: absolute; top:140; left:300; font-family: Verdana; font-size: 20pt; color: blue;"> A. Belum Tentu! </div> <div style="position: absolute; top:180; left:50; letter-spacing:5px;
font-family: Verdana; font-size: 33pt; color: red;"> The ability of each individual is not necessarily the same.
</div> </body> </html>
4. ORGANIZING FILE CSS One of several technological prowess css is - and is the reason many people Like its use - is to allow us to define a global style sheet that can apply css rules to the overall HTML documents on your pages. The advantage is clear, if we want to change the look of the site, we live editing one file only and the results will be reflected on the overall HTML document linked to it. Example: Create a folder named css - create a file named global.css. Move the CSS tag of the file. html to global.css. To give effect rules all Style-Sheet or to a specific HTML document, add the tag between <HEAD> ... </ HEAD>, becomes:
<head> <link rek="stylesheet" href=http://PROGRAMMINGHAHA.BLOGSPOT.COM/style/global.css type="text/css" media=”all” /> </head>
and all rules of Style-sheet in "global.css" will be applied automatically into HTML documents that want to be informed Style-Sheet. Or can also import Style-Sheet by using keywords (keyword) "@import",
<style type="text/css" media=”all”> @import url(http://PROGRAMMINGHAHA.BLOGSPOT.COM/global.css); </style>
** Template Creation without tables (tableless)
<table width="400" cellspacing="0" cellpadding="0" border="0" align="center"> <tr><td colspan="3"> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr> <td><strong>#WEBSITE_TITLE#</strong></td> </tr> <tr> <td><div align="right">HOME | FAQ | CONTACT | SITEMAP</div></td> </tr> </table> </td></tr> <tr><td> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td>#LEFT_BLOCK#</td></tr> </table> </td> <td> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td>#CONTENT#</td></tr> </table> </td> <td> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td>#RIGHT_BLOCK#</td></tr> </table> </td></tr> <tr><td colspan="3"> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td> <div align="center">© 2006 Web Programmer. All Rights Reserved.</div> </td></tr> </table> </td></tr> </table>
<table width="400" cellspacing="0" cellpadding="0" border="0" align="center"> <tr><td colspan="3"> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr> <td><strong>#WEBSITE_TITLE#</strong></td> </tr> <tr> <td><div align="right">HOME | FAQ | CONTACT | SITEMAP</div></td> </tr> </table> </td></tr> <tr><td> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td>#LEFT_BLOCK#</td></tr> </table> </td> <td> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td>#CONTENT#</td></tr> </table> </td> <td>
<table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td>#RIGHT_BLOCK#</td></tr> </table> </td></tr> <tr><td colspan="3"> <table width="100%" cellspacing="0" cellpadding="5" border="0"> <tr><td> <div align="center">© 2006 Web Programmer. All Rights Reserved.</div> </td></tr> </table> </td></tr> </table>
<div> <div>#JUDUL_WEBSITE#</div> <div>HOME | FAQ | CONTACT | SITEMAP</div> <div> <div>#BLOCK_KIRI#</div> <div>#CONTENT#</div> <div>#BLOCK_KANAN#</div> </div> <div>© 2006 Web Programmer. All Rights Reserved.</div> </div> * { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } #main { width: 800px; margin: 0px 0px 0px 100px; } #header { font-weight: bold; padding: 10px 10px 10px 10px; background: #FFCC00; } #nav { text-align: right; padding: 0px 20px 0px 0px; background: #6666CC; } #middle { clear: both; } #left { float: left; width: 180px; padding: 5px 5px 5px 5px; } #content { float: left; width: 350px; padding: 10px 10px 10px 10px; } #right { float: left; padding: 5px 5px 5px 5px; } #footer { float: left; padding: 10px 10px 10px 10px; text-align: center; }
<div> <div>#JUDUL_WEBSITE#</div> <div>HOME | FAQ | CONTACT | SITEMAP</div> <div> <div>#BLOCK_KIRI#</div> <div>#CONTENT#</div> <div>#BLOCK_KANAN#</div> </div> <div>© 2006 Web Programmer. All Rights Reserved.</div> </div>
* { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } #main { width: 800px; margin: 0px 0px 0px 100px; } #header { font-weight: bold;
padding: 10px 10px 10px 10px; background: #FFCC00; } #nav { text-align: right; padding: 0px 20px 0px 0px; background: #6666CC; } #middle { clear: both; } #left { float: left; width: 180px; padding: 5px 5px 5px 5px; } #content { float: left; width: 350px; padding: 10px 10px 10px 10px; } #right { float: left; padding: 5px 5px 5px 5px; } #footer {
float: left; padding: 10px 10px 10px 10px; text-align: center; }
thank you for visiting my blog and comment here. I hope the commentary contains a comment which intend to build and repair. criticism and suggestions I gladly accept.
0 comments:
Post a Comment
thank you for visiting my blog and comment here. I hope the commentary contains a comment which intend to build and repair. criticism and suggestions I gladly accept.