CSS 2 Tutorial

How to Div Horizontal And Vertical Centering

Category: CSS, CSS Tips, CSS3 Tutorial | 2,822 views | Add a Comment |

I know many people have wondered how to center their content both horizontally and vertically but never managed to find a solution on how to do this using CSS. I have seen people use tables to accomplish this, in this tutorial I will show you how it can be done.

We start off by using an IE (Internet Explorer) hack to make the height of the page 100%.

html, body {
height: 100%;
}

The next part of the code is to give our element an ID. You may find it easier to put whatever content you want centring inside a div tag, I find this works a lot easier, in the end it’s up to you.

CSS Code

#centeredcontent {
}
</style>

We have our ID assigned, now lets move to our HTML and add the code there in the <body> of your page. Read more…

How to Add Drop Shadows to Menus or Windows with CSS

Category: CSS, CSS 2 Tutorial, CSS Examples | 283 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…

How CSS3 works

Category: CSS 2 Tutorial, CSS Expert Ideas, CSS Tips | 731 views | Add a Comment |

CSS is a new smarter way to apply style properties to HTML elements.
You can set all kinds of style properties, like border, font, background, spacing etc. (We’ll go into these in detail later.)

There are 3 main ways CSS styles can be applied:

Inline with HTML
On-page style definitions
Separate style sheets

1) CSS Inline with HTML (use with caution)

Benefits of CSS

Category: CSS, CSS Examples, CSS Tips | 497 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 INCLUDE-SOURCE

Category: CSS, CSS Expert Ideas | 755 views | 1 Comment |

This property inserts another document into the current document, replacing the current element’s content. Any elements or CSS properties applied to or inherited by the current element are applied to the inserted content as well.

Example

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; height: 200px;
border: thin solid black;
include-source: url(http://www.example.com/testpage.htm);
}

Possible Values

Value Description

[URL]

An absolute or relative URL pointing to a document. If rendering of the document is not possible by the browser, it should be ignored and the regular element content be displayed instead.

CSS QUOTES

Category: CSS 2 Tutorial, CSS Tutorials | 513 views | Add a Comment |

This property determines the type of quotation marks that will be used in a document. One or more quotation mark pairs are given, with the basic quotation characters being the left-most pair. Each subsequent pair represents the quotation characters used at progressively deeper element nesting contexts.
Values of the ‘content’ property are used to specify where the open/close quotation marks should or should not occur - the “open-quote”, “close-quote”, “no-open-quote”, and “no-close-quote” values. “Open-quote” refers to the left (first) of a given pair of specified quotes, while “close-quote” refers to the second (right) quote character in the pair. Quotes can be skipped at a particular location by using the “no-close-quote” and “no-open-quote” value. In the event that the quote character nesting depth is not covered in the ‘quotes’ property specification, the last valid quotation pair set should be used.

Example

blockquote[lang-=fr] { quotes: “\201C” “\201D” }blockquote[lang-=en] { quotes: “\00AB” “\00BB” }

blockquote:before { content: open-quote }

blockquote:after { content: close-quote }

Possible Values

Value Description

inherit	Explicitly sets the value of this property to that of the parent.
none	The ‘open-quote’ and ‘close-quote’ values of the ‘content’ property produce no quotations marks.
([string] [string])	Values for the ‘open-quote’ and ‘close-quote’ values of the ‘content’ property are taken from this list of quote mark pairs. The first or possibly only) pair on the left represents the outermost level of quotation embedding, the pair to the right (if any) is the first level of quote embedding, etc.

Imports an external style sheet

Category: CSS, CSS 2 Tutorial, CSS3 Tutorial | 637 views | Add a Comment |

Imports an external style sheet.

Syntax

HTML
@import [url] ( sUrl ) ;

Scripting
N/A

Possible Values

sUrl
String that specifies the URL that references a cascading style sheet.

Remarks

The rule has no default value.

Expressions can be used in place of the preceding value(s), as of Microsoft Internet Explorer 5. For more information, see About Dynamic Properties.

The semicolon in the syntax is required; if omitted, the style sheet is not imported properly and an error message is generated. “url()” is optional because there is always a URL following “@import.”

The @import rule, like the link element, links an external style sheet to a document. This helps the Web author establish a consistent “look” across multiple HTML pages. Whereas the link element specifies the name of the style sheet to import using its href attribute, the @import rule specifies the style sheet definition inside a link element or a style element. In the scripting model, this means the owningElement property of the style sheet defined through the @import rule is either a style or a link object.

The @import rule should occur at the start of a style sheet, before any declarations. Although Internet Explorer 4.0 and later allows @import rule statements to appear anywhere within the style sheet definition, the rules contained within the @import rule style sheet are applied to the document before any other rules defined for the containing style sheet. This rule order affects expected rendering.

Rules in the style sheet override rules in the imported style sheet.
Read more…

CSS2 vs CSS1 - What’s the Difference

Category: CSS, CSS 2 Tutorial | 1,043 views | 1 Comment |

CSS1	CSS2
CSS1 was supporting continuous media which means Web pages that contain media contents and continuously run till the end. But it had no support for paged media which consist of slide shows, papers or transparencies.	You will also come across varieties of cursors and dynamic outlining in CSS2.
CSS1 contains some of the positioning properties	CSS2 is full of really interesting features related to accessibility.
Font properties such as typeface and emphasis	CSS2 has support for aural style sheets. It contains various aural properties to build an aural style sheet for your web page. So, blind customers can be largely benefited by this feature.
Color of text, backgrounds, and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes	They only need a screen reader which is CSS2 enabled. Users can listen to your Web pages even on the move.
Text attributes such as spacing between words, letters, and lines of text	CSS2 makes them more interesting and flexible. There are two types of CSS positioning, one is absolute positioning and the other is relative positioning. But in CSS2, you will come across another type of positioning that is fixed positioning. This creates a watermark effect in continuous media. In paged media, an object with fixed position keeps repeating on every page.
Alignment of text, images, tables and other elements	virtually play with CSS2 cursors

Difference between CSS1 and CSS2

Category: CSS 2 Tutorial | 1,327 views | Add a Comment |

	CSS2 builds on CSS1 standard. If you click on the link, it shows the result of applying the CSS 2 stylesheet on the relevant XML source displayed in the previous columns of the row.
	CSS2 offers many possibilities how to match an element. If only the element name is given, it matches everywhere (1). The character [*] matches any element (2). Read more… How to Div Horizontal And Vertical Centering How to Add Drop Shadows to Menus or Windows with CSS How CSS3 works Benefits of CSS CSS INCLUDE-SOURCE CSS QUOTES Imports an external style sheet CSS2 vs CSS1 - What’s the Difference home \| about \| submit a site \| tags \| site map \| contact us \| rss © CSS Examples 2008, All rights Reserved.

CSS2 builds on CSS1 standard. If you click on the link, it shows the result of applying the CSS 2 stylesheet on the relevant XML source displayed in the previous columns of the row.

CSS2 offers many possibilities how to match an element. If only the element name is given, it matches everywhere (1). The character [*] matches any element (2).

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources

How to Div Horizontal And Vertical Centering

How to Add Drop Shadows to Menus or Windows with CSS

The Method

Images

How CSS3 works

Benefits of CSS

CSS INCLUDE-SOURCE

CSS QUOTES

Imports an external style sheet

CSS2 vs CSS1 - What’s the Difference

Difference between CSS1 and CSS2