Archive for the ‘CSS Basic’ Category

Css basic format

Wednesday, September 16th, 2009

What is the basic css formatting?

If you look really carefully HTML translation results in the browser is shaped box, inside the box can be divided into several areas such as Content, Padding, Border, and Margin.

From each of these areas can be formatted by using CSS style.

To clarify what the above of CSS format, see the illustration below:
css box style
Description:

  • In the most central area called the Content,
    Content can be either text or image, is also a combination of Text and Image.
  • Padding, Padding separates content with the Border.
  • Outside Padding, called the Border,
    Border is the line than the content in between the padding and margins.
  • The most outer area called the Margin,
    The margin between the border and separates the outer side.

Create a CSS Syntax file

Monday, September 14th, 2009

How to Put CSS file in (X)HTML ?

In general there are 3 ways to put the CSS into the HTML code:
- Inline Style Sheet
- Internal Style Sheet
-E xternal Style Sheet

At this point you have some choices of how to use the CSS, either inline, internally or externally.

The following is an explanation of each formation… (more…)

CSS Syntax

Monday, September 14th, 2009

What is CSS Syntax ?

A CSS rule has two main parts: a selector, and one or more declarations…

The syntax for CSS is different than that of (X)HTML markup.
Though it is not too confusing, once you take a look at it.

There are 3 important part of syntax or in writing to the CSS are:

Selector {property1: value1; property2:value2;}

  • Selector,is an HTML tag like (div, p, div, table, td, th, and so on ..)
    This tags will be given effect by the property and its value so that any format that we want can be achieved with CSS.
    Try to note the example below:
<style type="text/css">
    p: {color:red;}
</style>

From the example above, the selector is the Tag P, Tag P are HTML tag that make up a paragraph on a Web browser, so when Tag P given a property (color) and  value (red), and then if we look on the browser, will display Text with Red color.

  • Property:Value, is the essence of style that determine the effects of the selector, if you want to have a selector that background color?, background image?, underlined?, or a striped top?.
    From the example above, which is color property, property should be placed amid signs that the {…} while value is red.
    Among properties with values separated by a colon (:) while to obtain the property in a style definition, we use a dot coma (;) as Value.
    Example:
p {color:#FFFFFF;
   padding-top:10px;
   font-size:12px;
   }