Custom Search

Thursday, January 18, 2007

learning CSS - part2

To start off our understanding of cascading style sheets, we're going to use a special line of CSS code that does something HTML alone could never do right… we're going to indent every paragraph automatically.

Here's the CSS code:

p { text-indent: 3em; }

As you can imagine, in its current form, the code does not but display p { text-indent: 3em; } on the screen instead of changing the way the paragraph tag behaves. We have several choices to implement this as an actual style, all of which are covered in this chapter:

  • Write it inline inside each and every tag
  • Place a at the beginning of the web page
  • Dedicate and link a CSS file and write it inside that file
  • Use @import to include it as portion of a page's CSS

Writing inline style inside each tag is one of the worst ways to design a CSS page, although there are a few rare circumstances where it may be appropriate. But to know CSS, you need to know how to do it, and it will also help you understand how the CSS system works.

In our example, p is the selector, that is, what is selected to follow your chosen style. What the web browser understands is that when it sees the tag p, before writing any content, it needs to indent the text 3em. (1 em is a size for laying out glyphs in print... the important thing to understand about 3em is that 3em is about 5 spaces, the typical indentation choice). text-indent is a property, and 3em is the value of that property.

All definitions in CSS follow this format:

selector { property: value; }

You can also include multiple properties and values for a single selector, merely separate them with a ;. If we wanted the paragraph text to be green, we could add color: green; after the text-indent: 3em;.

To write inline, we can start with

, the normal surroundings of a paragraph. Then, in the opening

tag, we'll add special code to say we want a style, merely

. Then, inside the quotes, we'll add all the properties and values we want this specific paragraph tag to have. So we'll make ours

This works just fine, as you can see below, however, we certainly do not want to write that for every paragraph we want to indent!

This paragraph is indented at
the very beginning by using an inline style.

(to be continued....)

learning CSS (Cascading Style Sheet) - part 1

What is CSS ? CSS make us simple and effective making the website.

Imagine you've just designed a two hundred page web site for a client (or maybe for yourself) but at the last minute your client (or you) decide the font is a little two small or the typeface should be serif instead of sans-serif? You didn't know how to use cascading style sheets (CSS) so you coded all of the pages with the old-style tag. If you didn't know CSS, chances are you'd have to replace every occurrence of the old tag with the new tag :-(

But if you had decided to write the site with CSS from the get-go, all you would have to do is replace one single line of code in a master file, and your entire site would be rendered immediately in your new style.

That's just one file to upload. That's a lot better than two hundred. Now you can do other things with your time. This is one major reason cascading style sheets are important. CSS makes web site maintenance easier :-)

Cascading style sheets (CSS) have a side effect of improving page load time for your site. Why does it load faster you ask? There is less data to transfer. Normally, a web browser has to download all of your formatting code in each and every one of your pages on your site. With CSS, the style sheet is downloaded once and cached, and every page beyond your first page is shorter and sweeter. Every page that uses your style sheet is also more consistent, because it is derived from an identical style. No more 14 point typeface on page A and 12 point typeface on page B. Just link both pages to one style sheet, and the formatting is automatic.

Cascading style sheets also improve accessibility. If someone has poor eyesight, they can use the advanced feature of a web browser to define their own style. If the can only see 16 point fonts and larger, they can define so in their own personal style sheet. This style sheet can override your defaults, making your site more enjoyable to an even larger audience.

Ok, Get your cup of coffee or green tea, and get ready to learn how to make your web design life a little bit easier. It's time to learn how easy it is to use cascading style sheets...
(to be continued....)

Monday, January 01, 2007

internet down :-(

pagi ini internet masih down, walaupun konek tapi 5 menit mati, trus hidup lagi :(
perbaikan kabel juga tertunda, jadi sabar aja...