In-line Style sheet 1 Font-Inline CSS

<HTML> <HEAD> <TITLE>In line Style Sheet</TITLE> <HEAD> <BODY> <H1 style="Color:red"> Fruits and Vegetables</H1> <P STYLE=color:blue; font-size:20px>We have many kinds of fruits and vegetables in Sri Lanka <br> They are verydelicious</P><br> </BODY> </HTML>



<HTML> <HEAD> <TITLE>Font Embedded CSS</TITLE> <STYLE TYPE="TEXT/CSS"> H1{color:red; font-size:50px} P {color:green; font-size:12px} </STYLE> </HEAD> <BODY> <H1> Fruits and Vegetables</H1> <P>We have many kinds of fruits and vegetables in Sri Lanka <br> They are very delicious</P><br> </BODY> </HTML>


3. Linking Style Sheet

Save as: linking_style.html <HTML> <HEAD> <TITLE>Linking Style Sheet</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="linking.css"> </HEAD> <BODY> <H1> This is an element type selector </H1> <P>This is an element type selector</P><br> <P CLASS=para1>This is a class selector type style</P> <P ID=para2>This is a ID selector type style sheet </BODY> </HTML> Save as: linking.css H1{color:green; font-size:50px} P {color:red; font-size:12px} .para1{ font-family: monospace; font-size: 20px; font-weight: bold; height: 2px; } #para2{ border: medium; border-color: Fuchsia; font: italic; }




<HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> #id123{color:red} </STYLE> </HEAD> <BODY> <H1 id="id123"> Heading 1</H1> <P>content 1</P> <H1>Heading 2</H1> <P>content</P> </BODY> </HTML> 5. Element CSS <html> <head> <style type="text/css"> h1{color:red} H2{color:blue} </style> </head> <body> <h1>Heading 1</h1> <h2>Item 1</h2> <h1>Heading 2</h1> <h2>Item 2</h2> </body> </html> </body> </html> 6. Group-CSS <html> <head> <style type="text/css"> h1,h2,h3,{font:24pix"MSP Mincho"; color:blue} </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> </body></html>




<html> <head> <style type="text/css"> A:link{color:yellow; font-size:large} A:visited{color:blue; font-size:small} A:active{color:green; font-size:x-large} </style> </head> <body> <a href="goya.html">Back to top</a> 8. Common Sample CSS

<html> <head> <title> CSS</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="gothic">this Character is display as MS p gothic</div> <div class="arial">this Character is display as arial</div> <div class="times">this Character is display as times</div> <!--Specify Font style--> <div id="italic">this Character is display as times and italic letters</div> <!--Specify Font weight--> <div id="font1">this Character is display font weight as normal</div> <div id="font2">this Character is display font weight as bolder</div> <div id="font3">this Character is display font weight as 700</div> <div id="font4">this Character is display font weight as 900</div> <!--Specify Font Size--> <div class="font5">this Character is display font-size 1in</div> <div class="font6">this Character is display font-size 10mml</div> <div class="font7">this Character is display font-size 1pc</div> <div class="font8">this Character is display font-size 2em</div> <div class="font9">this Character is display font-size 12px</div> <div class="font10">this Character is display font-size 12pt</div> <div class="font11">this Character is display font-size 1cm</div> <!--decoration of text--> <div id="text1">this Character is display text-decoration underline</div> <div id="text2">this Character is display text-decoration line-through</div>


<!--Specify Character Spacing--> <div class="fonta">this Character is display letter-spacing normal</div> <div class="fontb">this Character is display letter-spacing 12px</div> <div class="fontc">this Character is display letter-spacing -3</div> <!--Specify line height--> <div id="linea">this Character is display line-height 36px</div> <div id="lineb">this Character is display line-height 250%</div> <!--Specify the borderline color--> <p class="border1"> At the border color <span class="co">is red and</span> weight is 7px </p> </body> </html>



Border Styles

<html><head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style></head> <body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p> </body> </html> 10. Border Styles (out put)


11. Z- index <html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p> </body> </html>


Web Templates handing using CSS

Sample CSS
#container{ width: 100%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; } #top{ padding: .5em; background-color: #F0FFFF; border-bottom: 1px solid gray; } .imgl { float: left; } #top h1{ padding: 0; text-align: center; } #leftnav{ float: left; width: 160px; margin: 0; padding: 1em; } #leftnav ul li a { text-decoration: underline; background-color: Navy; width: 120px; color: White; font-weight: bold; list-style: none; } #leftnav ul li a:hover { background-color: Aqua; } #localnav ul li { display: inline; }


#localnav ul li a { text-decoration: underline; background-color: Navy; width: 120px; color: White; font-weight: bold; list-style: none; text-align: center; } #localnav ul li a:hover { background-color: Aqua; } #content{ margin-left: 200px; border-left: 1px solid gray; padding: 1em; max-width: 36em; } .img{ float: left; } .imgr{ float: right; width: 50px; height: 55px; } #footer{ clear: both; margin: 0; padding: .5em; color: #333; background-color: #F0FFFF; border-top: 1px solid gray; } #leftnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0 .5em 0; }



Sample Properties of CSS



The Box Properties


How to use some of the css box properties Width and Height Width Possible Values: number of pixels: {width: 100px} percentage: {width: 25%}

<DIV style=”width: 100px”>This section of text will be 100 pixels long</DIV> height Possible values: number of pixels: {height: 100px} percentage: {height: 25%} Borders border-style Possible Values: none solid double border-width Possible Values: number of pixels thin medium thick border-color Possible Values: color name Margins Margin-left Possible Values: number in pixels percentage auto margin-right Possible Values: number in pixels


Margin-top Same as above, but defines the top margin. The default is 0. Margin-bottom Same as above, but defines the bottom margin. The default is 0. Padding Padding-left Possible Values: number in pixels percentage auto CSS Positioning Properties How to position elements on the page Position Possible Values: static absolute relative

top Possible Values: number of pixels percentage left Possible Values: number of pixels percentage


The Text Properties How to use some of the css text properties letter-spacing Possible Values: number of pixels normal text-align Possible Values: left right center justify vertical-align Possible Values: baseline sub super top text-top middle bottom text-bottom text-decoration Possible Values: none underline overline line-through blink text-transform Possible Values: none uppercase lowercase Line-height Possible Values: normal number of pixels percentage


text-indent Possible Values: number of pixels percentage The Font Properties How to use some of the css font properties font-family Possible Values: name of font font-size Possible Values: number of pixels percentage

font- style Possible Values: normal italic oblique font-variant possible Values: normal small-caps font-weight Possible Values: normal bold bolder lighter 100 200 300 400 500 600 700 800 900


The Cursor Properties How to change the cursor with style sheets cursor : type <A HREF=”#” style=”cursor : crosshair”>A Cross Link</A> <SPAN style= “cursor:wait”>Should you Wait for This?</SPAN>

Cursor Type auto crosshair default move hand help text wait n-resize s-resize e-resize w-resize ne-resize nw-resize se-resize sw-resize

Example (Move Mouse Over Text) Shows it according to how the viewer has it set (plain) Looks like a cross Makes the cursor stay the same Looks like you should be moving something The hand you usually see over links A question mark beside the arrow The bar you see when the mouse is over text The “waiting” hourglass! An arrow- North An arrow-South An arrow-East An arrow-West An arrow-NorthEast An arrow-NorthWest An arrow-SouthEast An arrow-SouthWest


More on Backgrounds Repeating, Fixing and other things Property Possible Values: background-image URL of image to be used background-repeat:value repeat, no-repeat, repeat-x, repeat-y background-attachment:value scroll, fixed background-position:value 1 value 2 value 1: top, center, bottom, pixel number, percentage value 2 left, center, right, pixel number, percentage background-attachment:value This one can use one of two values: background-attachment : scroll background-attachment : fixed More on Backgrounds: Part 2 Repeating, fixing and other things background repeat value This one can have several values, here are the possibilities: background-repeat:repeat background-repaet:no-repeat background-repeat:repeat-x background-repeat:repeat-y background-position:value value The two values can be loots of things, here are some samples: Using top, center, or bottom with left, center or right background-position:top right background-position:center right background-position:bottom center Using pixels and percentages (from top-left or page) background-position: 200 250 background-position: 30% 60%