Designing Web Pages The case for CSS. The Power of CSS css Zen Garden

Slides:

Advertisements

Similar presentations

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.

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 Style.

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.

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

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.

กระบวนวิชา 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.

CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

1 Creating Web Pages Part 3. 2 CASCADING STYLE SHEETS (CSS): What exactly are they? Set of rules that define how a web browser should display an HTML.

LBSC 690: Session 6 CSS, XML/XSLT Jimmy Lin College of Information Studies University of Maryland Monday, October 15, 2007.

Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang

4.01 Cascading Style Sheets

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,

Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.

Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,

Cascading Style Sheets Example

HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.

ECMM6018 Enterprise Networking For Electronic Commerce Tutorial 2 Cascading Style Sheets (CSS)

ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.

Cascading Style Sheets Chapter Four. What are they? A set of style rules that tell the web browser how to present a web page or document. Cascading Style.

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.

CSS Basic (cascading style sheets)

Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.

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.

Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.

The Teacher HTML HTML (3) Cascading Style Sheets.

IS1825: Developing Multimedia Applications for Business Lecture 1: Introduction to CSS Rob Gleasure

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

Chapter 3 CSS. Vacabulary CSS: 层叠样式表 Syntax: 语法 Selector: 选择器 filter ：滤镜 / 过滤器 background: 背景 property: 属性.

Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)

CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.

Cascading Style Sheets

Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.

AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.

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.

Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School.

CSS Syntax. Syntax The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value}

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

Html: structure & content CSS: presentation & style A CSS Primer chapter 4.

CSS DHS Web Design. Location Between the & Start with – End with –

CSS Cascading Style Sheets. Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style.

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.

1 Cascading Style Sheets

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.

WebD Introduction to CSS By Manik Rastogi.

4.01 Cascading Style Sheets

Introduction to Web programming

Cascading Style Sheet (CSS)

CASCADING STYLE SHEET CSS.

Website Design 3

What are Cascading Stylesheets (CSS)?

The Internet 10/6/11 Cascading Style Sheets

Tutorial 3 Working with Cascading Style Sheets

4.01 Cascading Style Sheets

Presentation transcript:

Designing Web Pages The case for CSS

The Power of CSS css Zen Garden CSS In Action

Overview Description of CSS CSS Syntax CSS Formatting Options Grouping, Class Selectors, ID Selectors CSS Locations External Style Sheet, Internal Style Sheet, Inline Style Resources

What is CSS??? CSS stands for Cascading Style Sheets CSS added to HTML 4.0 to solve a problem HTML defines content of a document (,, etc.) CSS defines how to display the HTML content Styles are defined at four levels Browser defaults Within an external style sheet file (in a.css file) Within an internal style sheet (within ) Within an element (within, etc.)

CSS Syntax selector {property: value} body {color: white} p {font-family: "sans serif"} p {text-align:center;color:red} p { text-align: center; color: black; font-family: arial; }

CSS Grouping h1,h2,h3,h4,h5,h6 { color: green } p,tr,div { text-align: justify; border: 1 px; }

CSS Class Selectors p.right {text-align: right} This paragraph will be right-aligned..center {text-align: center} This heading will be center-aligned

CSS ID Selectors p#para1 { text-align: center; color: red } #green {color: green} This paragraph will be center-aligned and be on a red background.

External Style Sheet HTML File (.htm,.html) <link rel="stylesheet" type="text/css" href="mystyle.css" /> CSS File (.css) hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Internal Style Sheet hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Inline Styles This is a paragraph.

Resources CSS Home Page CSS Tutorial CSS Validator CSS Crib Sheet CSS Cheat Sheet