CSS Club (Basic)

There's three popular ways to define the sizes for font using CSS - using em, pixel (px) and percentage %. For web designer, every design software we use such as photoshop and flash only allow the pixel fonts. It's fine with using px as font size but visually impaired users won't be able to resize your fonts using browser built-in font resizer tool (especially in IE). One of the duties of designers is to make the site as accessible as possible. So my advise for designers - set the body font in em first, an em is roughly equivalent to 16 pixels. Then set the rest of the font size for your elements using percentage %. Example body { font-size:1em; } - which is the same as setting body font size to 16px p { font-size:80%;} - which is the same as setting the font size to approx 13px By using em as the base font size, now users will be able to resize the fonts by just using the browser built-in resizer if the texts are too small.

Just add following code for your element which you want to have the bottom border in either dotted or dashed style - Dotted .text { border-bottom:1px dotted black ; } Dashed .text { border-bottom:1px dashed black; } Dotted and Dashed styles can be applied to any element including object, image, container or even lists.

You can put a border around just about anything on your page and with CSS customize it to match your page's color combinations, draw attention to a particular element, or emphasize important points. You can change the settings. #border{ border-style:solid; border-color: red; border-width:5px; } Unique sides Think about how many wooden picture frames are constructed. When four separate pieces are connected, they form the top, right, bottom, and left sides of the frame. Just like you could glue together four pieces of wood with different colors and widths to make a picture frame, you can also create a border that looks different on each side. All you have to do is set the property of each of the different sides: border-top border-bottom border-right border-left #colorful{ border-style:solid; border-top-color:blue; border-bottom-color:red; border-left-color:yellow; border-right-color:green; border-width:20px; border-top-width:10px; ...

This example show that the bg repeat value may be applied on it's own, independent of any other bg properties, or a shorthand value within a longer bg rule. Controlling repetition is simple with the bg-repeat proprety built into css. Potential values are repeat, no-repeat, repeat-x and repeat-y. These allow you to respectively choose between a repeating images, an img that is applied but doesn't repeat, and an img that only repeats in a single direction. Background Image repeat-x only Here is the code body { background: #FFFFFF url(img/bg01.jpg) repeat-x 0px 0px; } Note: repeat-x 0px(left space) 0px(Right Space); Background Color body { {background-color: #00ff00} } For more sample. please go to www.w3schools.com

This script allow us to insert image in to the body of text and floated, and the text plays along by wrapping around it to avoid an ugly gap. The syntax is simple, but mastery isn't. Here is the css #photo1{float:left;margin:0px 10px 5px 0px;} #photo2{float:right;margin:0px 0px 0px 0 px ;} Note: margin:0px(top) 10px(right) 5px(bottom) 0px(left); Then give your image an ID. Sample (zip) l View