Cascading Style Sheets 1. About Lists HTML list code ul, ol, dldl CSS list-item style properties

Slides:

Advertisements

Similar presentations

LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties-- List properties –Table properties-- Classification properties.

Advertisements

LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.

Tutorial 3: Designing a Web Page with CSS

Table, List, Blocks, Inline Style

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

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 Part 3 Fall, 2007 Modified by Linda Kenney Nov. 12, 2007.

Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.

CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering.

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.

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 Sheet Basics Pepper. Looking at the HTML See the surrounding tags See head, body, paragraph, header See the ending tags See the list.

Cascading Style Sheets Example

Principles of Web Design 6 th Edition Chapter 5 – Web Typography.

Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.

Tutorial 4 Creating Special Effects with CSS

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 HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.

Deprecated Elements. Extensions to HTML Browser specific. Proposed revisions to standard. +Powerful presentation tools. −Limited support (or) −Subject.

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.

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.

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

Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.

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.

Introducing Cascading Style Sheets. Cascading Style Sheet Basics  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles.

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.

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.

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

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.

Cascading Style Sheets Layout

Organizing Content with Lists and Tables

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.

List Properties Box Properties Pseudoclass

The Internet 10/27/11 XHTML Forms

COS 125 DAY 13.

Presentation transcript:

Cascading Style Sheets 1

About Lists HTML list code ul, ol, dldl CSS list-item style properties Cascading Style Sheets 2

Customizing Lists list-style properties control visual characteristics of list-item elements sets appearance of the markers for each item Symbol, Number, Image sets position of the marker next to the list content Cascading Style Sheets 3

Applying Styles to Lists To specify the list marker displayed by the browser, you can apply the style list-style-type: type Most browsers place the list marker to the left of the block, lining up the markers with each list item list-style-position: position CS202 4

Customizing Lists Specifying the list-style-type Allows customization of the list marker list-style-type Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower alpha | lower- latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none Initial: disc Inherited: yes Cascading Style Sheets 5

Numerical List Values disc Default value decimal Decimal (1, 2, 3..) decimal-leading-zero Decimal (01, 02, 03..) lower-roman Lower case roman (i, ii) upper-roman Upper case roman (I, II) Hebrew, armenian, georgian, hiragana,| katakana Self explanatory Cascading Style Sheets 6

Customizing Lists Specifying list-style-image Allows customization of list marker to an image list-style-image Value: | none | inherit Initial: none Applies to: elements with ‘display: list-item’ Inherited: yes Cascading Style Sheets 7

Customizing Lists Specifying the list-style-position Allows placement of the list marker, either inside or outside the list-item content box list-style-position Value: inside | outside | inherit Initial: outside Applies to: elements with ‘display: list-item’ Inherited: yes Cascading Style Sheets 8

Customizing Lists Specifying the list-style Shorthand Property Allows writing of a single rule to specify all the list- item properties list-style shorthand property description Value: [ || || list-style- image>] | inherit Applies to elements with ‘display: list-item’ Inherited: yes Cascading Style Sheets 9

Summary The list-style properties controls The visual characteristics of elements creating bulleted lists ordered lists The appearance of list-item markers The positioning of list-item markers Cascading Style Sheets 10