HTML, XHTML and CSS

Cascading Definition:
The cascade in CSS or cascading style sheets is the ability to have multiple styles from different sources merge together into one definitive style.



The benefits of CSS
Separation of content and presentation
Smaller webpage file sizes
Improved webpage download speed
Improved rendering speed
Streamlined maintenance
Changing presentation for different devices
Accessibility
Table-less layout
Customisation
Search engine optimisation


CSS Grouping
When several selectors share the same declarations, they may be grouped into a comma-separated list.

Example(s):

In this example, we condense three rules with identical declarations into one. Thus,

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

is equivalent to:

h1, h2, h3 { font-family: sans-serif }



Reverse a string in CSS?

<p style="direction: rtl; unicode-bidi: bidi-override;">
0C 88 65 36 5C 65 14 8D B5 3E 47 D9 20 11 9F 90
$lt;/p$gt;

**********************************
ROUNDED / CURVED CORNER USING CSS
**********************************
<style type="text/css">
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh {
font-size:1px;
overflow:hidden;
display:block;
}
.b1h {
height:1px;
background:#aaa;
margin:0 5px;
}
.b2h, .b2bh {
height:1px;
background:#aaa;
border-right:2px solid #aaa;
border-left:2px solid #aaa;
margin:0 3px;
}
.b3h, .b3bh {
height:1px;
background:#aaa;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
margin:0 2px;
}
.b4h, .b4bh {
height:2px;
background:#aaa;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
margin:0 1px;
}
.b2bh, .b3bh, .b4bh {
background: #DED397;
}
.headh {
background: #aaa;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
}
.headh h3 {
margin: 0px 10px 0px 10px;
padding-bottom: 3px;
}
.contenth {
background: #DED397;
border-right:1px solid #aaa;
border-left:1px solid #aaa;
}
.contenth div {
margin-left: 12px;
padding-top: 5px;
}
</style>
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Proxy Management Tools</h3>
</div>
<div class="contenth">
<div>GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE CONTENTS GOES HERE</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>
*************************************************************************************
1. Difference between Block level element and Inline Element.
Block Level:
a. Starting and ending with new line
b. It contains inline element as well.
Eg: Div, P tag

Inline Element:
a. Displaying content in the same line.
Eg: Span, <br> <strong>

2. What is CSS Grouping

-- By grouping CSS selectors that share the same declaration and declarations that share the same selector you can apply multiple declarations to multiple selectors to optimize your style sheets.
Eg:
body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}
dive#main, div#sidebar {
border:1px solid red;
}

3. What is Specificity
If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

4. How do u import external css into other css file? Is it possible?
Yes:
@import url('/css/typography.css');

5. CSS Hacking

6. Difference between positions

The position property is used to define whether an element is absolute, relative, static or fixed.

The value static is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.

relative is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.

absolute pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute element can be placed anywhere on the page using top, right, bottom and left.

fixed behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, so, theoretically, fixed elements should stay exactly where they are on the screen even when the page is scrolled. Why theoretically? Why else - this works great in browsers such as Mozilla and Opera, but in IE it doesn't work at all.

7. Difference between id, name and class? tell about them priority levels?

8. CSS short hand
Shorthand properties allow you to specify a set of related CSS properties with a single property. They combine related properties into a shorthand form. In most cases, the browser sets a default value if you leave out an optional one. There are six shorthand properties in CSS:

* font
* background
* margin
* border
* padding
* list

The most commonly used properties are the font family of properties. With the font shorthand property you can turn this complete declaration:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: .9em;
line-height: 1.1em;
font-family: arial, helvetica, sans-serif;
}

Into this:

p {font: italic small-caps bold .9em/1.1 arial,helvetica,sans-serif;}

In most cases you'd specify just the size and face, like this:

p{font:.9em arial,helvetica,sans-serif;}


9. CSS Optimization

Use CSS to strip presentation out of your (X)HTML. To optimize your CSS group external files to minimize HTTP requests, remove whitespace, and use shorthand properties. Group common declarations, selectors, and CSS code in multiple classes to save space. Use the simplest selectors you can, high in the document tree and let them cascade. Be as vague and as abstract as possible in your CSS selectors.

* Embed or SSI abbreviated styles for maximum speed.
* Minimize HTTP requests by grouping external CSS files.
* Link to external style sheets site-wide to cache in.
* Layer style sheets for speed. Use cascading to combine linked, alternate, and imported style sheets to layer your presentation for older browsers and alternate media (print), and to save bandwidth.
* Group selectors with the same declarations and declarations with the same selectors.
* Use simple selectors high in the document tree to set global and element-wide styles (that is, type styles like body, h1, p, and dt).
* Use descendant selectors to get specific without class or id selectors.
* Take advantage of your inheritance - don't overspecify CSS; let it flow down the document tree.
* Use multiple classes to group common style declarations to save space.
* Use value replication on the border, padding, and margin properties.
* Use shorthand hex colors (such as #00f).
* Use shorthand properties to optimize your CSS (including font, background, margin, and border).
* Use short class and id names.
* Use shorthand hexadecimal colors or names, whichever is shorter.
* Use relative lengths for maximum flexibility.
* Remove whitespace.
* Cut the comments.

10. XSS - Cross side scripting


What is Cross Site Scripting? - XSS - The Underestimated Exploit

Cross Site Scripting (or XSS) is one of the most common application-layer web attacks. XSS commonly targets scripts embedded in a page which are executed on the client-side (in the user’s web browser) rather than on the server-side. XSS in itself is a threat which is brought about by the internet security weaknesses of client-side scripting languages, with HTML and JavaScript (others being VBScript, ActiveX, HTML, or Flash) as the prime culprits for this exploit. The concept of XSS is to manipulate client-side scripts of a web application to execute in the manner desired by the malicious user. Such a manipulation can embed a script in a page which can be executed every time the page is loaded, or whenever an associated event is performed.

A basic example of XSS is when a malicious user injects a script in a legitimate shopping site URL which in turn redirects a user to a fake but identical page. The malicious page would run a script to capture the cookie of the user browsing the shopping site, and that cookie gets sent to the malicious user who can now hijack the legitimate user’s session. Although no real hack has been performed against the shopping site, XSS has still exploited a scripting weakness in the page to snare a user and take command of his session. A trick which often is used to make malicious URLs less obvious is to have the XSS part of the URL encoded in HEX (or other encoding methods). This will look harmless to the user who recognizes the URL he is familiar with, and simply disregards and following ‘tricked’ code which would be encoded and therefore inconspicuous.


Types of selectors

There's a whole bunch of selectors but for our purposes, we can break it down into three types, of increasing importance:

1. Element selectors (and pseudo-element selectors) Eg. p {color:red;}
2. Class selectors (and attribute selectors) Eg. .myclass {color:red;}
3. ID selectors. Eg. #myid {color:red;}

When it comes to specificity, it just takes one class selector to override any style declared with just element selectors, and it takes just one ID selector to override any style declared with class and/or element selectors. Let's check out an absurd example:


<style type="text/css">
#contact b {color:blue;}
div.help b {color:green;}
body div p b { color:red; }
</style>
<body id="contact"><div class="help"><p><b>my example</b></p></div></body>


HTMl & CSS Important Reference:
http://www.htmldog.com/guides/cssbeginner/


** CSS SPECIFICITY IMPORTANT RULES **

CSS Specificity: An Overview

Click here to reference site:

1. Specificity determines, which CSS rule is applied by the browsers.
2. Specificity is usually the reason why your CSS-rules don’t apply to some elements, although you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with higher specificity wins.
5. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.
6. You can understand specificity if you love Star Wars: CSS Specificity Wars.
7. You can understand specificity if you love poker: CSS Specificity for Poker Players
8. When selectors have an equal specificity value, the latest rule is the one that counts.
9. When selectors have an unequal specificity value, the more specific rule is the one that counts.
10. Rules with more specific selectors have a greater specificity.
11. The last rule defined overrides any previous, conflicting rules.
12. The embedded style sheet has a greater specificity than other rules.
13. ID selectors have a higher specificity than attribute selectors.
14. You should always try to use IDs to increase the specificity.
15. A class selector beats any number of element selectors.
16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.
17. You can calculate CSS specificity with CSS Specificity Calculator.


** pseudo-class **

A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.
A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.
Eg:
:link, :active, :visited