Css tutorial 2012

2012CSS TUTORIAL Mr.D.S.Kiran D.S.Technologies

CSS TUTORIAL 2012 D.S.Kiran is the founder of D.S.Technologies. He is maintaining a web site called eBookDust (www.ebookdust.com) over the last several years providing eBooks and Materials. And He is a self-taught web designer and SEO expert. He is an entrepreneur, designer, developer, and overall thinker. Your comments and suggestions are always welcome!2 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012Topic Name Page No Introduction 4 Advantages 5 Using this Tutorial 6 Selectors 7 Tag Selectors 8 Class Selectors 9 ID Selectors 10 Grouped Selectors 11 Context Dependant Selectors 12 Where to Place It 13 Single Tags 14 Single Pages 15 Entire Sites 16 CSS Text 18 CSS Colors 20 CSS Links 23 CSS Lists 26 CSS Layers 28 3 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 INTRODUCTIONCSS stands for Cascading Style Sheets. It is a way to divide the content from the layout on web pages.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 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 inyour table cells.Compare the following examples of a simple table: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 you separate the layout from the content, it also lets you define the layout much more powerfully than you couldwith classic HTML. 4 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 ADVANTAGESWith 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 gettired 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 theyre created. Since the styles are defined in one place you can change thelook of the entire site at once. (Ever get tired of replacing tags throughout your site when you want to change the look of a certainelement? 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 theseven 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 easilywith 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 arent filled with tags that define the look. The style definitions are kept in a single CSSdocument that is only loaded once when a visitor enters your site.The one disadvantage is:- these will only work on version 4 browsers or newer. However, more than 95% of all browsers live up to that. 5 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 USING THIS TUTORIALThis tutorial has been laid out so that it can be used both as a future reference and as an ongoing tutorial starting at page 1.The tutorial has been divided into 6 logical sections.  Explain the different types of selectors.  Practical uses of selectors, easy ways to define styles, etc.  How to define CSS at different levels: Tags, Pages and Sites.  A listing of the attributes that can be set for inline tags, block tags and links.  How to add layers to your pages.  Problems related to cross browser compatibility.And that is all you need to know about CSS to become an expert!Proceed to start learning about selectors... 6 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 SELECTORSSelectors 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.For example: <HTML> <HEAD> <style type="text/css"> B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline} </style> </HEAD> <BODY> <b>This is normal bold</b><br> <b class="headline">This is headline style bold</b> </BODY> </HTML>In this case B.headline is the selector.The above example would result in this output: This is normal bold This is headline style boldThere 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)Proceed to learn about each of these types... 7 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 TAG SELECTORSThe general syntax for an HTML selector is:HTMLSelector {Property:Value;}For example: <HTML> <HEAD> <style type="text/css"> B {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b>This is a customized headline style bold</b> </BODY> </HTML>HTML selectors are used when you want to redefine the general look for an entire HTML tag. 8 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CLASS SELECTORSThe general syntax for a Class selector is:.ClassSelector {Property:Value;}For example: <HTML> <HEAD> <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b class="headline">This is a bold tag carrying the headline class</b> <br> <i class="headline">This is an italics tag carrying the headline class</i> </BODY> </HTML>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 like in the above example (class="headline").SPAN and DIV as carriersTwo tags are particularly useful in combination with class selectors: <SPAN> and<DIV>.Both are "dummy" tags that dont 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 whendefining layers on your pages. 9 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 ID SELECTORSThe general syntax for an ID selector is:#IDSelector {Property:Value;}For example: <HTML> <HEAD> <style type="text/css"> #layer1 {position:absolute; left:100;top:100; z-Index:0} #layer2 {position:absolute; left:140;top:140; z-Index:1} </style> </HEAD> <BODY> <div ID="layer1"> <table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr></table> </div> <div ID="layer2"> <table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER 2<br>POSITIONED AT 140,140</td></tr></table> </div> </BODY> </HTML>ID selectors are used when you want to define a style relating to an object with a unique ID.This selector is most widely used with layers (as in the above example), since layers are always defined with a unique ID. 10 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 GROUPED SELECTORSMost 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 fontto all the selectors at once.Look at this example, made without grouping: .headlines{ font-family:arial; color:black; background:yellow; font-size:14pt; } .sublines { font-family:arial; color:black; background:yellow; font-size:12pt; } .infotext { font-family:arial; color:black; background:yellow; font-size:10pt; }As you can see, the only style that varies is the font-size.In the next example we have grouped the selectors, and defined the common styles at once. .headlines, .sublines, .infotext { font-family:arial; color:black; background:yellow; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}Less to type, easier to change and guaranteed to be the same for all styles. 11 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CONTEXT DEPENDANT SELECTORSIt 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>.THE SYNTAXSimply adding a normal style to the <B> tag is done like this: B {font-size:16px}Adding a context dependent style, like the one described above is done like this: I B {font-size:16px;}We simply separated the contextual <I> tag from the <B> tag with a space.USING GROUPED AND CONTEXT DEPENDENT SELECTORS AT THE SAME TIME:It is possible to use context dependent and grouped selectors at the same time.For example, like this: I B, .headlines, B .sublines {font-size:16px;}In the example the font-size of 16 pixels is in effect on:1) All <B> tags enclosed by <I> tags2) All headlines classes.3) sublines classes enclosed by <B> tags. 12 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 WHERE TO PLACE ITCSS can be added to your pages at 3 different levels.It is possible to create CSS styles that only work for the single tag it is defined for.Single tag CSS is used when the style is used in a single place on the entire site.Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles thatare defined once for the entire page.If, however, that certain style is used on more than a single page, you should use the third - and most powerful - techniquedescribed: adding styles that are defined once for the entire site.The following pages will explain each of these techniques.... 13 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 SINGLE TAGSCSS can be defined for single tags by simply addingstyle="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 theyre 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 its used, rather than just defining it once and thenreferring to that one definition whenever its used.Furthermore, if you wanted to change a certain style, youd have to change it all over in your document, rather than in one place. 14 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 SINGLE PAGESCSS can be defined for entire pages by simply adding a style definition to the head section.Look at this example: <html> <head> <title>MY CSS PAGE</title> <style type="text/css"> .headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;} </style> </head> <body> <span class="headlines">Welcome</span><br> <div class="sublines"> This is an example page using CSS.<br> The example is really simple,<br> and doesnt even look good,<br> but it shows the technique. </div> <table border="2"><tr><td class="sublines"> As you can see:<br> The styles even work on tables. </td></tr></table> <hr> <div class="infotext"> Example from EchoEcho.Com. </div> <hr> </body> </html>In the above example, although we used the sublines style twice, we only had to define it once: in 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. 15 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 ENTIRE SITESCSS 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 pagesin 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 onlyloaded 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 doesnt have to be transferred via the internet forsubsequent pages.This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for yourentire site even after it has been made.Look at this example:File: example.html <html> <head> <title>MY CSS PAGE</title> <link rel=stylesheet href="whatever.css" type="text/css"> </head> <body> <span class="headlines">Welcome</span><br> <div class="sublines"> This is an example of a page using CSS.<br> The example is really simple,<br> and doesnt even look good,<br> but it shows the technique. </div> <table border="2"><tr><td class="sublines"> As you can see:<br> The styles even work on tables. </td></tr></table> <hr> <div class="infotext">Example from EchoEcho.Com.</div> <hr> </body> </html>The above example is the exact same as we used for CSS defined for entire pages, with one important exception:There is no style definition on the page. Instead we added a reference to an external style sheet: <link rel=stylesheet href="whatever.css" type="text/css">This means that the browser will look for a file called whatever.css and insert it at the place where the reference was found in thehtml document.So in order to complete our example we need to have a file called whatever.css that looks like this:File: whatever.css .headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;} 16 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012Now if you just add the line <link rel=stylesheet href="whatever.css" type="text/css"> to the <head> of all your pages, thenthe one style definition will be in effect for your entire site.Imagine the power and flexibility this gives you to make changes to the layout even after the site is done.But also realize how using an external style sheet will guarantee that all pages are following the same thread.There wont be single pages that you forgot to update when you decided to change the style for your headers.At this point of the tutorial you should know: 1: how to define styles for tags, classes and objects with IDs. 2: how to group styles and make them context dependent 3: how to add styles to single tags, single pages and entire sitesAll we need now is a walkthrough of the various style attributes that can be assigned.We will divide them into three categories: 1: Inline attributes. (Works on tags like: <SPAN>, <B> and <I>). 2: Block attributes. (Works on block tags: <DIV>, <TD> and <P>). 3: Link attributes. (Works on links and use a special syntax). 17 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CSS TEXTCSS has several options for defining the styles of text.These options can entirely replace the <font> tag, but theres even more. CSS allows you to define these styles much morepowerfully than you could ever do with plain HTML.FONT PROPERTIES Property Values NS IE Example font-family font name 4+ 4+ font-family:arial generic font 4+ 4+ font-family:arial, helvetica font-style normal 4+ 4+ font-style:normal italic 4+ 4+ font-style:italic oblique 4+ font-style:oblique font-variant normal 4+ font-variant:normal small-caps 4+ font-variant:small-caps font-weight normal 4+ 4+ font-weight:normal bold 4+ 4+ font-weight:bold bolder 4W 4+ font-weight:bolder lighter 4W 4+ font-weight:lighter 100-900 4+ 4+ font-weight:250 font-size normal 4+ 4+ font-size:normal length 4+ 4+ font-size:14px length 4+ 4+ font-size:14pt absolute 4+ 4+ font-size:xx-small absolute 4+ 4+ font-size:x-small absolute 4+ 4+ font-size:small absolute 4+ 4+ font-size:medium absolute 4+ 4+ font-size:large absolute 4+ 4+ font-size:x-large absolute 4+ 4+ font-size:xx-large font-size:smaller relative 4+ 4+ font-size:larger relative 4+ 4+ font-size:75% percentage 4+ 4+4P:problems, 4M:Mac only, 4W:Windows onlyASSIGNING ALL FONT ATTRIBUTES AT ONCEAn example of a typical font definition would be: B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}But since all font attributes can actually be expressed with the font property we could actually write it this way: B {font:arial, helvetica 12px bold}The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is thatyoud be assigning the same font face to all your styles, for example, while youd want different font weights and sizes for headersand content areas etc. 18 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012TEXT PROPERTIESDespite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc. Property Values NS IE Example line-height normal 4W 4+ line-height:normal number 4+ 4P line-height:1.5 length 4+ 4+ line-height:22px percentage 4+ 4P line-height:150% text-decoration none 4+ 4M text-decoration:none underline 4+ 4+ text-decoration:underline overline 4W text-decoration:overline line-through 4+ 4+ text-decoration:line-through text-decoration:blink blink 4+ text-transform none 4+ 4W text-transform:none capitalize 4+ 4W text-transform:capitalize uppercase 4+ 4W text-transform:uppercase text-transform:lowercase lowercase 4+ 4W text-align left 4+ 4+ text-align:left right 4+ 4+ text-align:right center 4+ 4+ text-align:center justify 4+ 4W text-align:justify text-indent length 4+ 4+ text-indent:20px; percentage 4+ 4+ text-indent:10% white-space normal 4+ white-space:normal pre 4+ white-space:pre4P:problems, 4M:Mac only, 4W:Windows only Note: line-height : When using a number (such as 1.5) the number refers to the font size, where 1.5 would mean that a 1.5 lines spacing (using the current font size) will be inserted between the lines. text-transform : Capitalize sets the first letter of each word in uppercase. Uppercase forces all letters to uppercase. Lowercase forces all letters to lowercase. text-indent : Use this to indent the first word of a paragraph. white-space : If white-space is set to pre the browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to the<pre> tag in plain HTML. Since the white-space is only supported by NS you should use the <pre> tag instead.The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but thesearent supported by todays browsers.COLORSAs you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with oneexception: 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 youd do it this way: B {font:arial, helvetica 12px bold; color:red} 19 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CSS ColorsCSS 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 didnt have inplain 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 everytable cell. With CSS you can simply refer to a certain class in your <TD> tags.COLOR PROPERTIES Property Values NS IE color <color> 4+ 4+ background-color transparent 4+ 4+ <color> 4+ 4+ none 4+ 4+ background-image url(<URL>) 4+ 4+ repeat 4+ 4+ repeat-x 4+ 4+ background-repeat repeat-y 4+ 4+ no-repeat 4+ 4+ scroll 4+ background-attachment fixed 4+ <percentage> 4+ <length> 4+ top 4+ background-position center 4+ bottom 4+ left 4+ right 4+ <background-color> 4+ 4+ <background-image> 4+ 4+ background <background-repeat> 4+ 4+ <background-attachment> 4+ <background-position> 4+4P:problems, 4M:Mac only, 4W:Windows onlySetting colorsBasically you have three color options with CSS:1: Setting the foreground color for contents2: Setting the background color for an area3: Setting a background image to fill out an areaIn the next section we will list the different properties that let youdo that.In plain HTML, colors can either be entered by name (red, blue etc.) or by a hexadecimal color code (for example: #FF9900). 20 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012With CSS you have these options: Common name You can define colors with the use of common names, by simply enter the name of the desired color. For example: .myclass {color:red; background-color:blue;} Hexadecimal value You can define colors with the use of hexadecimal values, similar to how its done in plain HTML. For example: .myclass {color:#000000; background-color:#FFCC00;} RGB value You can define colors with the use of RGB values, by simply entering the values for amounts of Red, Green and Blue. For example: .myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);} You can also define RGB colors using percentage values for the amounts of Red, Green and Blue: For example: .myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}Setting background colorsBackground colors are defined similar to the colors mentioned above. For example you can set the background color of the entirepage using the BODYselector: BODY {background-color:#FF6666;} 21 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012Setting a background imageCSS 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-repeatproperty. 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 backgroundBackground 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;}Note: Background positioning is not supported by Netscape 4 browsers.Fixing a backgroundYou can fixate an image at a certain position so that it doesnt move when scrolling occurs. BODY {background-image:url(myimage.gif); background-attachment: fixed;}Note: Background fixation is not supported by Netscape 4 browsers.Setting multiple background valuesRather than defining each background property with its own property you can assign them all with the use ofthe background property.Look at this example: BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;} 22 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CSS LinksCSS has several options for redefining the style of links.LINK PROPERTIES Property Values NS IE A:link <style> 4+ 4+ A:visited <style> 4+ 4+ A:active <style> 4+ 4+ A:hover <style> 6+ 4+DEFINING STYLES FOR LINKSAs mentioned in the above table, there are four different selectors with respect to links.You can specify whatever style youd like to each of these selectors, just like youd do with normal text.The four selectors are: A:link Defines the style for normal unvisited links. A:visited Defines the style for visited links. A:active Defines the style for active links. A link becomes active once you click on it. A:hover Defines the style for hovered links. A link is hovered when the mouse moves over it. Note: Not supported by Netscape browsers prior to version 6.PRACTICAL EXAMPLESHere you can see a few examples on how CSS can be used to replace the traditional image based mouseover effects for links.The hover style is not supported by Netscape browsers prior to version 6, but since it does no harm, you can still use it for thebenefit of the +90% of visitors that arrive using MSIE).One of the most common uses of CSS with links is to remove the underline. Typically its done so that the underline appears onlywhen a hover occurs. In the example below, we did just that. In addition we added a red color for hovered links.Example: Hover <style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} </style> 23 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012Another example would be to create links that are both underlined andoverlined.Example: Underline/Overline <style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline overline; color: red;} </style>A third example would be to create links that change in sizewhen hovered.Example: Size changing links <style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {font-size:24; font-weight:bold; color: red;} </style>A final example would be to create links that have a permanent background color, obviously standing out from the rest.Example: Background colored links <style type="text/css"> A:link {background: #FFCC00; text-decoration: none} A:visited {background: #FFCC00; text-decoration: none} A:active {background: #FFCC00; text-decoration: none} A:hover {background: #FFCC00; font-weight:bold; color: red;} </style>MULTIPLE LINKSTYLES ON SAME PAGEThe final topic deals with how to add multiple link styles that can be used on the same page.In the above examples we addressed the HTML selector - A:link etc - and thus redefined the overall link style.How do we define a link style that is only active in a certain area of the page?The answer is: context dependent selectors.Rather than addressing the A:link selector we will address it while being dependant on a certain outer class that surrounds thearea where wed like our link style to be effective. 24 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012For example: <html> <head> <style type="text/css"> .class1 A:link {text-decoration: none} .class1 A:visited {text-decoration: none} .class1 A:active {text-decoration: none} .class1 A:hover {text-decoration: underline; color: red;} .class2 A:link {text-decoration: underline overline} .class2 A:visited {text-decoration: underline overline} .class2 A:active {text-decoration: underline overline} .class2 A:hover {text-decoration: underline; color: green;} </style> </head> <body> ONE TYPE OF LINKS <br> <span class="class1"> <a href="http://www.yahoo.com">YAHOO</a> <br> <a href="http://www.google.com">GOOGLE</a> </span> <br> <br> ANOTHER TYPE OF LINKS <br> <span class="class2"> <a href="http://www.yahoo.com">YAHOO</a> <br> <a href="http://www.google.com">GOOGLE</a> </span> </body> </html>Note how we use the <span> to define the context.This is smart for two reasons:1) The obvious, that it allows us to use different link styles onthe same page, rather than being limited to using a singleoverall link style.2) We can define entire areas where a certain link style works for all links within that area. Thus, we dont have to add a styledefinition to each and every link in that area. 25 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CSS ListsCSS allows you to customize the lists that can be madewith 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 havelimitations in their support of list styles.Netscape browsers only let you add the list CSS to <LI> tags - not just any tag.Internet Explorers 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, mostthings wont ruin anything if the browser doesnt support it - it just shows as a normal list - so it will be okay to define lists that onlywork for the most widely used browser.LIST PROPERTIES Property Values NS IE disc 4+ 4W circle 4+ 4W square 4+ 4W decimal 4+ 4W list-style type lower-roman 4+ 4W upper-roman 4+ 4W lower-alpha 4+ 4W upper-alpha 4+ 4W none 4W list-style image none 4W url(<url>) 4W outside 4W list-style position inside 4W <list-style type> 4W list-style <list style position> 4W <list-style image> 4w4+: Browser version 4 or newer.4W: Browser version 4 or newer, windows only.DEFINING STYLES FOR LINKSAs mentioned in the above table, we have four unique selectors with respect to lists. The fourth selector, list-style is an overallselector that let you define all list related styles at once.The three basic selectors are: list-style type Defines the look of the bullets used in your list. list-style image Lets you use a custom graphic for bullets. list-style position Often the text in a list is longer than one line. list-style position:outer lets the second line align with the first line. That is: the bullet is to the left of both lines. list-style position:inner lets the second line align with the bullet. 26 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 Assigning several properties at once Instead of using different selectors for each list-style you can specify them all at once using the list-style property. For example: <html> <head> <style type="text/css"> LI.list1 {list-style: circle outside; color:green;} LI.list2 {list-style: square inside; color:blue} .blacktext {color:black} </style> </head> <body> <ul> <li class="list1"><span class="blacktext">This is one black line</span> <li class="list1">This is another line that is much longer than the first. But it isnt a black line since we did not specify a style for the text that goes here other than the style we defined for the list. </ul> <br> <br> <ul> <li class="list2"><span class="blacktext">This is one black line</span> <li class="list2">This is another line that is much longer than the first. But it isnt a black line since we did not specify a style for the text that goes here other than the style we defined for the list. </ul> </body> </html> The lists from the above example would look like this:o This is one black lineo This is another line that is much longer than the first. But it isnt a black line since we did not specify a style for the text that goes here other than the style we defined for the list. This is one black line This is another line that is much longer than the first. But it isnt a black line since we did not specify a style for the text that goes here other than the style we defined for the list. 27 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CSS LAYERSWith 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 limitedsupport 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.LAYER BASICSFirst look at this example: LAYER 1 ON TOP: LAYER 1 LAYER 2 LAYER 2 ON TOP: LAYER 1 LAYER 2Second look at the code: 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. 28 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012RELATIVE VERSUS ABSOLUTE POSITIONINGYou can either position your layer calculated from the upper left corner(absolute) or calculated from the position where the layeritself 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.DEFINING THE POSITIONWhile the position property indicates the out spring of our coordinate system, the left and top properties defines the exact positionof our layer.You can enter both positive and negative values for these properties - thus it is possible to place content higher up and further tothe 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 resultingpage.Both left and top properties can be dynamically changedwith 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 thesedynamic HTML effects here.POSITION IN THE STACK - THE Z-INDEXPicture a game of 52 cards. If the ace of spades was at the bottom wed say it had z-index:1;. If the queen of hearts was at the topwed 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 firstexample, 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 thelayer with the desired info on top rather than load a new page. The techniques to create effects like that goes beyond the scope ofpure CSS however, so for now we will just refer to DHTML (Dynamic HTML - a mix between JavaScript and CSS) for furtherexplorations into that area. 29 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012VISIBILE VERSUS HIDDEN LAYERSA 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 cooleffects 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 tocreate menus that pop out (like the sub menus in the START menu on Windows). The trick behind these menus is to create allsubmenus as invisible layers. Then, when a mouse-over is detected on a link the according layer becomes visible. (Sounds prettyeasy - actually is pretty easy - except when tried on Netscape browsers that seem to have only a vague idea of the logic behindCSS 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>PRACTICAL USE OF LAYERSIts obvious that layers offer certain possibilities for precise positioning of static elements on your pages.In reality layers are often used in more dynamic ways:  Flying elements/banners on the page  Games where you move an object around  Menus that pop out when triggered  Menus that become visible when triggeredWhile all of these effects might seem pretty cool and useful - the fact is that the web is filled with dynamic effects that are muchmore cool than the average visitor really likes.The more you create a unique interface for your site the more you force the visitor to forget about what she is used to. Do notunderestimate the power of sticking to the elements that the average visitor is accustomed to.Whats cool about creating an effect that makes 90% of all web designers clap their hands while leaving 90% of non-web designersconfused or disappointed?In any case, judge for yourself if a certain effect is really needed - and if so: do not hesitate to use it. 30 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 CSS CursorsMicrosoft 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 doesnt ruin anything. These browsers willsimply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all.So unless the page really doesnt work without the customized cursor there shouldnt 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 easilyconfused or irritated when a site breaks the standard user interface.CURSOR PROPERTIES Look Values Look NS IE Example default TEST 6+ 4+ cursor:default crosshair TEST 6+ 4+ cursor:crosshair hand TEST 4+ cursor:hand pointer TEST 6+ cursor:pointer Cross browser TEST 4+ cursor:pointer;cursor:hand move TEST 6+ 4+ cursor:move text TEST 6+ 4+ cursor:text wait TEST 6+ 4+ cursor:wait help TEST 6+ 4+ cursor:help n-resize TEST 6+ 4+ cursor:n-resize ne-resize TEST 6+ 4+ cursor:ne-resize e-resize TEST 6+ 4+ cursor:e-resize se-resize TEST 6+ 4+ cursor:se-resize s-resize TEST 6+ 4+ cursor:s-resize sw-resize TEST 6+ 4+ cursor:sw-resize w-resize TEST 6+ 4+ cursor:w-resize nw-resize TEST 4+ 4+ cursor:nw-resize progress TEST 6+ cursor:progress 31 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012 not-allowed TEST 6+ cursor:not-allowed no-drop TEST 6+ cursor:no-drop vertical-text TEST 6+ cursor:vertical-text all-scroll TEST 6+ cursor:all-scroll col-resize TEST 6+ cursor:col-resize row-resize TEST 6+ cursor:row-resize cursor:url(uri) TEST 6+ cursor:url(uri)4P:problems, 4M:Mac only, 4W:Windows onlyADDING A CUSTOMIZED CURSORThe syntax for a customized cursor is this:(Position the mouse over each link to see the effect)Selector {cursor:value}For example: <html> <head> <style type="text/css"> .xlink {cursor:crosshair} .hlink{cursor:help} </style> </head> <body> <b> <a href="mypage.htm" class="xlink">CROSS LINK</a> <br> <a href="mypage.htm" class="hlink">HELP LINK</a> </b> </body> </html>The links from the above example would look like this: CROSS LINK HELP LINK 32 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 2012REDEFINING THE CURSOR FOR ENTIRE PAGESIf you want to redefine the cursor so that its not only showing up when moved over a link, you simply specify the desired cursorusing the body-selector.For example: <html> <head> <style type="text/css"> body {cursor:crosshair} </style> </head> <body> <b> SOME TEXT <br> <a href="mypage.htm">ONE LINK</a> <br> <a href="mypage.htm">ANOTHER LINK</a> </b> </body> </html>REDEFINING THE CURSOR FOR AREAS ON A PAGEIf you want one look of the cursor in one area of the page and another look of the cursor in another area you can do it with contextdependant selectors.This way, you create different styles for links, that are dependant on the context. Now if the context is set with a dummy tag, suchas <span> you dont have to specify the desired style each and every time there is a link in the section.For example: <html> <head> <style type="text/css"> .xlink A{cursor:crosshair} .hlink A{cursor:help} </style> </head> <body> <b> <span class="xlink"> <a href="mypage.htm">CROSS LINK 1</a><br> <a href="mypage.htm">CROSS LINK 2</a><br> <a href="mypage.htm">CROSS LINK 3</a><br> </span> <br> <span class="hlink"> <a href="mypage.htm">HELP LINK 1</a><br> <a href="mypage.htm">HELP LINK 2</a><br> <a href="mypage.htm">HELP LINK 3</a><br> </span> </b> </body> </html> 33 Contact the Author At: informtods@gmail.com

CSS TUTORIAL 201234 Contact the Author At: informtods@gmail.com

Css tutorial 2012

by Sudheer Kiran

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Css tutorial 2012 Document Transcript