Introduction To Cascading Style Sheets

I’m Jasmine and it’s my first post so I’m too excited and still little nervous. I wish to write tutorial in Spanish language but Jimmy told me that in our friends club HeyGB.com there are few standards for an example: how to start tutorial, introduction, ending etc.. and lots of more things and all the friends authors have to follow them otherwise it’s hard for students who wish to learn programming languages to understand them. So I’m writing very slowly, as my English is good and I’ve so many years experience in teaching programming language so I also confident too.

I’m going to start my Easy to Learn Cascading Style Sheets - Part I. CSS is a formatting language, used to provide more customized web pages and make it easier to make multiple pages use the same style. The acronym stands for Cascading Style Sheets. All current browsers can handle CSS, and it is the best Web page formatting language produced to date. Some very popular browsers do not handle it as well as they should but largely support is good and developers are tending to use it much more often.

Using CSS, you can define colors, backgrounds, borders, margins, alignment, fonts, sizes and loads of other things for almost any part of your web pages. The word cascading describes many of the features of CSS. First of all, it means that many stylesheets can be used and will be merged by the browser to provide a computed style for each element.

If styles defined for one element oppose each other, the later one will be used, unless another one more specifically refers to the element (for example, if all paragraphs are made red, but a paragraph that is in a div tag is made blue, the blue will override the red for paragraphs in a div, as it more specifically refers to the desired element).

Cascading also means that each object inherits some styles from its parent object or parent class. The parents are not the same as the parent objects in JavaScript but use a similar idea. The objects are referred to by their element tag. The highest object in the structure is the body. If any elements do not have their own CSS defined but the body does, then the cascading behavior means they will inherit from the body. So, if in the body we define the text color to be white, then any tables will also have white writing in them.

Each element can be in a class. For example, if we define the ‘p’ tag to have a text color red then every paragraph will be red. But if we then define a class of paragraph called mybold where the text is bold and we create a paragraph of class mybold, it will have bold text. But remember that style sheets cascade and elements inherit from their parent class, so the text in the paragraph of class mybold will also be red. If we define the class mybold to have blue text then the blue will override the red and the text in the paragraph of class mybold will be blue.

One of the features of CSS is that if the browser does not understand something, it will ignore it and move on to the next attribute. It will not display warnings. This can make things easier in some circumstances, since you can apply styles without having to worry that a browser might ignore the entire stylesheet, because it should only ignore the parts it does not understand (although there are a few exceptions).

However, it also means that it can be difficult to work out if a browser will correctly apply a rule or not. For example, you may want to apply display:table-cell;width:25% to an element if it understands it, and width:100% if not. Unfortunately, CSS does not provide any way to test for support of a property.

The browser with the highest level of CSS support is currently Opera. It has fairly complete support for CSS 1 and 2.1 (including 6 separate media types), as well as several parts of CSS 3. After Opera are the KHTML/WebKit engine browsers like Safari and Konqueror, with fairly complete support for CSS 1, largely complete support for CSS 2.1 (but only for screen and print media), and large parts of CSS 3.

Next is iCab 3, with a similar level of support to KHTML/WebKit, but a much slower engine. After that are Gecko engine browsers like Mozilla/Firefox, which supports CSS 1 and CSS 2 (only for screen and print media), and some parts of CSS 3.

They also have support for many CSS extensions. Last of all is Internet Explorer. When comparing the same version numbers, IE on Mac supports some parts that the Windows version does not, but both are fairly old and incomplete.

They support CSS 1, and selected parts of CSS 2, and manage to pack more bugs into their support than most of the other browsers. Internet Explorer 7 supports more of CSS 1 than IE 6, and has fixed some of the CSS 2 handling. Internet Explorer 8 has finally made a proper advance to support most of CSS 2.1, but is still nothing like as good as the other browsers.