Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Tuesday, August 26, 2008

HTML Backgrounds

The code below shows you how to position a background image on a web page with CSS.

Ex:
body
{
background-image:url('image.jpg');
background-repeat: no-repeat;
background-position: top center;
}

The background-position property can have the following values:

Property:
background-position

Values:
op left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
Read more...

Saturday, August 23, 2008

CSS Font

You can define the font of text with the use of CSS font properties.

Ex:
h3 {font-family: times;}
h4 {font-family: courier;font-size:12px;font-weight:bold;line-height:16px}
p {font-family: arial;color:#B30000}


The Font family, size, weight and line-height are commonly used font properties in the web page.
Read more...

Wednesday, August 20, 2008

Tags

These are some of the most common tags.

* b could be used to make an element bold. Using strong (meaning strong emphasis) instead adds meaning, or to just add boldness, font-weight: bold in CSS does the job.
* i could be used to italicise an element. Using em (meaning emphasis) instead also adds meaning or font-style: italic can be used to just add the presentation.
* big could be used to make big text. Using headings instead (h1, h2 etc, when text genuinely is a heading) adds meaning, or simply using the font-size property in CSS gives more control.
* small could be used to make small text. CSS (font-size) once more gives more control.
* hr could be used to show a horizontal rule. It is unusual to use hr in a CSS designed page anyway; properties such as border-top and border-bottom or even just plain old images do the job much better.
* u could be used to underline elements. It remains that underlined text is still associated by many with links. This is why this tag died a long time ago - you really don't want to be underlining non-linking text.
* center could be used to centre one element within another. The CSS property text-align allows values of not only center, but left, right and justify as well.
* menu could be used to create a menu list. It does pretty much what ul does, but as an 'unordered list' is more general, ul stands tall over menu's corpse.
* layer is similar to a div element positioned with CSS. These only work in old versions of Netscape. So not very useful then.
* blink or marquee. Just say "NO!" kids. They are supposed to do exactly as they say, but have very limited support and were surely only ever intended to be very, very sick jokes.
* font, which could be used to define the font name, size and colour of an element has gained a deserved reputation of being the notoriously mischievous evil goblin lord of Tagworld. Old sites (even some new ones) have font tags splattered all over their pages like a plague of termites. Much of their proliferation has come about from web authoring software, placing font tags around every element that the web author applied colour or size to. Whereas a font tag needs to be applied to every occurrence of an element (say, every time you use a p element), with CSS you can apply properties to every occurrence of an element with just one single little line of code for your whole web site. Using this method, not only is the page weight substantially lighter than an equivalent font-tag infested page, but changes can be made more easily because all you need to do is change one line of CSS rather than every instance of a font tag. This also increases the likelihood of maintaining a consistent design across your site. font tags and the inappropriate use of tables are the two most common causes of unnecessarily bloated pages.
Read more...

Thursday, August 14, 2008

The Display Property

A key trick to the manipulation of HTML elements is understanding that there's nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser's default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.

The most fundamental types of display are inline, block-line and none and they can be manipulated with the display property and the values inline, block and none.


inline does just what it says - elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.

block puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line.

none, well, doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations (see Accessible Links), alternate stylesheets or advanced hover effects.


Example:

h4 {
display: inline;
font-size: 2em;
}

#blog p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
Read more...

Tuesday, August 12, 2008

Lengths and Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.

em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.

px
(such as font-size: 12px) is the unit for pixels.

pt (such as font-size: 12pt) is the unit for points.

% (such as font-size: 80%) is the unit for... wait for it... percentages.

Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.
Read more...