CSS Basics part 1 color and background

August 19, 2008 – 11:36 pm

How to apply colors and background colors to your websites with CSS ?

You can use one or more of this property :

color

background-color

background-image

background-repeat

background-attachment

background-position

Color ?

Example,  we want all headlines in a website to be dark red. The headlines are all marked with the HTML element <h1>. Simply do this :

h1 {

color: #ff0000;

}

Colors can be entered as hexadecimal  (#ff0000), or  the names of the colors (”red”) or rgb-values (rgb(255,0,0)).

 

background-color ?

 

background-color property describes the background color of elements.

You can also apply background colors to other elements including headlines and text. 

h1 {

color: #990000;

background-color: #FC9804;

}

Notice that we applied two properties to <h1> by dividing them by a semicolon (;).

 

background image ?

 

background-image is used to insert a background image.

insert the image of the butterfly as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

body {

background-color: #FFCC66;

background-image: url(”background.png”);

}

NB: Notice how we specified the location of the image as url(”background.png”). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url(”./images/background.png”).

 

background image : repeat ?

You can use different values for background-repeat below :

background-repeat: repeat-x : The image is repeated horizontally

background-repeat: repeat-y : The image is repeated vertically

background-repeat: repeat : The image is repeated both horizontally and vertically

background-repeat: no-repeat : The image is not repeated

 

For example, to avoid repetition of a background image the code should look like this:

body {

background-color: #FFCC66;

background-image: url(”background.png”);

background-repeat: no-repeat;

}

 

background image : attachment?

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

 

Background-attachment: scroll : The image scrolls with the page - unlocked

Background-attachment: fixed : The image is locked

 

For example, the code below will fix the background image.

body {

background-color: #FFCC66;

background-image: url(”background.png”);

background-repeat: no-repeat;

background-attachment: fixed;

}

 

background image : position?

By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen. For example, the value ‘50px 70px’ positions the background image 50px from the left side and 70px from the top of the browser window.

The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right.

Example :

background-position: 2cm 2cm = The image is positioned 2 cm from the left and 2 cm down the page

background-position: 50% 25% = The image is centrally positioned and one fourth down the page

background-position: top right = The image is positioned in the top-right corner of the page

 

Example code = the background image in the bottom right corner:

body {

background-color: #FFCC66;

background-image: url(”background.png”);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

}

 

background : Compressing method

 

You can compress several properties and thereby write your style sheet in a shorter way, the list of order is describe below :

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

So the same result can be achieved in just one line of code:

background: #FFCC66 url(”background.png”) no-repeat fixed right bottom;

Share/Save/Bookmark

By minanube | Posted in Web Desain | Tagged , | Comments (0)

CSS Basics part 1 introducing

August 19, 2008 – 11:28 am

CSS is an acronym for Cascading Style Sheets.

What are Style Sheets? 

They provide a way to separate design from content; rules  that control the browsers presentation of a document. For example, CSS covers backgrounds, fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. 

Why should I want to use CSS? 

There are many reasons to use CSS.  The first of which is that it provides a way to make a clean separation between content and presentation (control layout of many documents from one single style sheet) . more precise control of layout.   Allowing easier maintenance and the ability to quickly change the design/style of the site.  Another small benefit is that it reduces the page load time by allowing all pages of a site to share the same file – reducing download time and if you are the Coding Ninja there are numerous advanced and sophisticated techniques you can use with your solid weapon.

 

 

So what the different with HTML ?

HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated and  CSS is supported by all browsers today.

 

Or in other words is HTML is used to structure content. CSS is used for formatting structured content.

 

How does CSS work?

Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. 

Example :

 

Using HTML we could have done it like this:

<body bgcolor=”#FF0000″>

 

With CSS the same result can be achieved like this:

body {background-color: #FF0000;}

 

As you will note, the codes are more or less identical for HTML and CSS. The above example also shows you the fundamental CSS model: Syntax  (simplified): [Element] { [CSS Property] : [Property Value]}

 

where do you put the CSS code?

Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this:

<html>

  <head>

    <title>Example</title>

  </head>

  <body style=”background-color: #FF0000;”>

    <p>This is a red page</p>

  </body>

</html>

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

<html>

  <head>

    <title>Example</title>

    <style type=”text/css”>

      body {background-color: #FF0000;}

    </style>

  </head>

  <body>

    <p>This is a red page</p>

  </body>

</html>

Method 3: External (link to a style sheet)

The recommended method is to link to a so-called external style sheet. Throughout this tutorial we will use this method in all our examples.

An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk.

For example, let’s say that your style sheet is named style.css and is located in a folder named style.

The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code:

<link rel=”stylesheet” type=”text/css” href=”style/style.css” />

Notice how the path to our style sheet is indicated using the attribute href.

The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags. Like this:

<html>

  <head>

    <title>My document</title>

    <link rel=”stylesheet” type=”text/css” href=”style/style.css” />

  </head>

  <body>

  …

This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.
The really smart thing is that several HTML documents can be linked to the same style sheet. In other words, one CSS file can be used to control the layout of many HTML documents.

his technique can save you a lot of work. If you, for example, would like to change the background color of a website with 100 pages, a style sheet can save you from having to manually change all 100 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet.

Let’s put what we just learned into practice.

Try it yourself

Open Notepad (or whatever text editor you use) and create two files - an HTML file and a CSS file - with the following contents:

default.htm

<html>

  <head>

    <title>My document</title>

    <link rel=”stylesheet” type=”text/css” href=”style.css” />

  </head>

  <body>

    <h1>My first stylesheet</h1>

  </body>

</html>

style.css

body {

  background-color: #FF0000;

}

Now place the two files in the same folder. Remember to save the files with the right extensions (respectively “.htm” and “.css”)

Open default.htm with your browser and see how the page has a red background. Congratulations! You have made your first style sheet!

Share/Save/Bookmark

By minanube | Posted in Web Desain | Tagged , | Comments (0)

Susahnya Jadi Petani Desa

August 11, 2008 – 6:11 pm

Pupuk langka, belinya sulit, harga pupuk naik terus. Masalah klise untuk petani indonesia, trutama petani2 desa. itulah gambaran saya saat ikut urun rembug (diskusi bersama) KTNA kota bojonegoro di desa Balen kemarin

Untuk beli pupuk saja, sekarang ruwetnya minta ampun, harus bawa ktp, nama pembeli harus sudah tercatat dan berapa hektar sawah yang dipunyainya, sehingga seandainya ada petani punya sawah dan tidak terdaftar maka tidak bisa membeli pupuk bersubsidi (bersubsidi tapi tetep mahal). Semua keruwetan ini karena pemerintah memberlakukan sistem distribusi tertutup. sebenarnya tujuan sistem ini sangat bagus, tapi dalam prakteknya malah membuat petani bingung dan kocar-kacir, sehingga gak jarang petani misuh-misuh (berkata kotor) karena merasa dipersulit/dianiaya oleh sistem tertutup ini. Dan bisa anda tebak siapa yang menjadi tumbal pisuhan (perkataan kotor/hinaan) ini, tentu saja orang nomor satu di negeri ini.

Sebenarnya kalo petani mau sedikit pintar (baca : belajar) sistem ini bisa membantu masalah pupuk petani desa, masalahnya petani2 desa selalu overdosis dalam memberi pupuk dan tidak memakai aturan dan saran dari pemerintah, padahal pembelian pupuk dari pemerintah sudah dipaketkan. Yang artinya terdiri dari beberapa jenis pupuk sekaligus dalam pembelian. Petani seharusnya juga bisa mencari pupuk alternative yang jauh lebih murah yaitu pupuk organik dari korotan ternak atau sampah organik. untuk masalah ini sebenarnya sudah ada kelompok2 tani yang menggunakanya, tetapi penggunaanya terbatas pada kelompok tersebut saja dan petani lain tidak mau mengadopsi cara ini.

Terlepas masalah pupuk sebenarnya masih banyak masalah yang dihadapi oleh petani2 di desa-desa. Pemerintah seharusnya lebih mendorong usaha pupuk organik atau memberikan kemudahan dalam sektor industri pupuk sehingga menarik investor asing dan lokal untuk masuk ke sektor ini dan bisa mendongkel dominasi pupuk bersubsidi sehingga nantinya harga pasar akan bersaing dan tentu saja petanilah yang akan diuntungkan dari persaingan harga pasar di sektor pupuk ini.

 

Seperti iklan yang sering nongol di tv  ”where there’s a will there’s a way” kita lihat saja seberapa kuat keinginan pemerintah memperbaiki pertanian indonesia.

Share/Save/Bookmark

By minanube | Posted in Pertanian dan Pangan | Comments (1)