Objectives Define the characteristics of good design. Test browsers for HTML5 and CSS3 compatibility. Define CSS and its relationship with HTML. Glance.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Table, List, Blocks, Inline Style
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Cascading Style Sheets
Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.
CSS: Separating Design and Content Kevin Campbell Duke University/Grouchyboy.com.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
Tutorial 4: Creating page layout with css
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Tutorial 4 Creating Special Effects with CSS
The.htm/.html Mystery When saving the template files in Internet Explorer, they will be named.htm by default. To be consistent with how the code was written.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
Creating a Simple Page: HTML Overview
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Week 4.  Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets.
Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.
CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.
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.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Cascading Style Sheets: Got Branding?. What is CSS? CSS = Cascading Style Sheets Styles define how HTML (web) elements are displayed. One (or more) style.
WRT235: Writing in Electronic Environments Basic CSS.
Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 7.
Daveandal.net Cascading Style Sheets 101 “How I learnt to love CSS and found my inner designer”
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.
CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
MTA EXAM HTML5 Application Development Fundamentals.
Relative, absolute, and Floating Positioning, Cascading Style Sheet, and Inheritance.
Advanced CSS. Display  Hiding an element can be done in two ways  display:none  Element is hidden and will no longer take up space on the page  Can.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
THE NORMAL DOCUMENT FLOW from Quick Tip: Utilizing Normal Document Flow by Alex Rodrigues on Web tuts.
Chapter 7.  Change body and link styles  Create a drop-down menu  Change color and font styles in the menu  Create a pop-up effect using CSS  Utilize.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
Internet & World Wide Web How to Program, 5/e 1. 2.
Working with Cascading Style Sheets
Getting Started with CSS
CSS Layouts: Positioning and Navbars
Website Design 3
Cascading Style Sheets - Building a stylesheet
Styles and the Box Model
DynamicHTML Cascading Style Sheet Internet Technology.
What are Cascading Stylesheets (CSS)?
DynamicHTML Cascading Style Sheet Internet Technology.
Web Design and Development
Positioning.
Cascading Style Sheets - Building a stylesheet
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

Objectives Define the characteristics of good design. Test browsers for HTML5 and CSS3 compatibility. Define CSS and its relationship with HTML. Glance over the HTML Box model. Play with element positioning. Breakdown a design.

Welcome To My Website Search Google for “Welcome to my website” Source Code: – Code is difficult to read. – Structure and style tangled in one document. Avoid design mistakes such as: – Table-based design. – Overuse of images. – Overloading a page with information.

Browser Issues Many jobs today ask for HTML 5 experience. – As of publication, HTML 5 is not yet the standard. – Enter into any browser. What does this mean? – Many new HTML 5 structures are not implemented cross browser. Is this a problem? NO! – HTML 5 basically builds upon HTML 4.01 and depreciates many older unnecessary elements. – Building blocks of proper design from 4.01 are in HTML 5.

Browser Issues What about CSS 3? – CSS from its inception has never been implemented properly across browsers. – Enter into any browser. What does this mean? – Learning the basics will go further than implementing the newest features. – CSS 3 builds on CSS 2, making both syntactically similar.

HTML and CSS What is CSS? – Cascading Style Sheets HTML style semantics. The use separates structure from “look”. – Easier to maintain. – Easier to read. – Cascading implies falling. HTML is a tree structure.

HTML and CSS

Basic Terms Element – HTML “Tag” (DOM object) – Selector – How to reference elements within the HTML document. – #ID.class Attribute – Property of an element that can be manipulated with CSS. – border-color: font-size: background-repeat:

The Box Model

Element Positions ValueDescription staticElements renders in order, as they appear in the document flow. This is default. absoluteThe element is positioned relative to its first positioned (not static) ancestor element fixedThe element is positioned relative to the browser window relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position inheritThe value of the position property is inherited from the parent element

Breaking Down A Design