CSS

Introduction Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (i.e., the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for table less web design).

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

How it works? 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 our HTML contents we simply refer to the selectors whenever you want to activate a certain style.

EXAMPLE Classic HTML <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) <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> While CSS lets us to separate the layout from the content, it also lets us to define the layout much more powerfully than we could with classic HTML.

SELECTORS Selectors are the names that you give to your different styles. In the style definition you define how each selector should work (font, color etc.). Then, in the body of your pages, you refer to these selectors to activate the styles.

There are three types of selectors: HTML selectors Used to define styles associated to HTML tags. (A way to redefine the look of tags) Class selectors Used to define styles that can be used without redefining plain HTML tags. ID selectors Used to define styles relating to objects with a unique ID (most often layers)

HTML SELECTORS The general syntax for an HTML selector is: HTMLSelector {Property:Value;} HTML selectors are used when you want to redefine the general look for an entire HTML tag. CLASS SELECTORS The general syntax for a Class selector is: .ClassSelector {Property:Value;} Class selectors are used when you want to define a style that does not redefine an HTML tag entirely. When referring to a Class selector you simply add the class to an HTML tag

SPAN and DIV as carriers Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>. Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles. <SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after the use of it. <DIV> is a "block tag", meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags). <DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.

ID SELECTORS The general syntax for an ID selector is: #IDSelector {Property:Value;} ID selectors are used when you want to define a style relating to an object with a unique ID. GROUPED SELECTORS Most often selectors will share some of the same styles, for example, being based on the same font. In these cases, rather than defining the font for each and every selector, one by one, you can group them, and thus assign the font to all the selectors at once. Less to type, easier to change and guaranteed to be the same for all styles.

CONTEXT DEPENDANT SELECTORS It is possible to make selectors that will only work in certain contexts. For example, you can define a style for the <B> tag that is only triggered if the text is not only bold but also written in italics. For example, the style should be in effect here: <i><b>example</b></i> but not here : <b>example</b>.

SINGLE TAGS CSS can be defined for single tags by simply adding style="styledefinition:styleattribute;" to the tags. Look at this example: It is <b style="font-size:16px;">NOT</b> me. You should limit your use of single tag CSS. If you define your styles for each and every tag they're used on, you will lose much of the power associated with CSS. For example, you will have to define the style over and over again whenever it's used, rather than just defining it once and then referring to that one definition whenever it's used. Furthermore, if you wanted to change a certain style, you'd have to change it all over in your document, rather than in one place.

SINGLE PAGES CSS can be defined for entire pages by simply adding a style definition to the head section.By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made.This is an obvious advantage for you as a designer. But the advantage is on the visitors side as well.Since the styles are only defined in one place, the page size will be smaller, and thus faster to load.There is a way to emphasize these advantages even more: using external CSS styles that work for entire sites.

ENTIRE SITES CSS can be defined for entire sites by simply writing the CSS definitions in a plain text file that is referred to from each of the pages in the site. Rather than writing the entire CSS definition on each page, as in the previous examples, you can write it to a text file that is only loaded on the first page that a visitor sees at your site.When the visitor jumps to other pages, the CSS text file will be cached and thus doesn't have to be transferred via the internet for subsequent pages.This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for your entire site even after it has been made.

CSS TEXT CSS has several options for defining the styles of text.These options can entirely replace the <font> tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.

COLORS As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color. The color is not part of the font collection in CSS - rather it has its own definition. If you want to add a color to the text in the above example you'd do it this way: B {font:arial, helvetica 12px bold; color:red} The color property is explained in detail on the next page.

CSS Colors CSS has several options for defining colors of both text and background areas on your pages.These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML. For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With CSS, you can define an area to have a specific color without that area being part of a table. Or even more useful, in plain HTML when working with tables, you had to specify font attributes and colors etc. for each and every table cell. With CSS you can simply refer to a certain class in your <TD> tags.

Setting colors Basically you have three color options with CSS: 1: Setting the foreground color for contents 2: Setting the background color for an area 3: Setting a background image to fill out an area Setting background colors Background colors are defined similar to the colors mentioned above. For example you can set the background color of the entire page using the BODY selector: BODY {background-color:#FF6666;}

Setting a background image CSS lets you set a background image for both the page and single elements on the page. In addition, CSS offers several positioning methods for background images. You can define the background image for the page like this: BODY {background-image:url(myimage.gif);}

You can control the repetition of the image with the background-repeat property. background-repeat:repeat Tiles the image until the entire page is filled, just like an ordinary background image in plain HTML. background-repeat:repeat-x Repeats the image horizontally - but not vertically. background-repeat:repeat-y Repeats the image vertically - but not horizontally. background-repeat:no-repeat Does not tile the image at all.

Positioning a background Background positioning is done by entering a value for the left position and top position separated by a space. In this example the image is positioned 75 pixels from the upper left corner of the page: BODY {background-image:url(myimage.gif); background-position: 75px 75px;}

Fixing a background You can fixate an image at a certain position so that it doesn't move when scrolling occurs. BODY {background-image:url(myimage.gif); background-attachment: fixed;} Setting multiple background values Rather than defining each background property with its own property you can assign them all with the use of the background property. Look at this example: BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;}

CSS allows you to customize the lists that can be made with HTML.The good news is that there are many powerful properties for doing so.The bad news is that Netscape and Internet Explorer often support these properties in different ways. Both browsers have limitations in their support of list styles.Netscape browsers only let you add the list CSS to <LI> tags - not just any tag.Internet Explorer's support of CSS with relation to lists is only fully supported for browsers on the Windows platform. In any case, be careful about using CSS for lists since it might not show the way you want it to on all browsers. However, most things won't ruin anything if the browser doesn't support it - it just shows as a normal list - so it will be okay to define lists that only work for the most widely used browser. CSS Lists

With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision. The advantages of this are obvious - but once again Netscape has very limited support of CSS layers - and to top it off: the limited support it offers is quite often executed with failures. So the real challenge when working with layers is to make them work on Netscape browsers as well. CSS Layers

Code for the above images LAYER 1 ON TOP: <div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div> <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div> LAYER 2 ON TOP: <div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div> <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER 2</div> To create a layer all you need to do is assign the position attribute to your style. The position can be either absolute or relative. The position itself is defined with the top and left properties. Finally, which layer is on top is defined with the z-index attribute.

RELATIVE VERSUS ABSOLUTE POSITIONING You can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layer itself is inserted (relative). position:absolute If you define the position to be absolute it will be calculated from the upper left corner of the page - unless the layer is defined inside another layer, in which case it will be calculated from the upper left corner of the parent layer. position:relative If you define the position to be relative it will be relative to the position of the tag that carries the style. That is, if you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.

While the position property indicates the out spring of our coordinate system, the left and top properties defines the exact position of our layer. You can enter both positive and negative values for these properties - thus it is possible to place content higher up and further to the left on the page than the logical position in the HTML code where the layer itself is defined. In other words: at the bottom of your HTML code you can enter the code for a layer that is positioned at the top of the resulting page. DEFINING THE POSITION

Both left and top properties can be dynamically changed with JavaScript. This means that it is possible to move things around on the screen even after the page has finished loading. In fact this technique can be (and has been) used to create entire games. Other uses might be menus that pop out when a mouse-over is detected on a link. The possibilities are endless - but in order to keep things simple, we will not dig into details about these dynamic HTML effects here.

POSITION IN THE STACK - THE Z-INDEX Picture a game of 52 cards. If the ace of spades was at the bottom we'd say it had z-index:1;. If the queen of hearts was at the top we'd say she had z-index:52;. Try looking at the code example at the top of this page again, and see how we used the z-index to put LAYER 1 on top in the first example, while we had LAYER 2 on top in the second example.

Very interesting possibilities arise from the fact that the z-index can be dynamically changed with JavaScript. You could create several "pages" on top of each other - all on the same page. When the user clicks a link it will simply move the layer with the desired info on top rather than load a new page. The techniques to create effects like that goes beyond the scope of pure CSS however, so for now we will just refer to DHTML (Dynamic HTML - a mix between JavaScript and CSS) for further explorations into that area.

VISIBILE VERSUS HIDDEN LAYERS A final property is the visibility property that will allow you to create invisible layers. Why would anyone want to create an invisible layer? Well, imagine the possibilities it gives for adding pop-up menus and other cool effects on your pages. With dynamic HTML it is possible to change the visibility of a layer according to certain events. The most common use of this is to create menus that pop out (like the sub menus in the START menu on Windows). The trick behind these menus is to create all submenus as invisible layers. Then, when a mouse-over is detected on a link the according layer becomes visible. (Sounds pretty easy - actually is pretty easy - except when tried on Netscape browsers that seem to have only a vague idea of the logic behind CSS layers). Valid values for the visibility property are: visible and hidden. This example shows how to create an invisible layer: <div style="position:relative; visibility:hidden;">HELLO!!!</div>

Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS. Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all. So unless the page really doesn't work without the customized cursor there shouldn't be technical reasons for choosing not to. However there might be other reasons for thinking twice before adding custom cursor to your pages. Many users are easily confused or irritated when a site breaks the standard user interface. CSS Cursors

CSS

More Related Content

What's hot

Viewers also liked

Similar to CSS

More from Gouthaman V

Recently uploaded

CSS