CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets.

Slides:



Advertisements
Similar presentations
Introduction to HTML & CSS
Advertisements

Intro To Cascading Style Sheets By Mario Yannakakis.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Today CSS HTML A project.
Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.
Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
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.
18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,
Jeanine
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Cascading Style Sheets Tom Osman. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings.
XHTML/CSS Week 3. This Week  Quiz to revise last week (XHTML and DW)  CSS - Part 2  Using HTML Tables.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
CO1552 – Web Application Development Cascading Style Sheets.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.
Personal Design Portfolio First, you should select a theme for your web site. This theme can be your own design work, or the designs of another person.
Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober
The Web Wizard’s Guide To DHTML and CSS Chapter 1 A Review of CSS1.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of.
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Cascading Style Sheets
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
CSS Cascading Style Sheets. Cascading Style Sheet (CSS) A cascading style sheet (CSS) is a set of rules that define styles to be applied to entire Web.
Lesson 15: Cascading Style Sheets. Objectives Identify ways to apply Web page formatting with Cascading Style Sheets (CSS1 and CSS2) using various methods.
Cascading Style Sheets Objective: Create an external style sheet, embedded style sheet, and an inline style to change the look and feel of a web site.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Style Sheets. Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
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,
CASCADING STYLE SHEET 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.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.
Working with Cascading Style Sheets
IS 360 Declaring CSS Styles
Website Design 3
What are Cascading Stylesheets (CSS)?
Tutorial 3 Working with Cascading Style Sheets
Web Design and Development
Part 1: Cascading Style Sheets
HTML and CSS Basics.
Stylin’ with CSS.
Stylin’ with CSS.
Presentation transcript:

CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets Usability Accessibility Metatags Open Source SEO Search Engine Optimisation -->

CM143- WEB CSS CSS –Cascading Style Sheets What is a style:- a definition for a section of a page. Combining many attributes into a single tag.set once effect many places. CSS Rules:- (1) HTML Selector P {font : bold 12pt arial;} (2)Class Can be applied to any HTML tag Can have any name (3) ID #object {position: absolute; top :10px} only use once per page if JavaScript or DHTML are being used, could cause errors of two items on the page have same ID

CM143- WEB CSS - SYNTAX| CSS –Cascading Style Sheets P {font-family:"Times New Roman” } p { font-family:"Times"; font-size:20px; text-align : justify; color : #444444; }

CM143- WEB CSS - LOCATION| CSS –Cascading Style Sheets- Where can we place CSS ?: inline, embedded & external inline : In html tag CSS embedded : In Head of document Cascading Style Sheets - embedded P { text-align : justify; color : #444444; font : 10pt/13pt Arial, Helvetica, sans-serif; }

CM143- WEB CSS - LOCATION| CSS –Cascading Style Sheets- Where can we place CSS ?: inline, embedded & external external : in external file Cascading Style Sheets -external External has greater effect on the site and most useful in day-to- day work

CM143- WEB CSS - LOCATION| CSS –Cascading Style Sheets- DEMO - POWER OF CSS - ZEN