Senin, 01 Agustus 2011

Acquainted with CSS ( What is CSS ? )

05.14  Fredy Samuel B Tarigan  No comments

What is CSS ?

CSS stands for Cascading Style Sheets. If you read in the dictionary, cascading is similiar with waterfall. But in this case, it means the flow from one code to another code that are interconected. So it can be concluded, CSS is a collection of codes that are consecutive and interlinked to set the format / display an HTML page.


The advantages of using CSS

If you have several pages where you use arial font for writing, then one day you get bored with arial and want replace it with trebuchet, you have to change one by one at your page and change the font type from arial to trebuchet.

By using css, to change the look of many pages, you simply do it in one CSS document, without having to touch the HTML file.

Thus, the advantages of using CSS, more practical!

Disadvantages Using CSS

Although CSS make designing web page easier and faster, but still there is a shortage of css. Not all browsers interpret CSS code in the same way. So sometimes, the web interface with the CSS looks good in one browser, but the mess in other browsers. So you should check the display to look good in all browsers and add special codes specific browser if needed in order to display your website looks good in all browsers. Needed more training so that when you designing a website with CSS, it can showed properly in all browsers.

Syntax / The way to writing CSS

Syntax / CSS sentences composed of several sets of regulations that have: a selector, a property, a value.

The format of writing sentences CSS:

selector { property: value }
Selector to indicate which parts are going to set up / formatted.

Property to show which parts of the selectors who want to set.

Value is the value of its settings.

Example:
h1 { color: red }
The example below show :
Selector: h1

Property: color

Value: red
Or we can said like this : That css has the function to set the color from h1 tags to red.

Grouping the Selectors

You can write a CSS code for a variety of selectors by using a comma. Suppose you want to set the tag h1, h2 and h3 all use red, then the CSS code become like this :
h1,h2,h3 { color: red }
Consider writing h1, h2, h3, separated by commas.

Using Many Properties

To set more than one properties you can use separator semicolon (;).

example:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
In the example above, tags h1, h2 and h3 are set to use red, with arial font type and font size to 150%.

How the Good Writting of CSS ?

It is advisable to write the CSS code using a few lines in which setting property and its values ​​in the indent. Yes, to be more organized and easier to read, not a necessity.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
Now that you understand the basic rules of writing sentences CSS. The next post will teach you apply the CSS code to your pages.

CSS Comment

Sometimes, it helps you write comments in your CSS code to give a reminder note.

You can use the syntax /* for the opening tags and * / as clossing tags to write a comment. Any text that is between the tag / * and * / will not be read as a code, but only as a record for yourself.
/* Write your comment here */
p
{
text-align: justify;
/* Write your comment here */
color: blue;
font-family: arial;
}
Inputing CSS to Web Document

There are three ways to inputing CSS to your web document. What are they ? Let me explain it one by one. Check this out :
  1. External style sheet
    An external style sheet is 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. It consume less time and powe. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. And you can put that .css files anywhere you want. But, be sure to call the right place in your html files. For a better result, it's recommanded to use full path instead of simple path. An example of a style sheet file is shown below:
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  2. Internal style sheet
    An internal style sheet should be used when a single document has a unique style. You can do this, if don't make many changes to your html files. Or you will get confused to edit it later. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
    <head>
    <style type="text/css">
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>
    </head>
  3. Inline Styles
    An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. For your information, this style rarely use in web developing. Because when you want to edit it, yeah you must find the css and also take a look at the thml tags. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
    <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
  4. Multiple Style Sheets
    If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.For example, an external style sheet has these properties for the h3 selector:
    h3
    {
    color:red;
    text-align:left;
    font-size:8pt;
    }
    And an internal style sheet has these properties for the h3 selector:
    h3
    {
    text-align:right;
    font-size:20pt;
    }
    If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
    color:red;
    text-align:right;
    font-size:20pt;
    The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
  5. Multiple Styles Will Cascade into One
    Styles can be specified:
    • inside an HTML element
    • inside the head section of an HTML page
    • in an external CSS file
    Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Oke, i think that's all i want to introduce you about CSS. There some word i copy from w3school. Next posting, we will try to make a dropdown menu with css. Interesting? Let's wait until next post. :)

At last, Happy Coding All :)

Posted in: ,,,,

0 komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More