Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:
Examples of block elements include
,
Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like! For example:
class=”text side”
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:
margin-top: 3.5em !important; margin-top: 2em
So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.
(Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)
When writing a border rule you’ll usually specify the colour, width and style (in any order). For example, border: 3px solid #000 will give you a black solid border, 3px thick. However the only required value here is the border style.
If you were to write just border: solid then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!
The universal selector, written “*”, matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the “*” may be omitted. For example:
* *[LANG=fr] and [LANG=fr] are equivalent.
* *.warning and .warning are equivalent.
* *#myid and #myid are equivalent.
| Points | Pixels | Ems | Percent | Keyword | Default sans-serif |
|---|---|---|---|---|---|
| 6pt | 8px | 0.5em | 50% | CSS Tricks | |
| 7pt | 9px | 0.55em | 55% | CSS Tricks | |
| 7.5pt | 10px | 0.625em | 62.5% | x-small | CSS Tricks |
| 8pt | 11px | 0.7em | 70% | CSS Tricks | |
| 9pt | 12px | 0.75em | 75% | CSS Tricks | |
| 10pt | 13px | 0.8em | 80% | small | CSS Tricks |
| 10.5pt | 14px | 0.875em | 87.5% | CSS Tricks | |
| 11pt | 15px | 0.95em | 95% | CSS Tricks | |
| 12pt | 16px | 1em | 100% | medium | CSS Tricks |
| 13pt | 17px | 1.05em | 105% | CSS Tricks | |
| 13.5pt | 18px | 1.125em | 112.5% | large | CSS Tricks |
| 14pt | 19px | 1.2em | 120% | CSS Tricks | |
| 14.5pt | 20px | 1.25em | 125% | CSS Tricks | |
| 15pt | 21px | 1.3em | 130% | CSS Tricks | |
| 16pt | 22px | 1.4em | 140% | CSS Tricks | |
| 17pt | 23px | 1.45em | 145% | CSS Tricks | |
| 18pt | 24px | 1.5em | 150% | x-large | CSS Tricks |
| 20pt | 26px | 1.6em | 160% | CSS Tricks | |
| 22pt | 29px | 1.8em | 180% | CSS Tricks | |
| 24pt | 32px | 2em | 200% | xx-large | CSS Tricks |
| 26pt | 35px | 2.2em | 220% | CSS Tricks | |
| 27pt | 36px | 2.25em | 225% | CSS Tricks | |
| 28pt | 37px | 2.3em | 230% | CSS Tricks | |
| 29pt | 38px | 2.35em | 235% | CSS Tricks | |
| 30pt | 40px | 2.45em | 245% | CSS Tricks | |
| 32pt | 42px | 2.55em | 255% | CSS Tricks | |
| 34pt | 45px | 2.75em | 275% | CSS Tricks | |
| 36pt | 48px | 3em | 300% | CSS Tricks |
There is a good online PX to EM conversion calculator available. You can also use this calculator.
Dialog Box – Keyboard Shortcuts
Microsoft Natural Keyboard Shortcuts
Shortcut Keys for Character Map
After you double-click a character on the grid of characters, you can move through the grid by using the keyboard shortcuts:
(MMC) Main Window Keyboard Shortcuts
MMC Console Window Keyboard Shortcuts
Remote Desktop Connection Navigation
Microsoft Internet Explorer Keyboard Shortcuts
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 }
CSS offers other “shorthand” mechanisms as well, including multiple declarations and shorthand properties.
Here is a sample div with class “boxtest”.
It has 20px border, 30px padding, and 300px width.
div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}
The total width including borders and padding should be 400px.
20+30+300+30+20 = 400
User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px.
300-20-30-30-20 = 200
The red and blue bars below are there for comparison. This div (including its borders) should be as wide as the blue bar.
താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.
രാജേഷ് ഒടയഞ്ചാൽ
