Css 2
Download as DOC, PDF•0 likes•1,055 views
The document discusses various CSS properties for controlling dimensions, positioning, and visibility of elements. It provides examples of using height, width, float, clear, and display properties to position images and text on a page. It also shows how to create a horizontal navigation menu using float and inline properties.
Css 2
- 1. Lecture 22 Nesting If CSS is structured well, there should not be a need to use of many Class ID or selectors. For example: #top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } Now h1 contains the “attribute:value” pair of selector ID “#top” also, and another “attribute:value” pair i.e. “color:#ff0”. CSS Dimension Properties I: How to Set the Width and Height of an image <html> <head> <style type="text/css"> img.normal { height: auto; width: auto } img.big { height: 80px; width: 100px } img.small { height: 30px; width: 50px } </style> </head> <body>
- 2. <p><b>Note:</b> Netscape 4 does not support the "height" property, and the "width" property does not work on images.</p> <img class="normal" src="back.gif" width="72" height="40"> <br><br> <img class="big" src="back.gif" width="72" height="40"> <br><br> <img class="small" src="back.gif" width="72" height="40"> </body> </html> Dimension Properties: NN: Netscape, IE: Internet Explorer, W3C: Web Standard Property Description Values Example height Sets the height of an auto img element length { % height: 230px } line-height Sets the distance normal p between lines number { length max-height: 100px % } max-height Sets the maximum none height of an element length % max-width Sets the maximum width none h2 of an element length { % max-width: 500px } min-height Sets the minimum height length p of an element % { min-height: 10px } min-width Sets the minimum width length h2 of an element % { min-width: 50px } width Sets the width of an auto Refer example element % below
- 3. length CSS Classification Properties The classification property allows you to control 1. How to display an element. 2. Set where an image will appear in another element. 3. Position an element relative to its normal position. 4. Position an element using an absolute value. 5. To control the visibility of an element Property Description Values clear Sets the sides of an left element where other right floating elements are not both allowed none cursor Specifies the type of url h2 cursor to be displayed auto { crosshair cursor: default crosshair pointer } move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help display Sets how/if an element is none displayed inline block list-item run-in compact marker table inline-table table-row-group
- 4. table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption float Sets where an image or a left Refer text will appear in right example another element none below position Places an element in a static static, relative, absolute relative or fixed position absolute fixed visibility Sets if an element should visible be visible or invisible hidden collapse Creating a Horizontal menu <html> <head> <style type="text/css"> body { cursor: e-resize } ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">Link one</a></li>
- 5. <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p> In the example above, we let the ul element and the a element float to the left. The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). We add some colors and borders to make it more fancy. </p> </body> </html> An Example of Float <html> <head> <style type="text/css"> img { float:right } </style> </head> <body> <p> In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph. </p> <p> <img src="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> Another Example on the same line of Float <html> <head> <style type="text/css"> div
- 6. { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div> <img src="logocss.gif" width="95" height="84" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption. </p> </body> </html> A Home Page without Using Tables <html> <head> <style type="text/css"> div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em;
- 7. color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">kumarharmuscat.tripod.com</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At My Site you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3Schools - The Largest Web Developers Site On The Net!</p></div> <div class="footer">Copyright 1999-2005 by Harshit Kumar</div> </div> </body> </html> Pseudo Classes The syntax for Pseudo Class is Selector:pseudoclass { attribute1: value1; attribute2: value2; . . attributen: valuen; } a.snowman:link {
- 8. color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; }