Anyone Can Code

Not everyone is a coder, but a coder can come from anywhere

CSS


The essentials:

a) Stylesheet: A file with extention with css (i.e. soler_system.css).
b) Rules: selector -> Curly brace -> Declaration -> Curly brace
body{padding:0;margin:0;}    or
body{
padding:0;
margin:0;
}
Note: A rule may contain more than one selector separated by comma.
h1, h2, h3, h4, h5{
color:blue;
font-family: Arial;
}
c) Selectors:  Selector is the HTML element or elements to which a CSS rule is applied.
d) Declaration: Declarations are enclosed within curly braces to separate them from selectors
e) Property: That will be controlled
f) Value: The value of the property. They may be numerical (10px), or keyword (black, fixed, underline, block, etc). String value will me enclosed by double quote. (i.e. “Times New Roman”)

CSS Comment:
/* This is a single line comment*/
/* This is a
*  Multiple line
* Comment */

Length and Measurement:
Absolute Measurement: Absolute lengths are not intended for the computer screen

Unit Abbreviation Description
in Inches
cm Centimeters
mm Millimeters
pt Points, 1 point is equal to 1/72nd of an inch
pc Picas, 1 pica is equal to 12 points

Relative Measurement: Relative measurement is better suited for the purpose of onscreen layout

Unit Abbreviation Description
em Length relevant to the nearest font size.
ex The x-height of the relevant font (height of the letter x).
px Pixels, relative to the viewing device, for example, a computer monitor.
% Percentage measurement; how percentage length is calculated depends on what property it is being applied to.

Note: Pixels should be used for measurements where a user’s font size preference won’t be a factor, and where a real-world, absolute length wouldn’t be superior, such as for print. An example of a good place to use pixels would be for the width of a border around a box.

Number: Integer -> In CSS, an integer may be preceded by a plus (+) or minus (-) to indicate the sign
Colors:
–Color keywords: These enable you to specify a color by its name.
RGB values: These enable you to specify a color via a Red, Green, Blue representation, which provides access to millions of colors.
RGB Percentage: This option is the same as RGB but uses percentages.
RGBA (RGB with Alpha channel [available in CSS 3]): The RGB palette is used with the addition of an alpha channel to specify transparency.
Hexadecimal: This enables you to specify a color by a special hexadecimal number.
Shorthand Hexadecimal: This is a shortened representation of hexadecimal numbers; it is limited to a special 216-color, web-safe palette.
URL: -> Inclusion of stylesheet
-> Inclusion of image

Including CSS
There are four style of styling the HTML element or declaring CSS property:
1) Inline style: <div style=”width:100px; height:100px;display:block;”> Content</style>
2) Inside <head> tag:
<head>
<style>
body{
margin:0;
padding:0;
}
</style>
</head>
3) Embedding a css file in <head> tag:
<head>
<link rel=”stylesheet” type=”text/css” href=”path/to/yourStyle.css”>
</head>
4) Importing a css file in <style> tag:
<style type=’text/css’>
@import url(path/to/yourStyle.css);
</style>

Chap 2

Selectors:
Two types of selectors:
Classes: The class name selector begins with a dot, followed by the class name itself, which you choose. Typically, the class name is comprised of letters, numbers, and hyphens only, since this provides the best compatibility with older browsers. Class names also cannot include spaces. Class may encompass many elements in a given document, even elements of different types or purposes.
.myClass1{margin:3px;display:inline;}
.myClass2{background-color: blue;padding:5px;}
example:
Same class in different element:
<div class=”myClass1″><img class=”myClass1″ src=”photo.jpeg” alt=”" /></div>
More than one class in an element:
<div class=”myClass1 myClass2″>Content</div>
Element specific Class:
div.myClass{padding:10px;background-color:red;}
img.myClass{border:0;padding:0;}
Chained class name:
div.myClass2.myClass2{left:0;}
Note: IE6 Doesn’t support chained class name. it will only take the last class.

Id: Id selectors are unique identifiers; an id is meant to be unique, defined once per document. To reference an id, you precede the id name with a hash mark (or pound sign, #). Like class names, this name cannot contain spaces. You should use names that only include letters, numbers, and spaces for compatibility with the older browsers.
#container{width:950px;height:auto;}
img#logo{border:0;width:20px;height:20px;}

<div id=”container”><img src=”logo.png” id=”logo” /></div>

Universal selector: The universal selector is an asterisk. When used alone, the universal selector tells the CSS interpreter to apply the CSS rule to all elements in the document.
*{
border:1px solid #red;
}
Descendant selector: Descendant selectors apply style based on whether one element is a descendant of another.
div#myDiv p span.cmment{color:#ccc}
<div id=”myDiv”>
<p>
This is the paragraph contains a span of comment where comment is <span class=”comment”>This is my comment</span>
</p>
<p>
This is another paragraph contains a span of comment where comment is <span class=”comment”>This is not my comment</span>
</p>
</div>
Direct child selectors: Direct child selectors operate much like descendant selectors in that they also rely on an ancestral relationship to decide where to apply style. Descendant selectors, however, are more ambiguous because they apply to any descendant of an element; the descendant can be a grandchild or a great-grandchild, or a great-great-grandchild, and so on. Direct child selectors apply only to immediate children of the element.

div#myDiv > p > span.comment{color:#ccc}

Note: IE6 doesn’t support direct child selector.

Next Sibling Selector: The official name of the selector according to the W3C is, the adjacent sibling com-binator.
CSS:
p {
padding: 5px;
}
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
HTML:
<h1>Next Sibling Selectors</h1>
<p>
The next sibling selector (or adjacent sibling combinator as
it’s officially called) allows you to select an element based on
its sibling.  This paragraph has a lightyellow background and
darkkhaki text.
</p>
<p>
This paragraph has a yellowgreen background and green text.
</p>
<p>
This paragraph has no colored background, border, or text.
</p>
Attribute Selectors: Attribute selectors are used to apply style sheet declarations based on the presence of attributes or attribute values of an HTML element.
img[alt]{boder:1px solid #blue}
input[type="text"][name="first-name"]{border:1px solid #ccc;}

You are not limited to detecting the presence of an attribute; there are several types of attribute selectors, and CSS is capable of detecting attributes based on the following criteria:
->The presence of an attribute
->The value of an attribute
->Whether one of several possible values is present in an attribute
->Whether the attribute value begins with a specific string
->Whether the attribute value ends with a specific string
->Whether the attribute value contains a specific string anywhere in the value, be it at the beginning, end, or middle

Note: Unfortunately IE6 doesn’t support attribute selector.

Pseudo-Elements:
p:first-line{letter-spacing:3px;}
p:first-letter {
background: darkblue;
color: white;
font: 55px “Monotype Corsiva”;
float: left;
margin-right: 5px;
}
Note: CSS 3 changes pseudo-element syntax to use a double colon (::) preceding each pseudo-element. IE 6 appears to support the double-colon syntax without any problems, but IE 7 does not support this syntax.

Psudo-Classes:
-> link: signifies unvisited hyperlinks:
-> visited: indicates visited hyperlinks
-> hover: signifies an element that currently has the user’s mouse pointer hovering over it
-> active: signifies an element on which the user is currently clicking

a:hover{color:#ccc;}
a:link{color:#blue;}
a:visited{color:#666;}

Note: In IE 6, the :hover and :active pseudo-class applies only to hyperlinks (which is incorrect under the CSS 2 specification), whereas other browsers recognize the :hover pseudo-class on any rendered element, per the CSS 2 specification. This problem is fixed in IE 7.

The first-child Structural Pseudo-Class:

p:first-child{background-color:#ccc;}

Note: IE 6 does not support the :first-child structural pseudo-class.

The cascade:
The precedence of each style sheet is as follows:
1) The browser’s style sheet is the weakest.
2) The user’s style sheet takes precedence over the browser’s style sheet.
3) The author’s style sheet is the strongest and takes precedence over the user’s and the browser’s style sheets.The (X)HTML style attribute is more important than styles defined in any style sheet.

Calculating the Specificity of a Selector:
Count 1 if the styles are applied from the (X)HTML style attribute, and 0 otherwise; this becomes variable a.
Count the number of ID attributes in the selector; the sum is variable b.
Count the number of attributes, pseudo-classes, and class names in a selector; the sum is variable c.
Count the number of element names in the selector; this is variable d.
Ignore pseudo-elements.

Selector
 Selector type
 Specificity
* Universal Selector 0000 (a = 0, b = 0, c = 0, d = 0)
ul Element Name 0001 (a = 0, b = 0, c = 0, d = 1)
ul li Element Name 0002 (a = 0, b = 0, c = 0, d = 2)
div h1 + p Element Name 0003 (a = 0, b = 0, c = 0, d = 3)
input[type=’text’] Element Name + Attribute 0011(a = 0, b = 0, c = 1, d = 1)
.someclass Class Name 0010 (a = 0, b = 0, c = 1, d = 0)
div.someclass Element Name + Class Name 0011(a = 0, b = 0, c = 1, d = 1)
div.someclass.someother Element Name + Class Name + Class Name 0021
(a = 0, b = 0, c = 2, d = 1)
#someid ID Name 0100 (a = 0, b = 1, c = 0, d = 0)
div#someid Element Name + ID Name 0101(a = 0, b = 1, c = 0, d = 1)
style (attribute) style (attribute) 1000 (a = 1, b = 0, c = 0, d = 0)

!important Rules: A declaration containing the !important rule, like the preceding one, takes precedence over any other declaration.

Inheritance:
Many properties in CSS are inheritable; some are not. Where it is supported and appropriate, inheritance makes writing style sheets a snap. For the most part, two types of properties can be inherited: text and font properties.

Properties
Text manipulation:

Property name Property Description Value Initial Value Comment
letter-spacing controls the amount of space between the letters normal | < length > normal
word-spacing controls the space between words normal | < length > normal
text-indent identifies the first line of text of a paragraph and inserts the specified length before the first line of text <length> | <percentage> 0
text-align aligns text left | right | center | justify left
text-decoration applies underlining, overlining, and strikethrough to text none | underline |overline | line-through | blink none IE and Safari doesn’t support blink
text-transform manipulate the case of text capitalize | uppercase | lowercase | none none
white-space control text formatting in the source code of the web document normal | pre | nowrap normal IE 6 and IE 7 support white-space: pre; only in standards rendering mode

Fonts

Property name Property Description Value Initial Value Comment
font-family used to specify fonts [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] Varies depending on the browser or user agent
font-style used to switch between styles provided by a particular font normal | italic | oblique normal
font-variant provides an effect normal | small-caps normal
font-weight provides the functionality to specify how bold a font is normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal
font-size control the size of fonts <absolute-size>(xx-small, x-small, small, medium, large, x-large, xx-large
) |
<relative-size>(
larger, smaller
) |
<length>| <percentage>		 medium The actual length unit size of each keyword varies depending on a number of factors, such as:

  • The browser’s default font size
  • The user’s font size preferences
  • The font family being used

font Shorthand property:
[ <’font-style’> || <’font-variant’> || <’font-weight’> ]? <’font-size’>

[ / <’line-height’> ]? <’font-family’> ] caption | icon | menu | message-box | small-caption | status-bar

(The forward slash in the notation indicates that if a line height is specified, a forward slash must separate the font-size and line-height properties. The question mark after the closing square bracket indicates that this portion of the syntax is optional.)

Box Model

Margin:

Property Value
Margin [ <length> | <percentage> | auto ] {1,4}
margin-topmargin-right

margin-bottom

margin-left

 <length> | <percentage> |

Box model shorthand properties are always specified in order clockwise from the top: top, right, bottom, and left – for example: margin: 10px 10px 10px 10px;

Box model shorthand properties with three values always follow the convention top, right and left, bottom – for example: margin: 15px 5px 10px;

Box model shorthand properties with two values always follow the convention top and bottom, right and left – for example: margin: 15px 10px;

Box model shorthand properties with one value always set the property for all sides of the box. - for example: margin: 10px;

Margin Collapsing
margin collapsing occurs when the top or bottom margin of one element comes into contact with the top or bottom margin of another element. The smaller of the two margins is reduced to zero; if both element margins are the same length, then one of the margins is reduced to zero. Margin collapsing also happens when an element is contained inside of another element. It doesn’t matter where the two margins come into contact, even an element inside of another element will margin collapse with its parent if the two margins come into contact. The winning margin is always applied to the parent element, and the child element’s margin always collapses. Margin collapsing occurs always for top and bottom margin, not with the left and right margin.
To solve this problem padding and border can be used so that two margins do not come in contact to each other.

Horizontally Aligning Elements with the Margin Property
for left align –> margin: 10px auto 10px 0;
for right align –> margin: 10px 0 10px auto;
for center align –> margin: 10px auto;

For aligning elements in IE 6 and IE 7 in Quirks Rendering Mode use text-align property.

Border:

border-width

Property Value
border-top-widthborder-right-width

border-bottom-width

border-left-width

 <border-width>Initial value: medium
border-widthA <border-width> value refers to one of the following:

thin | medium | thick | <length>

 <border-width> {1,4}Initial value: medium

border-style

Property Value
border-styleA <border-style> value refers to one of the following:

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

 <border-style> {1,4}Initial value: none
border-top-styleborder-right-style

border-bottom-style

border-left-style

 <border-style>Initial value: none

border-color

Property Value
border-color [ <color> | transparent ] {1,4}Initial value: the value of the ‘color’ property
border-top-colorborder-right-color

border-bottom-color

border-left-color

 <color> | transparentInitial value: the value of the ‘]color’ property

IE 6 and IE 7 do not support the transparent keyword as applied to border color; in IE the transparent keyword is rendered as black
When the border-color property is not specified, the border-color is the same color as specified for the color property.

Border Shorthand Properties

Property Value
border-topborder-right

border-bottom

border-left

 <border-width> || <border-style> || <color>
border <border-width> || <border-style> || <color>

Padding:

Property Value
padding [ <length> | <percentage> ] {1,4}
padding-toppadding-right

padding-bottom

padding-left

 <length> | <percentage>

The main differences with the padding property are as follows:

  • The padding area is the area between the inside edge of the border and the outer edge of the content.
  • The auto keyword has no effect with the padding property.
  • The padding property cannot accept a negative value (the margin property can).
  • There is no collapsing padding; only margins can collapse


Dimension:

Property Value
Width <length> | <percentage> | autoinitial value: auto
height <length> | <percentage> | autoinitial value: auto

Auto Values for width and height:

Block element:
By default, width and height properties have an auto value. So, when you do not specify a width or height, the value is the auto keyword. The meaning of the auto keyword changes depending on the type of element that it is applied to. When used on a <div> element, the element spans all the horizontal space available to it and expands vertically to accommodate any content inside of it, including text, images, or other boxes. Elements with this behavior are called block elements. Some examples of block elements are <div>, <p>, <h1> through <h6>, <form> and <ul> elements.
Table:
The <table> element is an example of an element where the auto value has different meaning than as say applied to a block element. Similar to height on block elements, <table> elements, by default, expand and contract only enough to accommodate the content they contain, but unlike block elements, this sizing is applied both horizontally and vertically.
Image:
The <img/> element is another example of an element where the auto keyword has another meaning. When the auto keyword is used on images, the auto value allows the image to be displayed as is. If the image is 500 pixels by 600 pixels, the auto value displays the image as 500 by 600 pixels. In that light, the graphics program that generated the image determines the image’s dimensions. When you use height: auto; on an image, and you explicitly specify the image’s width, the image’s height scales in aspect ratio to the image’s width.

Percentage Values for width and height:
When a percentage measurement is used, the size that the percentage is based on is the parent element of the element the percentage width is applied to

Quirks Mode width and height in Internet Explorer:


What to do when you are bound to use IE to be in quirks rendering mode?

1) The box-sizing Property:

Property Value
box-sizing content-box | border-boxinitial value: content-box

In Firefox and other Gecko-based browsers, you must add the -moz- prefix. So it would be -moz-box-sizing instead of box-sizing. -moz-box-sizing also supports one additional keyword, padding-box.The declaration box-sizing: border-box; is provided for Safari and Opera, and the declaration -moz-box-sizing: border-box; is provided for all Gecko-based browsers, Firefox, Netscape, Mozilla SeaMonkey, and so on; thus those browsers use Microsoft’s box model instead of the standard W3C box model.

2) Conditional Comments:
<!– [ if lt IE 7 ] –>
<p>
This text is shown only by IE6, IE5.5, and IE5.0 but not in IE7.0. Other browsers ignores it.
</p>
<!– [ endif ] –>
<!– [ if IE 6 ] –>
<p>
This text is shown only by IE6.0
</p>
<!– [ endif ] –>
<!– [ if gt IE 6 ] –>
<p>
This text is shown only by IE7.0
</p>
<!– [ endif ] –>


Minimum and Maximum Dimensions

Property Value
min-width <length> | <percentage>initial value: 0
max-width <length> | <percentage> | noneinitial value: none
min-height <length> | <percentage>initial value: 0
max-height <length> | <percentage> | noneinitial value: none

Note: IE6 doesn’t support min-width and max-width

Hacking Both Minimum and Maximum Widths in IE 6
body {
width: expression( documentElement.clientWidth >= 800? 800 : (documentElement.clientWidth <= 500? 500 : ‘auto’) );
}

IE 6 supports the min-height property only when used on <td>, <th>, and <tr> elements
IE 6 does not support the max-height property
The line-height property

line-height normal | <number> | <length> | <percentage>initial value: normal

Overflow property

Property Value
overflow visible | hidden | scroll | autoinitial value: visible
overflow-x visible | hidden | scroll | autoinitial value: visible
overflow-y visible | hidden | scroll | autoinitial value: visible

Note: The overflow-x and overflow-y properties were originally proprietary to IE, but are now included in a W3C CSS 3 working draft. IE 6, IE 7, and Mozilla Firefox now support the overflow-x and overflow-y properties. Support for these properties is in the next version of Safari, and Opera support is planned.
IE 6 and IE 7 only support the overflow-x and overflow-y properties when in standards compliant mode.

CSS Buoyancy-Floating and Vertical Alignment

The float Property

Property Value
float left | right | noneInitial value: none

Because floated elements are repositioned to allow other content to flow around them, they exhibit unique behavior. This behavior is outlined here:

  • The margins of floated elements do not collapse, no matter what they are next to.
  • Only the contents of elements following a floated element are affected by the floated element. That is, the backgrounds, margins, borders, padding, and width (the box model and dimensions) of elements following a floated element are not affected.
  • A floated element is always treated like a block element. Its sizing becomes shrink-to-fit horizontally and vertically.

Float Bugs in IE 6:
Peek-a-boo bug: As the name implies, this bug involves the use of floats where certain content on a page disappears and occasionally reappears.

Three properties present in the style sheet trigger this bug:

  • Floating an element by applying a float: left; declaration (float: right; also triggers the bug).
  • Including a background on the containing element. In this example, this is the background: rgb(234, 234, 234); declaration.
  • Including a clear on an element following the float, where the margins of the clearing element come into contact with the floating element.

So, with an overview of what causes the peek-a-boo bug and what it is, what do you do to work around the bug? You have more than one option:

  • Apply a position: relative; declaration to the containing element and floating element.
  • Prevent the margins of the clearing element from coming into contact with the floating element.
  • Avoid applying a background to the containing element.
  • Apply the declaration zoom: 1; to the containing element.
  • Apply the declaration display: inline-block; to the containing element.
  • Apply a fixed width to the containing element.

The Guillotine Bug:The guillotine bug is another aptly named bug where only part of the content disappears.

The guillotine bug occurs when the following conditions are present:

  • IE is in standards-compliant rendering mode.
  • An element is floated inside of a container element.
  • Links exist inside the container element in non-floated content that appears after the float.
  • A :hover pseudo-class is applied to <a> elements that change certain properties.

To fix the guillotine bug, a clearing element must appear after the containing element.
div#clearing { clear: both; visibility: hidden; }

The Three-Pixel Jog: This bug causes 3 pixels of space to appear between text inside an element that follows a floated element and the inner border of that element.
The three-pixel jog can be corrected by applying either a width or height (other than auto) to the element that follows the float. Because an explicit width or height is not always desirable, a few methods target IE 6 and less specifically.
<!–[if lt IE 7]> <style type=’text/css’> p { height: 1px; } </style> <![endif]–>

The Double-Margin Bug:
Three ingredients are required to reproduce this bug:

  • A containing element
  • A floated element inside the containing element
  • A left margin specified on the floated element

The fix for this bug is very simple. All you need to do is apply a display: inline; declaration to the floated element.

The vertical-align Property:

Property Value
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>Initial value: baseline

The vertical-align property applies exclusively to inline elements, such as <img/> and <span>. It has different meaning when applied to table cells. When applied to table cells, only the baseline, top, middle, and bottom keywords are applicable, and the vertical-align property is used to align the entire contents of the cell.

list Property

Property
 Description
 Value
 Initial value
list-style-type change the presentation of bulleted and numbered lists. disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none disc
list-style-image change the marker used for list items. The list-style-image property is most suited for custom bulleted lists <uri> | none none
list-style-position control the placement of list item markers and whether the list item marker appears on the inside of the list item element or outside of it inside | outside outside
list-style list-style shorthand property allows multiple properties to be combined into one property <’list-style-type’> || <’list-style-position’> || <’list-style-image’> na

Backgrounds property

Property Description Value Initial value
background-color used to specify a solid background color <color> | transparent transparent
background-image enables you to provide an image for the background <uri> | none none
background-repeat controls how an image is tiled, or if it is tiled at all repeat | repeat-x | repeat-y | no-repeat repeat
background-position controls the placement of the background. [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] 0% 0%
background-attachment control whether a background image scrolls with the content of a web page (when scroll bars are activated because that content is larger than the browser window) scroll | fixed scroll
background background shorthan <’background-color’> || <’background-image’> || <’background-repeat’> || <’background-attachment’> || <’background-position’>

Position Property:

Property Value
position static | relative | absolute | fixedInitial value: static
top <length> | <percentage> | autoInitial value: auto
right <length> | <percentage> | autoInitial value: auto
bottom <length> | <percentage> | autoInitial value: auto
left <length> | <percentage> | autoInitial value: auto

Static: This is the default position of an element.

Absolute:
1) Element is positioned relative to the browser’s viewport, that is, the initial visible area of the document if no point of reference is given.
2) You can modify what element is used as the point of reference for absolutely positioned elements. The rules are pretty simple: If an absolutely positioned element is contained within another element that has a position other than static, then that element is used as the point of reference for positioned elements. One common way to change the point of reference for positioned elements is to give the containing ele-ment a “relative” position.

Relative:Relative positioning is very similar to static positioning; elements to which relative positioning is applied do not leave the document flow. There are three differences between relative positioning and static positioning:

  1. Elements with a relative position can be used as a point of reference for elements nested within them that are absolutely positioned.
  2. The position of a relatively positioned element can be adjusted using the offset properties.
  3. A relatively positioned element can have a position on the (invisible) z-axis.

Fixed:
1) Fixed positioning is used to make an element remain in the same fixed position, even if the document is being scrolled.
2) Elements with a fixed position are always positioned relative to the viewport, regardless of whether it is contained in an element with relative or absolute positioning applied.

Note: IE^ doesn’t support fixed position property.

IE HACK for Fixed property:

There are a few things to keep in mind about this hac:

  • You must specify a “fixed” background image. The image doesn’t have to exist; you can just include http:// as the background image, as I have. If you are using this effect in an SSL encrypted web page, be sure to make that https://, or you’ll see SSL errors in IE. Without this essential hack, the element that you want to give a fixed position to will flicker as the page scrolls.
  • This effect does not work in IE 6 or IE 7 in quirks mode, or IE 5.5. To get a compatible hack for IE 6 and IE 7 in quirks mode and IE 5.5, just change the declaration for the top property to: 
    top: expression(eval(document.body.scrollTop));
  • This effect does not work if JavaScript is disabled.
  • The effect emulates top: 0;. To get a pixel value other than zero, use something like the follow-ing declaration: 
    top: expression(eval(documentElement.scrollTop) + 5);

    Just replace 5 with the pixel value you want.

  • You specify the left or right properties as you normally would.

Example:
::::::: style.css ::::::
body { font: 12px sans-serif; background: lightyellow; }
p { padding: 5px; margin-left: 110px; }
p#long { height: 400px; }
div { position: fixed; background: gold; border: 1px solid black; width: 100px; height: 100px; }
div#fixed-top { top: 5px; left: 5px; }
div#fixed-bottom { bottom: 5px; left: 5px; }
:::::: ie.css::::::::::
body { background: lightyellow url(‘http://’) fixed; }
div#fixed-top { position: absolute; top: expression(eval(documentElement.scrollTop) + 5); }
div#fixed-bottom { position: absolute; bottom: auto; top: expression((documentElement.scrollTop + documentElement.clientHeight – this.clientHeight) – 7); }

Note:
When no position is defined for any of an element’s ancestral lineage (parent, grandparent, and so on), all elements are positioned relative to the browser’s viewport by default. If an element does have a relative, absolute, or fixed position and is the ancestor of an element with absolute positioning, that element is used as the point of reference for the absolutely positioned element.

z-index Property:

Property Value
z-index auto | <integer>Initial value: auto

1) The z-index property is used to control layering of positioned elements along an invisible z-axis, which you might imagine as an invisible line coming out of the computer screen.
2) You can have any z-index value you like, 1,000, even 10,000, if you deem it appropriate. The browser will sort the highest z-index value as being on top, and the lowest on the bottom where elements are layered one on top of another.
3) Nested elements behave like z-index is set to auto, and the integer value is ignored.

The IE 6/IE 7 z-index Bug:
1) The first bug has to do with z-index stacking,
2) spacing between <li> elements.

Fix:
1) To correct the z-index bug you have to manually z-index all of the elements involved. That is to say, beginning with the first <li> element, assign each a z-index in decreasing order. So the first <li> element would be four, the second <li> element would be three, and so on to the last <li> element.
2) For the <li> spacing bug, there is only one known fix: to make the <li> element an inline element with the declaration display: inline;. Since this would have adverse effects for other browsers, you need to apply the fix to IE only (via conditional comments), and to avoid the content collapsing, you need to nest a block-level element inside each <li> element, like this: <li><div></div></li>. The nested <div> element prevents the content from collapsing, as would be the case if the <li> elements were inline elements.

Tables:

(X)HTML tables support many additional, optional elements.

  • The <caption> element is used to provide the table with a caption or the name of the table.
  • The <colgroup> element is used to enclose each of the table <col /> elements.
  • <col /> elements are used to control certain properties about each table column, the most common being the column width.
  • The <thead> element encloses information about column headers. If you print a table that spans more than one page, the information in the <thead> element is repeated at the top of each page.
  • The <tbody> element contains the main table data.
  • The <tfoot> element is similar to the <thead> element. When you print a table that spans more than one page, the information in the <tfoot> element is repeated at the bottom of each page.

caption-side Property:

Property Description Value Initial Value
caption-side Captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. top | bottom top

table-layout Property:

Property Value
table-layout auto | fixedInitial value: auto

border-collapse Property:

Property Value
border-collapse collapse | separateInitial value: separate

border-spacing Property:

Property Value
border-spacing <length> <length>? Initial value: 0

Note: IE 6 and IE 7 do not support the border-spacing property

Styling for Print

Media Purpose
all Suitable for all devices.
braille Intended for Braille tactical feedback devices.
embossed Intended for paged Braille printers.
handheld Intended for handheld devices.
print Intended for presentation to a printer (in a browser, use print preview to view the print style sheet).
projection Intended for projected presentations.
screen Intended for presentation on a color computer screen.
speech | aural Intended for presentation to a speech synthesizer (called aural in CSS 2 and speech in CSS 2.1).
tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv Intended for television (low resolution, low color, limited scrollability).

@media Rule:

p { font: 12px sans-serif; background: yellow; padding: 10px; }
@media screen {
p#print { display: none; } p#screen { border: 10px solid gold; }
}
@media print {
p { padding: 0.05in; } p#print { border: 10pt solid gold; } p#screen { display: none; }
}

Controlling Page Breaks:

Property Value
page-break-before auto | always | avoid | left | rightInitial value: auto
page-break-after auto | always | avoid | left | rightInitial value: auto

Note: Firefox, Safari, IE 6, and IE 7 support only the keywords always and auto. Opera supports all of the keywords.

The Cursor Property

Property Value
Cursor [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]
Initial value: auto
Non-standard extensions to cursor hand | all-scroll | col-resize | row-resize |no-drop | not-allowed | vertical-text

Note: Safari does not support custom cursors, or non-standard cursor keywords. Opera for the Mac does not support *-resize keywords, or non-standard cursor keywords. Opera for Windows supports *-resize keywords, but not non-standard keywords. Firefox for the Mac does not support the all-scroll keyword, but Firefox for Windows does. IE 6 and IE 7 support all possible options.

Custome cursor is supported by IE only.
cursor: url(‘custom_cursor.cur’), default;

———————————————————————————————————————-
This is the summary of the CSS part of following book:

Beginning CSS: Cascading Style Sheets for Web Design, Second Edition
by Richard York
Wrox Press 2007 (644 pages)

Thanks to Richard York for his effort.

For a complete list of CSS properties see:
http://www.w3schools.com/Css/css_reference.asp

—- Jhalak

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>