You can get a complete Specification of CS 2 from here. Just Click on the following Link.
Cascading Style Sheets, level 2
help
The benefits of Web Standards to your visitors, your clients and you!
- The Web Standards
- What are Web Standards about?
- A mindset change
- Semantically correct markup
- What is valid code?
- What is accessible code?
- Why use CSS to separate content from presentation?
- A CSS based site in action
- How do your VISITORS benefit from Web Standards?
- How do your CLIENTS benefit from Web Standards?
- How do YOU benefit from Web Standards?
- What are the downsides
- How do you achieve Web Standards?
- Conclusion
- Web Standards resources
CSS font shorthand rule
When styling fonts with CSS you may be doing this:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
There’s no need though as you can use this CSS shorthand property:
font: 1em/1.5em bold italic small-caps verdana,serif
Much better! Just a couple of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.
Why tables for layout is stupid:
Tables existed in HTML for one reason: To display tabular data. But then border=”0″ made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.
The problem with using tables:
- mixes presentational data in with your content.
- This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.
- Bandwidth ain’t free.
- This makes redesigns of existing sites and content extremely labor intensive (and expensive).
- It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
- Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
Modern browsers are much better at rendering Web standards and we don’t need to use these archaic methods any more.
Instead of nesting tables within tables and filling empty cells with spacer GIFs, we can use much simpler markup and CSS to lay out beautiful sites that are faster to load, easier to redesign, and more accessible to everyone.
By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented.
This has several advantages over using tables….
Redesigns are easier and less expensive
By removing presentational markup from your pages, redesigns of existing sites and content is much less labor intensive (and much less expensive). To change the layout of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves at all.
Using Web standards reduces the file sizes of your pages, as users no longer need to download presentational data with each page they visit. The Style sheets that control layout are cached by viewers’ browsers.
Reduced file size means faster loads and lower hosting costs.
Using Web standards also makes it extremely easy to maintain visual consistency throughout a site. Since pages use the same CSS document for their layout, they are all formatted the same.
This strengthens your brand and makes your site more usable.
Using Web standards makes our pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.
Visitors using screen readers (as well as those with slow connections) do not have to wade through countless table cells and spacers to get at the actual content of our pages.
In other words, separating content from the way it is presented makes your content device-independent.
Speaking of accessiblity, minimizing your markup and using header tags properly will also help improve your search engine ranking.
Reducing the ratio of code to content, using keywords in your header tags, and replacing header GIFs with actual text will all help your sites get better search engine results.
IE and width & height issues
IE has a rather strange way of doing things. It doesn’t understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height – go figure!
This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won’t allow the box to resize. If we only use the min-width and min-height commands though then we can’t control the width or height in IE!
This can be especially problematic when using background images. If you’re using a background image that’s 80px wide and 35px high, then you’ll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.
To resolve this problem, you can use the following code for a box with class=”box”:
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command5. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.
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
Next we create our CSS commands, so as to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? “1200px” : “auto”);
}
ANSI character set and equivalent Unicode and HTML characters
The characters that appear in the first column of the following table are generated from Unicode numeric character references, and so they should appear correctly in any Web browser that supports Unicode and that has suitable fonts available, regardless of the operating system. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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
,
,
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 precedence.
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 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!
ആത്മികയുടെ ജന്മദിനം

കഴിഞ്ഞിട്ട് 6 ദിവസങ്ങൾ ആയി!