CSS Examples

HTML ASCII Reference

Category: CSS Examples, CSS Expert Ideas | 206 views | Add a Comment |

The ASCII character-set is used to send information between computers on the Internet.

The ASCII Character Set

ASCII stands for the “American Standard Code for Information Interchange”. It was designed in the early 60’s, as a standard character-set for computers and hardware devices like teleprinters and tapedrives.

ASCII is a 7-bit character set containing 128 characters.

It contains the numbers from 0-9, the uppercase and lowercase English letters from A to Z, and some special characters.

The character-sets used in modern computers, HTML, and Internet are all based on ASCII. Read more…

No Related Post

Top reasons sites break in IE 7

Category: CSS, CSS Examples | 433 views | Add a Comment |

Websites based on Web standards would be at the greatest risk of breaking, especially sites that use CSS files full of hacks to compensate for bugs in IE 6.

A non-scientific study of one hundred websites seems to confirm that generally, sites based on junk code display the same in IE 7 as they did in IE 6, while a number of sites that use CSS based layouts have issues. The details of the study are available in IE7: Were they ready?.

My guess is that most sites that have rendering issues fall into one of three categories:

Sites that have an XML declaration before the DOCTYPE, making IE 6 use quirks mode, but not IE 7. Both browsers still get the same CSS, so IE 7 renders it differently.
Sites that depend heavily on CSS hacks that no longer work in IE 7.
Sites that use conditional comments to feed a bugfix stylesheet to IE without specifying a version number, thereby making IE 7 load the bugfixes and mess up rendering.

I’m guessing (again) that the reason for the majority of tag soup sites passing the IE 7 test is that they almost always trigger IE’s quirks mode, which if I understand correctly has not been changed from IE 6. Read more…

CSS tricks

Category: CSS, CSS Examples | 972 views | 2 Comments |

1. Block vs. inline level elements

HTML elements are either block or inline elements. The characteristics of block elements include:

Always begin on a new line
Height, line-height and top and bottom margins can be manipulated
Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. 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 is as long as the text/image and can’t be manipulated

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong>and <em>.

To change an element’s status you can use display: inline or display: block. But what’s the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to: Read more…

CSS Inheritance

Category: CSS 2 Tutorial, CSS Examples | 926 views | 1 Comment |

CSS inheritance is automatically defined by the style property used. In other words, when you look up the style property background-color, you’ll see a section titled “Inheritance”. If you’re like most Web designers, you’ve ignored that section. But it does serve a purpose.

What is CSS Inheritance?

Each element in an HTML document is part of a tree, and every element except the initial <html> element has a parent element that encloses it. Whatever styles are applied to that parent element can be applied to the elements enclosed in it if the properties are inherited.

For example, this HTML has an H1 tag enclosing an EM tag:

<h1>This is a <em>Big</em> Headline</h1>

The EM element is a child of the H1 element, and any styles on the H1 that are inherited will be passed on to the EM text as well. For example:

h1 { font-size: 120%; }

Since the font-size property is inherited, the “Big” text will be 120% in size as well as the rest of the H1.

How to Use CSS Inheritance

The easiest way to use it is to become familiar with theCSS properties that are and are not inherited. If the property is inherited, then you know that the value will remain the same for every child element in the document. Read more…

HTML Characters Samples

Category: CSS, CSS Examples | 416 views | Add a Comment |

Greater-than and less-than signs have special meaning within HTML documents and, because of this, can’t be used on a web page unless they are specified in a particular way. These special characters are specified in HTML by “surrounding” a simple description of them with an ampersand (&) and a semi-colon (;).Please find below a list of common characters:

Character Name	Character	HTML Tag
Ampersand	&	&
Less than sign	<	<
Greater than sign	>	>
Non-breaking space
Inverted exclamation point	¡	¡
Inverted question mark	¿	¿
Cent Sign	¢	¢
British pound	£	£
Yen	¥	¥
Copyright	©	©
Registered	®	®
Degree	°	°
Plus-or-minus sign	±	±
Division sign	÷	÷
Paragraph	¶	¶
Acute accent	´	´
Cedilla accent	¸	¸
Umlaut	¨	¨
A grave uc	À	À
A acute uc	Á	Á
A circumflex uc	Â	Â
A tilde uc	Ã	Ã
A umlaut uc	Ä	Ä
A ring uc	Å	Å
AE Ligature uc	Æ	Æ
a grave lc	à	à
a acute lc	á	á
a circumflex lc	â	â
a tilde lc	ã	ã
a umlaut lc	ä	ä
a ring lc	å	å
ae ligature lc	æ	æ
C cedilla uc	Ç	Ç
c cedilla lc	ç	ç
E grave uc	È	È
E acute uc	É	É
E circumflex uc	Ê	Ê
E umlaut uc	Ë	Ë
e grave lc	è	è
e acute lc	é	é
c circumflex lc	ê	ê
e umlaut lc	ë	ë
I grave uc	Ì	Ì
I acute uc	Í	Í
I circumflex uc	Î	Î
I umlaut uc	Ï	Ï
i grave lc	ì	ì
i acute lc	í	í
i circumflex lc	î	î
i umlaut lc	ï	ï
N tilde uc	Ñ	Ñ
n tilde lc	ñ	ñ
O grave uc	Ò	Ò
O acute uc	Ó	Ó
O circumflex uc	Ô	Ô
O tilde uc	Õ	Õ
O umlaut uc	Ö	Ö
O slash uc	Ø	Ø
o grave lc	ò	ò
o acute lc	ó	ó
o circumflex lc	ô	ô
o tilde lc	õ	õ
o umlaut lc	ö	ö
o slash lc	ø	ø
U grave uc	Ù	Ù
U acute uc	Ú	Ú
U circumflex uc	Û	Û
U umlaut uc	Ü	Ü
u grave lc	ù	ù
u acute lc	ú	ú
u circumflex lc	û	û
u umlaut lc	ü	ü
Y acute uc	Ý	Ý
y acute lc	ý	ý
y umlaut lc	ÿ	ÿ

No Related Post

Write a CSS Syntax

Category: CSS, CSS 2 Tutorial, CSS Examples, CSS Tutorials, CSS3 Tutorial | 286 views | Add a Comment |

The syntax for CSS is different than that of (X)HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts.

selector { property: value }

The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

body {
background: #eeeeee;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

As you can see in the above code I have separated the color from the font-family with a semi-colon, separated the various fonts with commas and contained the “Trebuchet MS” within quotations marks. The final result sets the body color to light grey, and sets the font to ones that most users will have installed on there computer. Read more…

how to Create a fancy image gallery with JQuery

Category: CSS Examples | 461 views | Add a Comment |

Why jQuery?

jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to

understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.

Demos:

Installation

Step 1

First, you have to include the JQuery library between the <head> and </head> tags of your html page:

<script type="text/javascript" src="jquery-latest.pack.js"></script> Read more...

    

	
								
Why we use jQuery?
Adding and Removing a CSS Class with jQuery

How to Add Drop Shadows to Menus or Windows with CSS

Category: CSS, CSS 2 Tutorial, CSS Examples | 281 views | Add a Comment |

The Method

There are different ways of tackling the problem of adding shadows to menus and windows with CSS — this is just my take on it. It’s not the most straightforward task and you may be able to find more elegant solutions by experimenting yourself.

The core thinking behind my method is to add the shadow (a transparent PNG image) as a background to the menu div. We’ll need to slice up the shadow image into separate parts if we want the div to scale.

I’m going to make a fixed width menu (which scales vertically when there are more links), so I’ll split up the shadow into 3 images. If you want the div to scale both horizontally and vertically, you’ll need at least 4 (that’s where it gets much more complex, so I advise going with fixed width unless its really not possible).

Images

I’m going to cut the shadow into 3 slices. Create the image in Photoshop (or your favorite graphics design tool) which is the same width as the menu you want, then add a drop shadow layer style to it. Settings close to these will give you a nice soft shadow:

photoshop shadow settings

Flatten the image and slice it into three. You want get the whole top of the shadow, spanning the whole width and a little into the menu — this is so you get the whole of the shadow edge, as it has a large curve radius. Also get the bottom and a middle section (just 1 pixel in height would do for the middle as it will be repeated vertically). Note that I am cutting the menu surface itself as well as the shadow.

slicing the shadow Read more…

Benefits of CSS

Category: CSS, CSS Examples, CSS Tips | 491 views | Add a Comment |

Much more flexible
Styles can be written in one place (separate style sheets) and assigned to HTML elements through class or ID properties. It’s way easier and quicker to change styles across a whole site when they’re defined in one place.

Lighter weight
Using CSS (like class=”main-nav”) creates far smaller HTML files than writing style into every HTML tags (like border=”1″ cellpadding=”3″ cellspacing=”1″ backgroundcolor=”#ccc”).

CSS Universal (*) Selector

Category: CSS, CSS Examples, CSS3 Tutorial | 1,105 views | Add a Comment |

Universal (*) Selector

Matches any element type.

Syntax

HTML
* { sRules }

Scripting
N/A
Read more…

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources