Margin in CSS

The separation between most normal-flow elements occurs because of element margins. Setting a margin creates extra "blank space" around an element. "Blank space" generally refers to an area in which other elements cannot also exist and in which the parent element's background is visible

margin

Values

[ | | auto ]{1,4} | inherit

Initial value

not defined

Applies to

all elements

margin can accept any length of measure, whether in pixels, inches, millimeters, or ems. However, the default value for margin is effectively 0 (zero), so if you don't declare a value, by default, no margin should appear

Learning About Position in CSS

In my last post about CSS, I had discuss about Floating, now I will discuss about positioning. The idea behind positioning is fairly simple. It allows you to define exactly where element boxes will appear relative to where they would ordinarily be—or relative to a parent element, another element, or even to the browser window itself

The properties of positioning are :

position

Values

static | relative | absolute | fixed | inherit

Initial value

static

Applies to

all elements

The values of position have the following meanings:

static

The element's box is generated as normal. Block-level elements generate a rectangular box that is part of the document's flow, and inline-level boxes cause the creation of one or more line boxes that are flowed within their parent element.

relative

The element's box is offset by some distance. The element retains the shape it would have had were it not positioned, and the space that the element would ordinarily have occupied is preserved.

absolute

The element's box is completely removed from the flow of the document and positioned with respect to its containing block, which may be another element in the document or the initial containing block (described in the next section). Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist. The positioned element generates a block-level box, regardless of the type of box it would have generated if it were in the normal flow.

fixed

The element's box behaves as though it was set to absolute, but its containing block is the viewport itself.

Layout Style using Floating

Floating, on the other hand, first came to us in CSS1, based on a capability that had been added by Netscape early in the Web's life. Floating is not exactly positioning, but it certainly isn't normal-flow layout either. Keep a few things in mind with regard to floating elements. In the first place, a floated element is, in some ways, removed from the normal flow of the document, although it still affects the layout. In a manner utterly unique within CSS, floated elements exist almost on their own plane, yet they still have influence over the rest of the document.

Floating Property :

Values

left | right | none | inherit

Initial value

none

Applies to

all elements

Example :

< src="example.gif" style="float: left; margin:25px" alt="example">

Generated Content in CSS

CSS2 and CSS2.1 include a new feature called generated content. This is content that is created by the browser but is not represented either by markup or content. To insert generated content into the document, use the :before and :after pseudo-elements. These place generated content before or after the content of an element by way of the content property (described in the next section).

If you're going to generate content, you need a way to describe the content to be generated. As you've already seen, this is handled with the content property, but there's a great deal more to this property than you've seen thus far

Content :

Values

normal | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Initial value

normal

Applies to

:before and :after pseudo-elements

Example :

CSS script

h1:before {content:"This is first content"; display:block; color: red;}

HTML tag

< h1 >this is second content< /h1 >

About Selector in CSS ( con’t )

In addition to raw document elements, there are two other types of selectors: class selectors and ID selectors, which let you assign styles in a way that is independent of document elements. These selectors can be used on their own or in conjunction with element selectors. However, they work only if you've marked up your document appropriately, so using them generally involves a little forethought and planning.

Class Selectors

The most common way to apply styles without worrying about the elements involved is to use class selectors. Before we can use them, however, we need to modify your actual document markup so that the class selectors will work

example :

< class =" ‘error’"> This is a error message < /h1>

< class =" ‘error’"> Please enter your email correctly

Here, we’ve specified a class of error to both the h1 element and the p (paragraph) element. In CSS, class selectors are indicated by a class name preceded by a period (.).

Example : .error { color : red; font-weight:bold; }

This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that have the class name error. In our markup, both the h1 and the p elements would become red and bold

Id Selectors

In some ways, ID selectors are similar to class selectors, but there are a few crucial differences. First, ID selectors are preceded by an octothorpe (#). The second difference is that instead of referencing values of the class attribute, ID selectors refer to values found in id attributes.

Example :

< id =" ‘error’"> This is a error message < /h1>

< id =" ‘error’"> Please enter your email correctly < /p>

then CSS

#error { color : red; font-weight:bold; }

This CSS will apply to all element that have id name error.

About Selector in CSS

Once of primary advantages of CSS is its ability to easily apply set of style to all elements of the same type.like example, by editing a single line of CSS, we can change background of all our heading. CSS has rule that divide become 2 parts : a selector, which tells the browser which element(s) will be affected by the rule; and a declaration block, which determines which properties of the element will be modified.

Example :

H1 { color : red }

H1 is a selector

color :red is a declaration block which is color is property and red is value

The selector, shown on the left side of the rule, defines which piece of the document will be affected. in this case, all element that contain H1 has become red.

Selector can also be grouping of selector, if we want the same style to apply to multiple elements. in that case we will want to use more than one selector or apply more than one style to an element or group of elements.

example :

h1,p { color : red }

in above example, elements h1 and paragraph have red text. By placing the h1 and p selectors on the left side of the rule and separating them with a comma, we have defined a rule where the style on the right (color: red;) applies to the elements referenced by both selectors. The comma tells the browser that there are two different selectors involved in the rule. Leaving out the comma would give the rule a completely different meaning.

about selector will be continue in the next post……

Styling Form In CSS

now I give a simple example how to styling form in CSS. I divide in two part, one is HTML script and other is CSS script.

here an HTML part



< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>Styling Form Example< /title>
< /head>
< body>
< form id="form1" action="act/" method="post">
< fieldset id="name">
< legend>Name< /legend>
< label for="title">Title< /label>
< select id="title1" name="title1">
< option selected="selected">Mr.< /option>
< option>Mrs.< /option>
< option>Ms.< /option>
< /select>
< label for="firstname">First name< /label>
< input id="firstname" name="firstname" type="text" />
< label for="lastname">Last name< /label>
< input id="lastname" name="lastname" type="text" />
< br />
< /fieldset>
< fieldset id="address">
< legend>Address< /legend>
< label for="street">Street< /label>
< input id="street" name="street" type="text" />
< br />
< label for="city">City< /label>
< input id="city" name="city" type="text" />
< label for="state">State< /label>
< input id="state" name="state" type="text" />
< label for="zip">Zip code< /label>
< input id="zip" name="zip" type="text" />
< br />
< label for="country">Country< /label>
< input id="country" name="country" type="text" />
< br />
< /fieldset>
< fieldset id="submit">
< br />
< input type="submit" value="Submit" />
< br />
< /fieldset>
< /form>
< /body>
< /html>

then now apply this CSS :

< style type="text/css">
body{
background-color:#000000;
}
fieldset{
background-color:#3399FF;
width:450px;
}
legend{
color:#FFFFFF;
font-weight:bold;
font-size:16pt;
}
label {
display: block;
float: left;
clear: left;
width: 9em;
padding-right: 1em;
text-align: right;
line-height: 1.8em;
}
input {
display: block;
float: left;
}
br {
clear: both;
}
< /style>

you can use this CSS between tag < head> and < /head>

Using Outline in CSS

An outline is sort of a like a border, but there are some very important differences.

1. outlines do not participate in the flow of the document like borders do, and thus don't trigger document reflow as they appear and disappear.
2. outlines can be nonrectangular

Outlines are considered to be part of user interface styling because they are most often used to indicate the current focus.

Outline Property :

Values
[ <> || <> || <> ] | inherit

Initial value
not defined

Applies to
all elements

Using Cursor in CSS

An important part of the user interface is the cursor (referred to in the CSS specification as the "pointing device"), which is controlled by a device such as a mouse, trackpad, graphic tablet, or even an optical-reading system. The cursor is useful for providing interaction feedback in most web browsers.

CSS2 lets you change the cursor icon, which means that it's much easier to create web-based applications that function in a manner similar to desktop applications in the operating system.

Cursor property
Values : [[,]* [ auto | default | pointer | crosshair | move | e-resize | ne- resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit
Initial Value : auto

Example:
a{ cursor:pointer}

Little about CSS

CSS(Cascade Style Sheet) is a stylesheet that described how to present a document in browser.CSS is used to help readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content.

complete article check here