1 / 41

Enhancing Visual Elements with CSS Styling

Learn how to use CSS properties to control the appearance of lists, tables, and forms, making your web content more visually appealing and user-friendly.

kristiecannon
Download Presentation

Enhancing Visual Elements with CSS Styling

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BULLET POINT STYLES list-style-type ol { list-style-type: lower-roman;}

  2. LIST STYLES UNORDERED ORDERED decimal 1 2 3 none decimal-leading-zero 01 02 03 disc circle lower-alpha a b c square upper-alpha A B C lower-roman i. ii. upper-roman I II III

  3. IMAGES FOR BULLETS list-style-image ul { list-style-image: url("star.png");} li { margin: 10px 0px 0px 0px;}

  4. POSITIONING THE MARKER list-style-position ul { width: 250px;}li { margin: 10px;}ul.illuminations { list-style-position: outside;}ul.season { list-style-position: inside;}

  5. POSITIONING THE MARKER list-style-position ul { width: 250px;}li { margin: 10px;}ul.illuminations {list-style-position: outside;}ul.season { list-style-position: inside;}

  6. POSITIONING THE MARKER list-style-position ul { width: 250px;}li { margin: 10px;}ul.illuminations { list-style-position: outside;}ul.season {list-style-position: inside;}

  7. LIST SHORTHAND list-style ul { list-style: inside circle; width: 300px;}li { margin: 10px 0px 0px 0px;}

  8. LIST SHORTHAND list-style ul { list-style: inside circle; width: 300px;}li { margin: 10px 0px 0px 0px;}

  9. LIST SHORTHAND list-style ul { list-style: inside circle; width: 300px;}li { margin: 10px 0px 0px 0px;}

  10. TABLE STYLES width border padding text-align text-transform background-color letter-spacing :hover font-size

  11. BORDER ON EMPTY CELLS empty-cells td { border: 1px solid #0088dd; padding: 15px;}table.one { empty-cells: show;}table.two { empty-cells: hide;}

  12. BORDER ON EMPTY CELLS empty-cells td { border: 1px solid #0088dd; padding: 15px;}table.one {empty-cells: show;}table.two { empty-cells: hide;}

  13. BORDER ON EMPTY CELLS empty-cells td { border: 1px solid #0088dd; padding: 15px;}table.one { empty-cells: show;}table.two {empty-cells: hide;}

  14. GAPS BETWEEN CELLS border-spacing, border-collapse td { background-color: #0088dd; padding: 15px; border: 2px solid #000000;}table.one { border-spacing: 5px 15px;}table.two { border-collapse: collapse;}

  15. GAPS BETWEEN CELLS border-spacing, border-collapse td { background-color: #0088dd; padding: 15px; border: 2px solid #000000;}table.one {border-spacing: 5px 15px;}table.two { border-collapse: collapse;}

  16. GAPS BETWEEN CELLS border-spacing, border-collapse td { background-color: #0088dd; padding: 15px; border: 2px solid #000000;}table.one { border-spacing: 5px 15px;}table.two {border-collapse: collapse;}

  17. STYLING FORMS

  18. STYLING TEXT INPUTS font-size :focus color :hover background-color background-image border padding border-radius

  19. STYLING SUBMIT BUTTONS color background-color text-shadow border-radius border-bottom :hover

  20. ALIGNING FORM CONTROLS div { border-bottom: 1px solid #efefef; margin: 10px; padding-bottom: 10px; width: 260px;}.title { float: left; width: 100px; text-align: right; padding-right: 10px;}.submit { text-align: right;}

  21. ALIGNING FORM CONTROLS div { border-bottom: 1px solid #efefef; margin: 10px; padding-bottom: 10px; width: 260px;}.title {float: left; width: 100px; text-align: right; padding-right: 10px;}.submit { text-align: right;}

  22. ALIGNING FORM CONTROLS div { border-bottom: 1px solid #efefef; margin: 10px; padding-bottom: 10px; width: 260px;}.title { float: left; width: 100px;text-align: right; padding-right: 10px;}.submit { text-align: right;}

  23. CURSOR STYLES cursor • a { • cursor: move;}

  24. WEB DEVELOPER TOOLBAR 1: Outlines elements 2: Structure of HTML (for writing selectors) 3: CSS Styles

  25. SUMMARY There are several properties that are specifically used to control the appearance of lists, tables, and forms.

  26. SUMMARY List markers can be given different appearances using the list-style-type and list-style-image properties.

  27. SUMMARY Tables can appear differently in various browsers, but there are properties you can use to control them and make them more consistent.

  28. SUMMARY Forms are easier to use if the form controls are vertically aligned using CSS.

  29. SUMMARY Forms benefit from styles that make them feel more interactive.

More Related