Browsed by
Category: css tags

Minimum width for a page

Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page. Unfortunately, IE doesn’t understand this command, so we’ll need to come up with a new way of making this work in this browser. First, we’ll insert a under the tag, as we can’t assign a minimum width to the : Next we create our CSS commands,…

Read More Read More

CSS Block and inline level elements

CSS Block and inline level elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include: begin on a new line Height, line-height and top and bottom margins can be manipulated defaults to 100% of their containing element, unless a width is specified Examples of block elements include , , , , and . Inline elements on the other hand have the opposite characteristics: Begin on the same line Height, line-height and top and bottom margins can’t be changed Width…

Read More Read More

Two classes together

Two classes together

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…

Read More Read More

CSS border default value

CSS border default value

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…

Read More Read More

!important ignored by IE

!important ignored by IE

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…

Read More Read More

Universal selector

Universal selector

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.

Font Size Conversion Chart

Font Size Conversion Chart

Font Size Conversion Chart 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…

Read More Read More

Windows Short Cuts

Windows Short Cuts

Key Board Short Cuts CTRL+C (Copy) CTRL+X (Cut) … CTRL+V (Paste) CTRL+Z (Undo) DELETE (Delete) SHIFT+DELETE (Delete the selected item permanently without placing the item in the Recycle Bin) CTRL while dragging an item (Copy the selected item) CTRL+SHIFT while dragging an item (Create a shortcut to the selected item) F2 key (Rename the selected item) CTRL+RIGHT ARROW (Move the insertion point to the beginning of the next word) CTRL+LEFT ARROW (Move the insertion point to the beginning of the…

Read More Read More

Grouping

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 } CSS offers other “shorthand” mechanisms as well, including multiple declarations and shorthand properties.

Boxtest

Boxtest

Boxtest 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…

Read More Read More