Made in INDIA
CSS Basic
CSS IntroductionCSS Selectors
Selectors Introductioncss Articles
CSS FontCSS TextCSS PaddingCSS MarginCSS BorderStyling tables with CSSHow To Build a Basic CSS LayoutHow to create css formsTableless Web Page Design Using CSS
CSS Introduction
CSS is the acronym for Cascading Style Sheets.
CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles are normally stored in Style Sheets
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save you a lot of work
- External Style Sheets are stored in CSS files
- Multiple style definitions will cascade into one
What is style sheet
Before we begin describing how style sheets work, and how you use them, we should first answer the simple question, "what is a style sheet?"
As we saw in the last section, the W3C has made two major CSS recommendations:
- Cascading Style Sheets 1 (CSS 1)
- Cascading Style Sheets 2 (CSS 2) (which incorporates and extends CSS 1.)
But what are these recommendations in technical terms? They are language specifications, which define a simple grammar or language. The grammar specifies what types of statement can be made within a style sheet. Or, more plainly, it tells you what you can say and how you can say it.
Proprietary CSS Extensions
It's important to understand the difference here between what is in the recommendation and what is actually implemented in the various browsers. As we've talked about already, there are quite a few things that are in the specification but are not yet widely supported by browsers. There's no real harm in using features like this in your own work, as you know there is at least a commitment to their support at some time in the future. On the other hand, there are also a number of CSS-like proprietary extensions that may well "work" in a certain browser, but are not part of the CSS specification. Internet Explorer is the chief offender here. Less well known are a collection of Mozilla properties and values. These have been included in the code for the purposes of the Mozilla developers, who do not recommend you use them.
If you use Microsoft CSS extensions just be aware that they may not be supported by any browser other than Internet Explorer, and that there is no guarantee that they will be incorporated in future versions of the CSS specification. Our advice is to avoid them. For what it's worth, the following is a non-comprehensive list of Internet Explorer CSS extensions we have seen reference to. If you're in doubt about anything else you've come across, you can always do a quick check to see whether or not it is in the latest version of the CSS specification.
- scrollbar-3dlight-color
- scrollbar-arrow-color
- scrollbar-base-color
- scrollbar-darkshadow-color
- scrollbar-face-color
- scrollbar-highlight-color
- scrollbar-shadow-color
CSS v HTML
So, at this level, a style sheet is simply a text file (which has a .css suffix), written according to the grammar defined in the CSS 1 or CSS 2 recommendations.
Example
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
body {font-family: Verdana, "Minion Web", Helvetica, sans-serif;
font-size: 1em;
text-align: justify; }
h1 {font-family: Verdana, sans-serif;
font-size: 1.3em; }
code {font-family: Courier, sans-serif;
font-size: 1em; }
.note {background-color: #003333;
border-width: thin;
border-color: black;
border-style: ridge;
color: white;
font-family: Verdana, Geneva, sans-serif;
font-size: .9em;
vertical-align: text-bottom; }
Like an HTML document, a Cascading Style Sheet is just a simple text file. But unlike an HTML document, you don't need a special declaration at the top of the file to say that this is a style sheet. The name of the file should however end with a .css suffix.
In addition to being in .css files, style sheets can also be embedded into the <head> of HTML files. Later we'll take a closer look at linking and embedding style sheets, how to do it, what the difference is, and which is better.
With CSS, you will be able to:
- define the look of your pages in one place rather than repeating yourself over and over again throughout your site. (Ever get tired of defining colors and fonts each time you start a new cell in a table? Those days are over with CSS!)
- easily change the look of your pages even after they're created. Since the styles are defined in one place you can change the look of the entire site at once. (Ever get tired of replacing tags throughout your site when you want to change the look of a certain element? Those days are over with CSS!)
- define font sizes and similar attributes with the same accuracy as you have with a word processor - not being limited to just the seven different font sizes defined in HTML.
- position the content of your pages with pixel precision.
- redefine entire HTML tags. Say for example, if you wanted the bold tag to be red using a special font - this can be done easily with CSS.
- define customized styles for links - such as getting rid of the underline.
- define layers that can be positioned on top of each other (often used for menus that pop up).
Your pages will load faster, since they aren't filled with tags that define the look. The style definitions are kept in a single CSS document that is only loaded once when a visitor enters your site.
Where Do Style Sheets Come From?
More than a decade before the world wide web, pioneers in the field of electronic documentation recognized the important distinction between what a document looks like (often referred to as its appearance) and the underlying structure of the document. Complex electronic publishing systems have since then been implemented in a way which separates information about how the document should appear from the document itself. When it was first imagined by Tim Berners-Lee, the web did provide a mechanism for this. But in the heated rush of the web's early explosion other, in some ways easier, but also problematic ways of coding page appearance took off. Among these were the <font> and <b> elements and other stylistic, or presentational HTML elements.
In a nutshell, CSS provides a means for web authors to separate the appearance of web pages from the content of web pages. We'll be learning a lot more about this in this introduction, how to do it, why it's good to do it, and why it's not so good to keep using the old ways.
The W3C
Cascading Style Sheets (CSS) is a recommendation of the World Wide Web Consortium (the W3C). The W3C is a consortium of web stakeholders: universities, companies such as Microsoft, Netscape and Macromedia, and experts in many web related fields. Founded by Tim Berners-Lee, it exists to enhance and promote the world wide web. One of its roles is to publish "recommendations". You can think of these W3C recommendations as a kind of standard. There are W3C recommendations covering diverse aspects of the web, from wireless content development to HTML 4.0 and XML.
A History of CSS Specifications
The W3C has published two major CSS recommendations: CSS 1 and CSS 2. As mentioned before, CSS 2 has now been updated to CSS 2, revision 1.
CSS 1 first became a recommendation in late 1996. Support for CSS 1 is extensive (if not complete) in Netscape 7, and acceptable in Internet Explorer, versions 4.5 for Macintosh and 5 and upwards for Windows. Opera 3.5 for Windows had very good support for CSS 1, and recent versions of this excellent browser have better support still.
CSS 2 became a recommendation in May of 1998. It extended CSS 1, so CSS 1 is a subset of CSS 2 with some very minor changes. Support for CSS 2 was almost nonexistent in Netscape Navigator 4.x, and very limited in Internet Explorer 4.5, 5 and 5.5 for Windows.
While browsers like Internet Explorer 6 and (more so) Netscape 7 and Opera 7 showed promising support for a lot of the basic aspects of CSS 2, it became obvious with time that some of its more complex (and perhaps even esoteric) features were unlikely to ever be implemented. For this reason, CSS 2, revision 1 was released in January 2003, with a number of the more high level aspects of CSS 2 now removed. It's possible that some of these features may find their way back into future iterations of the specification, but don't hold your breath waiting for the text-shadow property to reappear :-).
Developers often write to us expressing concerns about what features are in which version fo the specification. We're never sure what motivates this question, but our answer is always the same: it's quite simply not important from a development point of view. There is scant association between this and the level of browser support in older browsers, none at all in more recent. If you want to work with a property you have heard of the best thing to do is check to see if it is in this guide by looking for it in the contents, and then check its level of support in the browsers you are targetting.
The CSS Mobile Profile
The only specification for which you do need to be aware of what is and isn't included is the CSS Mobile Profile. We've included some information about this in this edition of the guide, in the Advanced CSS section.
Why Doesn't Everyone Use CSS?
CSS offers web developers a powerful tool that helps simplify the complex task of maintaining web sites, and provides sophisticated layout and design features for web pages without the need for plugins, long download times and expensive tools.
Why, then, after more than 7 years (CSS was first supported by Internet Explorer 3 in late 1996) are developers only just starting to take advantage of this fabulous web standard?
There are several important answers to this question.
First, CSS only really works at all in Netscape Navigator 4.0x and 4.5 and Internet Explorer 3 (a little), 4, 4.5 and 5. In the early days, this was considered to be a real issue. Developers felt that they had to develop for all those users still using "pre-CSS" browsers, so they avoided style sheets altogether. As we all know, the percentage of web users who use the latest version of a browser is always increasing. So what was almost unused 6 months ago, is widely used today. If you have resisted using or learning style sheets because it is an experimental technology, keep in mind that depending on your site visitors, a sizable majority of web browsers in common use today support style sheets very well. It is no longer experimental.
Secondly, even though the major browsers have supported style sheets for some time, this support is admittedly less than perfect. Many web developers believe that support is hopelessly inadequate, but this isn't true at all. In part, this is an excuse being used to avoid addressing a new technology. It was a valid reason a couple of years ago. Now, it's just an excuse.
What is true is that the process of trial and error which accompanies trying to make a style sheet work in all major browsers can be time consuming, and extremely frustrating. Again, though, as browsers like Internet Explorer 5 and 6 and Netscape Navigator 7 become more and more widely used, this becomes less and less of an issue.
One of the major reasons why we developed our CSS Editor Style Master was to help web developers address browser compatibility confusion. We also developed the Browser Compatibility Guide, to help those new to style sheets avoid many of the frustrating pitfalls of developing for inconsistent browser support. The information from this browser support guide is now incorporated into the paid version of this guide.
Thirdly, and very importantly, style sheets can be a little tricky to understand at first. Cascading style sheets work quite differently from the style sheets you might be familiar with, like those in word processors and page layout applications such as Quark Express and PageMaker. To address this third major hurdle, we have developed this Guide, a tutorial, self paced courses, and many other resources, all of which you can find at the House of Style.
How it works:
- How do Style Sheets Work?
- A style is a definition of fonts, colors, etc.
- Each style has a unique name: a selector.
- The selectors and their styles are defined in one place.
In your HTML contents you simply refer to the selectors whenever you want to activate a certain style.
For example:
Instead of defining fonts and colors each time you start a new table cell, you can define a style and then, simply refer to that style in your table cells.
Classic HTML
2
3
4
5
6
7
8
9
10
11
12
<table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red">
<b>this is line 1</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red">
<b>this is line 2</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red">
<b>this is line 3</b></font></td></tr>
</table>
With CSS (assuming that a selector called subtext is defined)
2
3
4
5
<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table>
CSS3: What’s New for CSS?
|
good
|
it's good.but i want with output.
|
Great stuff. I would like a way to be able to test my knowledge while I'm learning.
|
It is good
|
it's good,if there is some option for us to test our means it will still more better
|
nice yar
|
Hi Gautam
|
ya, very nice .For W3school is good teacher
|