MORE CSS FORMATTING.

Slides:

Advertisements

Similar presentations

Table, List, Blocks, Inline Style

Advertisements

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …

TABLES 6 How to create tables What information suits tables How to represent complex data in tables.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.

FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.

Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.

Using CSS (Cascading Style Sheets) Effie Nadiv Edited by permission from author by Amir Kirsh.

Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.

CSS Statements, media queries, selectors, cascading Web Applications Martin Nečaský Department of Software Engineering, Faculty of Mathematics and Physics,

DOM: Document Object Model. What are trees? Or more like this…

 Pseudo-elements  Centering  Tables  Classes and ids.

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Art 128 Interface Programming 1 In-class Presentation Week 11B.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.

CIS 1310 – HTML & CSS 8 Tables. CIS 1310 – HTML & CSS Learning Outcomes  Create a Table  Apply Attributes to Format Tables  Increase the Accessibility.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

CSS – Presentation of Information. Types of Style Sheets External Embedded h1{color:red; font-family: Arial;} Inline Text is here.

Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

Meet the Document Tree Your roadmap to Web Design.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

Chapter 9 Table Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

CLASSES REVIEW: HREF, CONTEXT, FILE STRUCTURE. BIG CAVEAT Never cut and paste from a Powerpoint slide Punctuation is not the same Note that the “ is curly.

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …

>> More on CSS Selectors. Pre-requisite Open the file called sample.txt Copy the all the text from the file Open your browser and go to codepen.io Paste.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.

Cascading Style Sheets Level 2. Course Objectives, Session 1 Level 1 Quick Review Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your.

Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.

Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.

Document Object Model CSc 2320 Fall 2014 Disclaimer: All words, pictures are adopted from “Simple JavaScript”by Kevin Yank and Cameron Adams and also from.

Chapter 9 Table Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Selective Formatting. Auto Grader Multiple selectors  May use the same formatting for two elements h1, h2 { font-family: cursive; }  Maintains consistency.

Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from top to bottom.

Week 1: Introduction to HTML and Web Design

Introduction to CSS: Selectors

Cascading Style Sheets (CSS) Internal Style Sheets Classes

HTML & CSS Jan Janoušek.

Organizing Content with Lists and Tables

Web Development & Design Foundations with HTML5

CSS: Cascading Style Sheets

Elements of HTML Web Design – Sec 3-2

Web Development & Design Foundations with HTML5 8th Edition

>> More on CSS Selectors

TABLES IN EXCEL MORE CSS FORMATTING

Display Property.

HTML Tables CS 1150 Spring 2017.

Ordered & Unordered Lists in HTML

Elements of HTML Web Design – Sec 3-2

How to work with tables Chapter 10.

Session I Chapter 10 - How to Work with Tables

Google Fonts Selective Formatting

IS 360 Understanding CSS Selectors

HTML Level II (CyberAdvantage)

Document Object Model (DOM): Objects and Collections

Web Development & Design Foundations with H T M L 5

Lists, nesting, span/div

Cascading Style Sheets

Web Development & Design Foundations with HTML5

Murach's HTML and CSS, 4th Edition

ITI 134: HTML5 Desktop and Mobile Level II

Inheritance CSS.

Web Client Side Technologies Raneem Qaddoura

Web Development & Design Foundations with HTML5

Web Programming and Design

Basics of Web Design Chapter 9 Table Basics Key Concepts

Presentation transcript:

MORE CSS FORMATTING

DOM: Document Object Model

What are trees?

Or more like this…

A Better Example Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil Peter & Cate Kari & Hal Mark & Dina Tess & John Barb & Ray Sue Dan & Cora Stu & Chi Mary Leah Al Lori Jen Andy Jake Noah Ben Amy Di Sara Moe Andy Lady

Descendents Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil Peter & Cate Kari & Hal Mark & Dina Tess & John Barb & Ray Sue Dan & Cora Stu & Chi Mary Leah Al Lori Jen Andy Jake Noah Ben Amy Di Sara Moe Andy Lady

Children Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil Peter & Cate Kari & Hal Mark & Dina Tess & John Barb & Ray Sue Dan & Cora Stu & Chi Mary Leah Al Lori Jen Andy Jake Noah Ben Amy Di Sara Moe Andy Lady

Children Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil Peter & Cate Kari & Hal Mark & Dina Tess & John Barb & Ray Sue Dan & Cora Stu & Chi Mary Leah Al Lori Jen Andy Jake Noah Ben Amy Di Sara Moe Andy Lady

Siblings Sam & Bessie Al & Jewel Paul & Dawn Leo & Bea Abby & Phil Peter & Cate Kari & Hal Mark & Dina Tess & John Barb & Ray Sue Dan & Cora Stu & Chi Mary Leah Al Lori Jen Andy Jake Noah Ben Amy Di Sara Moe Andy Lady

HTML Creates a tree: DOM HTML tags create a tree Called the DOM (Document Object Model) Formatting correctly makes it obvious!

HTML body div footer header h1 ul div section p table p ul figure li tr tr li li div td td td td td td

HTML body div footer header h1 ul div section p table p ul figure child li li p p tr tr li li div td td td td td td siblings

Using the DOM CSS will allow us to format selectively based on the tree

CSS Selectors context tag { context > tag { Context + tag { Applies to any tag inside context Space is a descendant selector context > tag { Applies to any tag directly inside context > is a child selector Context + tag { Applies only to a tag that DIRECTLY FOLLOWS a context + is an adjacent sibling selector

HTML body div footer header h1 ul div section p table p ul figure li tr tr li li div td td td td td td

Child pseudo elements W3schools first-child, last-child, nth-child(), nth-last-child() () options: Number Even-odd Formula Every 3rd would be 3n+0 4, 7, 11 would be 3n+1 nth-last-child counts from end