際際滷

際際滷Share a Scribd company logo

Web Design Course: CSS lecture 6

Gheyath M. Othman
Gheyath M. Othman

This document discusses CSS properties for styling lists and tables. It provides examples of CSS properties for lists like list-style, list-style-image, list-style-type, and list-style-position. It demonstrates how to create a simple menu with an unordered list and links. For tables, the document outlines CSS properties for controlling borders, spacing, caption placement, and empty cells. It aims to show how HTML tables can be improved with CSS styling.

1 of 6
Downloaded 16 times
Web Programming and Design CSS (Cascading Style Sheet) By: Gheyath M. Othman
CSS Lists 2 ul { list-style: square inside url("/slideshow/learning-css-lecture-6/110294243/sqpurple.gif"); } List-style ul { list-style-image: url(/slideshow/learning-css-lecture-6/110294243/&); } List-style-image ul.b { list-style-type: square; } List-style-type ul { list-style-position: inside; } List-style-position The CSS list properties allow you to: Set different list item markers for ordered and unordered lists. Set an image as the list item marker.
CSS Lists 3 Property values Description list-style Put all properties together Sets all the properties for a list in one declaration list-style-image url, none Specifies an image as the list-item marker list-style-position Inside, outside Specifies if the list-item markers should appear inside or outside the content flow list-style-type None, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, Hebrew, Armenian, Georgian, cjk- ideographic Specifies the type of list-item marker CSS List Properties
CSS Lists 4 Create Simple Menu Example <!DOCTYPE html> <html> <head> <link rel=stylesheet href=style.css> </head> <body> <h1>Unordered Lists</h1> <ul> <li><a href="">Coffee</a></li> <li><a href="">Tea</a></li> <li><a href=""> Coca Cola</a></li> </ul> </body> </html> ul{ list-style-type: none; } ul li{display: inline;margin: 0px;} ul li a:link{ text-decoration: none; padding:15px; width:90px; height:30px; background-color: yellow; border-radius: 5px; text-align: center; font-size: 20px; } ul li a:hover{ background-color: green; color: #FFF; } On mouse over HTML CSS
CSS Tables 5 HTML table can be greatly improved with CSS. The CSS table properties allow you to set the layout of a table. Property Description Value border Used to specify table borders in CSS, width, style, color border-collapse sets whether the table borders are collapsed into a single border or detached as in standard HTML. Default value is separate. collapse, separate border-spacing Specifies the distance between the borders of adjacent cells, default is zero. Length caption-side Specifies the placement of a table caption, default is top top, bottom empty-cells Specifies whether or not to display borders and background on empty cells in a table, default is show hide, show table-layout Sets the layout algorithm to be used for a table auto, fixed
CSS Simple menubar example 6

More Related Content

Web Design Course: CSS lecture 6

  • 1. Web Programming and Design CSS (Cascading Style Sheet) By: Gheyath M. Othman
  • 2. CSS Lists 2 ul { list-style: square inside url("/slideshow/learning-css-lecture-6/110294243/sqpurple.gif"); } List-style ul { list-style-image: url(/slideshow/learning-css-lecture-6/110294243/&); } List-style-image ul.b { list-style-type: square; } List-style-type ul { list-style-position: inside; } List-style-position The CSS list properties allow you to: Set different list item markers for ordered and unordered lists. Set an image as the list item marker.
  • 3. CSS Lists 3 Property values Description list-style Put all properties together Sets all the properties for a list in one declaration list-style-image url, none Specifies an image as the list-item marker list-style-position Inside, outside Specifies if the list-item markers should appear inside or outside the content flow list-style-type None, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, Hebrew, Armenian, Georgian, cjk- ideographic Specifies the type of list-item marker CSS List Properties
  • 4. CSS Lists 4 Create Simple Menu Example <!DOCTYPE html> <html> <head> <link rel=stylesheet href=style.css> </head> <body> <h1>Unordered Lists</h1> <ul> <li><a href="">Coffee</a></li> <li><a href="">Tea</a></li> <li><a href=""> Coca Cola</a></li> </ul> </body> </html> ul{ list-style-type: none; } ul li{display: inline;margin: 0px;} ul li a:link{ text-decoration: none; padding:15px; width:90px; height:30px; background-color: yellow; border-radius: 5px; text-align: center; font-size: 20px; } ul li a:hover{ background-color: green; color: #FFF; } On mouse over HTML CSS
  • 5. CSS Tables 5 HTML table can be greatly improved with CSS. The CSS table properties allow you to set the layout of a table. Property Description Value border Used to specify table borders in CSS, width, style, color border-collapse sets whether the table borders are collapsed into a single border or detached as in standard HTML. Default value is separate. collapse, separate border-spacing Specifies the distance between the borders of adjacent cells, default is zero. Length caption-side Specifies the placement of a table caption, default is top top, bottom empty-cells Specifies whether or not to display borders and background on empty cells in a table, default is show hide, show table-layout Sets the layout algorithm to be used for a table auto, fixed
  • 6. CSS Simple menubar example 6