Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
CSS Tutorial

CSS Tutorial

Ratings: (0)|Views: 171|Likes:
Published by dev_ocean

More info:

Published by: dev_ocean on Sep 27, 2009
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less





CSS is a formatting language, used to provide more customised web pages andmake it easier to make multiple pages use the same style. The acronym stands forCascading Style Sheets. All current browsers can handle CSS, and it is the best Webpage formatting language produced to date. Some very popular browsers do nothandle it as well as they should (see the section on browser problems) but largelysupport is good and developers are tending to use it much more often.Using CSS, you can define colours, 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. Firstly, it means thatmany stylesheets can be used and will be merged by the browser to provide acomputed style for each element. If styles defined for one element oppose eachother, the later one will be used, unless another one more specifically refers to theelement (for example, if all paragraphs are made red, but a paragraph that is in a<div> is made blue, the blue will override the red for paragraphs in a div, as it morespecifically refers to the desired element). Cascading also means that each objectinherits some styles from its parent object or parent class. The parents are not thesame as the parent objects in JavaScript but use a similar idea. The objects arerefered to by their element tag. The highest object in the structure is the
element. If any elements do not have their own CSS defined but the
elementdoes, then the cascading behaviour means they will inherit from the
element.So, if in the
element we define the text colour to be white, then any tables willalso have white writing in them.Each element can be in a class. For example, if we define the
tag to have a textcolour red then every paragraph will be red. But if we then define a class of paragraph called
where the text is bold and we create a paragraph of classmybold, it will have bold text. But remember that style sheets cascade and elementsinherit from their parent class, so the text in the paragraph of class mybold will alsobe red. If we define the class
to have blue text then the blue will override thered and the text in the paragraph of class
will be blue.One of the features of CSS is that if the browser does not understand something, itwill ignore it and move on to the next attribute. It will not display warnings. This canmake things easier in some circumstances, since you can apply styles without havingto worry that a browser might ignore the entire stylesheet, because it should onlyignore 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 correctlyapply 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 fairlycomplete support for CSS 1 and 2.1 (including 6 separate media types), as well asseveral parts of CSS 3. After Opera are the KHTML/WebKit engine browsers likeSafari and Konqueror, with fairly complete support for CSS 1, largely completesupport 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 slowerengine. 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. Theyalso have support for many CSS extensions. Last of all is Internet Explorer. Whencomparing the same version numbers, IE on Mac supports some parts that theWindows version does not, but both are fairly old and incomplete. They support CSS1, and selected parts of CSS 2, and manage to pack more bugs into their supportthan most of the other browsers. Internet Explorer 7 supports more of CSS 1 than IE6, and has fixed some of the CSS 2 handling. Internet Explorer 8 has finally made aproper advance to support most of CSS 2.1, but is still nothing like as good as theother browsers when it comes to more advanced CSS.This tutorial is not intended to teach you all of the many possible styles that you canapply, it is intended to teach you the syntax expected with CSS.When using CSS, it is important to make sure that browsers use their moststandards compliant response. You will need to ensure that your DOCTYPE triggersstandards mode rendering for these browsers, or they will assume your code isrelying on some mistakes of older browsers, and will try to replicate some them tovarious degrees, which can produce unpredictable results.There are two ways to include CSS on a page. One is by loading it from an externalfile, and one is by embedding it directly in the source code of the page. One of themost useful features of CSS is the ability to share the same styles across manypages, so that all pages can be changed by modifying a single file. To do that, youwill need to keep the CSS in a separate file. This also allows you to keep the clutterout of your document, and helps avoid several other problems, so even if you onlyintend to use the CSS on one page, you may want to include it in an external fileanyway.To use an external file, you would usually name the file
(choose anappropriate name), and then use the LINK tag to tell the page to use it. Inside thehead of a document put this:<link rel="stylesheet" type="text/css" href="something.css">To embed CSS directly into a web page, use the STYLE tag, and set the type to
:<style type="text/css"> /* CSS goes here */</style>Note that CSS should only ever be included in the head of your document, unlessyou use inline style attributes on individual elements.
Using comments
Comments allow you to leave notes to yourself and other people in your CSS, andare useful as a reminder of what the styles are being used for and why. CSS onlysupports block comments, and these can span multiple lines. The slash-asteriskindicates a comment start. Everything after it will be ignored by the CSS engine untilan asterisk-slash is encountered.
p { color: green; } /* This is ablock comment */div { position: relative; }
Commenting out your CSS
This is not needed any more. All current browsers are aware of style tags, and howto treat their contents, since they have been part of HTML since HTML 3. Browsersthat do not understand HTML 3 or CSS (these are virtually never used now) willdisplay the CSS as if it was the content of the page. You can hide the CSS from themby commenting out your CSS with standard HTML comments. Browsers thatunderstand CSS will simply ignore these comments, and will just interpret the CSSwithin them:<style type="text/css"><!-- /* CSS goes here */--></style>
Dealing with XHTML
Note that when I talk about XHTML, I am talking about pages that are served using acontent type of 
- the majority of pages that use XHTMLmarkup are actually served as
and as a result are correctly treated asHTML, not XHTML.The rules in XHTML are different. Style tags are not treated as being special. Theircontents are treated as any other part of XHTML, so various selectors can bemisinterpreted as part of the markup. To avoid this, it is best to put all CSS inexternal CSS files so that they do not interfere with the page itself. If you feel theneed to put something directly on the page, you can declare it as CDATA (the defaultfor style contents in normal HTML):<style type="text/css"><![CDATA[ /* CSS goes here */]]></style>If you feel the compulsion to comment out your CSS in XHTML, you must use a moreugly structure to contain your CSS. Again, this really is not needed, since browsersthat do not understand CSS also do not understand XHTML, but in case you want touse it (maybe you are serving it as XHTML to some browsers, and HTML to others),this is what to use:

Activity (10)

You've already reviewed this. Edit your review.
1 hundred reads
suneel725 liked this
Midhat Krilic liked this
Midhat Krilic liked this
chikaad liked this
krishna liked this
daisa_sarah liked this
Cham liked this
arnelsoft liked this

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->