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, Meriah Euy ...</ 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:
a. Selector
The first part before the "{}" is called selector
b. 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:
<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"> . Asked {color: red;} . Replied {color: blue;} </ Style>
</ Head>
<body>
<p class="tanya"> 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 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>
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>
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>
Another example.
<html>
<head>
<style type="text/css" media="all"> . Question {text-decoration: underline} / * underscore * / . Answer {text-decoration: overline} / * line of text * / . Repeat {text-decoration: line-through} / * line through the text * / . No-Imagination {text-decoration: blink; font-weight: bolder} / * Text blink * / </ Style>
</ Head> <body> <p class="question"> Q. Why why, never never, always 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 Do not Know, Casino and Indro. </ P> <p class="no-imagination">
Instead john terry? </ P>
</ Body>
</ Html>
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, Meriah Euy ...</ 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:
a. Selector
The first part before the "{}" is called selector
b. 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:
<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"> . Asked {color: red;} . Replied {color: blue;} </ Style>
</ Head>
<body>
<p class="tanya"> 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 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>
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>
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>
Another example.
<html>
<head>
<style type="text/css" media="all"> . Question {text-decoration: underline} / * underscore * / . Answer {text-decoration: overline} / * line of text * / . Repeat {text-decoration: line-through} / * line through the text * / . No-Imagination {text-decoration: blink; font-weight: bolder} / * Text blink * / </ Style>
</ Head> <body> <p class="question"> Q. Why why, never never, always 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 Do not Know, Casino and Indro. </ P> <p class="no-imagination">
Instead john terry? </ P>
</ Body>
</ Html>
No comments:
Post a Comment