CSS-Lists CSS provides special properties that are designed for lists. It is usually more convenient to use these properties whenever you can. To specify.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets Alternative to HTML tag style.
Advertisements

Tutorial 3: Designing a Web Page with CSS
Table, List, Blocks, Inline Style
The Image control supports the following properties (this is not a complete list): AlternateText Enables you to provide alternate text for the image (required.
Client-Side Internet and Web Programming
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
Tutorial 4 Formatting Text. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a spread heading Indent text Change the line spacing.
CS4370/6370 Web Development Cascading Style Sheets (CSS)
COS 125 DAY 21. Agenda  Assignment 6 due  Assignment 7 is posted Assignment 7 Due April 2PM  Left to do 1 Assignments (8 total)  Due May 2 3.
CSE 154 LECTURE 3: MORE CSS. Cascading Style Sheets (CSS): HTML CSS describes the appearance and layout of information on a web page (as opposed.
Web Design & Development Cascading Style Sheets (CSS)
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Cascading Style Sheets 1. About Lists HTML list code ul, ol, dldl CSS list-item style properties
Cascading Style Sheets Part 3 Fall, 2007 Modified by Linda Kenney Nov. 12, 2007.
CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering.
Multimedia and the World Wide Web HCI 201 Lecture Notes #7B.
Cascading Style Sheets. What is a style sheet? >A controlling document (or part of the document) >Sets the default appearance of items on the web page.
Cascading style sheets - CSS
COS 125 DAY 23. Agenda Assignment #6 Graded 8 A’s, 4 B’s and 1 D Biggest Problem area was layout Assignment #7 Posted Due April 20 Two (one?) more to.
COS 125 DAY 20.
CSS Margins. The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom,
Page Layout & Mobile Web Using columns, grid systems, etc… to layout sites for desktops and mobile.
CIS 1310 – HTML & CSS 2 HTML Basics. CIS 1310 – HTML & CSS Learning Outcomes  Describe Polyglot Coding  Identify Markup Language in Web Pages  Use.
Cascading Style Sheets Example
Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
WDV 101 Intro to Website Development
CSCI N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Lists, Destination Anchors & New Windows.
Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Syntax & Semantics Instructor: Joseph DiVerdi,
Chapter 3 © 2012 by Addison Wesley Longman, Inc Introduction - The CSS1 specification was developed in CSS2 was released in CSS2.1.
Deprecated Elements. Extensions to HTML Browser specific. Proposed revisions to standard. +Powerful presentation tools. −Limited support (or) −Subject.
Website Development & Management Working with Style Rules Instructor: John Seydel, Ph.D. CIT Fall
What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
Tutorial #4 Formatting Text and Links. Tutorial #3 Review - CSS CSS format Selector { property1: value1; /* Comments */ } Embedded, In-Line, and External.
LITTLE BOXES Controlling size of boxes Box model for borders, margin and padding Displaying and hiding boxes.
Doncho Minkov Telerik Web Design Course html5course.telerik.com Technical Trainer
INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images.
Cascading Style Sheets Part 3 Spring, 2008 Modified by Linda Kenney April 21, 2008.
CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables.
Note #2.  How does a structure of HTML document look like?  How do you align … A paragraph? A heading?  What is the main difference between one-sided.
3. Cascading Style Sheets (CSS) M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer.
CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 7: CSS Building Blocks.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Cascading Style Sheets.
CSE 154 Lecture 3: more CSS.
CSS for Styling CS The good, the bad and the… ugly!  Tags such as b, i, u, and font are discouraged in strict XHTML  Why is this bad? CS380 2.
IS1825 Multimedia Development for Internet Applications Lecture 12: IDs, Classes and Internal CSS Rob Gleasure
1 CSS محمد احمدی نیا 2 Of 21 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements 
Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 15: Lists.
Class & ID Selectors, Font and List Properties. Id Selectors  # followed by Id-name (without space)  Can be used once on a page  Examples: #p1 { color:
Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
Tutorial 3 Designing a Web Page with CSS
Chapter 11 & 12 CSS Style Sheets: Intro. Why CSS? Separate presentation from content – more accessible Less work – can change appearance of whole site.
CSS Details Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  To use CSS properties for fonts  Evaluate whether to use pts,
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 4 Formatting Text and Links.
CS 22: Enhanced Web Site Design - Cascading Style SheetsSlide 1 (of 54) Enhanced Web Site Design Stanford University Continuing Studies CS 22 Mark Branom.
Introduction to Cascading Style Sheets Pat Morin COMP 2405.
HTML WITH CSS.
HTML WITH CSS.
Cascading Style Sheets (Formatting)
Ordered & Unordered Lists in HTML
The Internet 10/25/11 XHTML Tables
Formatting Text with HTML and CSS
COS 125 DAY 23.
The Internet 10/27/11 XHTML Forms
COS 125 DAY 13.
LISTS.
Presentation transcript:

CSS-Lists CSS provides special properties that are designed for lists. It is usually more convenient to use these properties whenever you can. To specify the style for a list, use the list-style property to specify the type of marker. The selector in your CSS rule can either select the list item elements (for example, ), or it can select the parent list element (for example, ) so that the list elements inherit the style.

List Properties list-style-type list-style-position list-style-image list-style

list-style-type Declares the type of list marker used. Possible Values 1.Disc 2.Circle 3.Square 4.Decimal 5.decimal-leading-zero 6.lower-roman 7.upper-roman 8.lower-alpha 9. upper-alpha 10. lower-greek 11. lower-latin 12. upper-latin 13. Hebrew 14. Armenian 15. Georgian 16. cjk-ideographic 17. Hiragana 18. Katakana 19. hiragana-iroha 20. katakana-iroha

Examples ol { list-style-type:upper-roman; } ul { list-style-type:square; }

list-style-position Declares the position of the list marker. Possible Values 1.Inside 2.outside Examples: ol { list-style-position: inside; } ul { list-style-position: outside; }

list-style-image Declares an image to be used as the list marker. It takes URL values. For Example: ul { list-style-image: url(image.jpg); }

list-style Shorthand property to declare three list properties at once. Separate values by a space in the following order: list-style-type list-style-position list-style-image

Examples ul { list-style: disc inside url(image.gif); } ol { list-style: upper-roman outside; }