04CSS - CSS Basics 1 CSS Basics CS5281 Internet Application...

Info iconThis preview shows pages 1–8. Sign up to view the full content.

View Full Document Right Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: CSS Basics 1 CSS Basics CS5281 Internet Application Development CSS Basics 2 Understanding CSS Cascading Style Sheets (CSS) Why use CSS? Versions of CSS How does CSS work? Origins of CSS Basic Syntax of a CSS Rule Where to put CSS rules? Inheritance of Styles Cascade-Order Style Sheet Strategies CSS Basics 3 Cascading Style Sheets (CSS) • It controls the appearance of the content on HTML pages. • It is not HTML. It is a separate code that enhances the abilities of HTML by allowing authors to redefine the way that existing tags display their content. Verdana, Arial green 24 pixels <h1> … </h1> Styles applied HTML tag Document Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide . Berkely: Peachpit Press. P. 6 CSS Basics 4 Why use CSS? • It separates structure from appearance. • It creates consistent appearance. • It is ease of maintenance. • It increases accessibility. • It applies additional effects:- – Add hover effect to links – Remove underlines on links – Add horizontal rule to headings – Use for layout, instead of a table – Control paragraph, line, and letter spacing CSS Basics 5 How does CSS work? • When a visitor loads one of your web pages, the server sends the HTML file to the visitor’s computer along with any files linked to or embedded in the HTML file, such as images. • The CSS code can be either embedded directly in the HTML file or linked to it. • The visitor’s browser will interpret this code by using its particular rendering engine to apply the CSS to the HTML, and then display the page in the browser window. <HTML> {CSS} Interpretation Interpretation Render Teague, J. C. (2007). CSS, DHTML & AJAX, 4th edition: Visual QuickStart Guide . Berkely: Peachpit Press. P. 7 CSS Basics 6 Basic Syntax of a CSS Rule • A CSS rule specifics the HTML to which a style definition applies, and then defines the style. h1 { color: red; } • Selector – It starts each rule, appearing before the left curly brace. • Declaration – It is surrounded by curly braces. – It is made up of a pair of property (to identify the style that is being defined) and value (to define its nature). Selector Property: Value CSS Basics 7 Basic Syntax of a CSS Rule: Basic Selectors • Type Selector – A type selector is used to match the name of a document language element type. • Class Selector – A class is a “free agent” that can be applied to any HTML tag. – A class selector is used to match any element with a matching class attribute. • ID Selector – An ID is unique to one element in an HTML/XHTML document. – An ID selector is used to match an element with a matching ID attribute. • Group Selector – A group selector incorporates one or more selector types....
View Full Document

This note was uploaded on 01/11/2011 for the course CS 5281 taught by Professor Jianyingwang during the Summer '10 term at City University of Hong Kong.

Page1 / 80

04CSS - CSS Basics 1 CSS Basics CS5281 Internet Application...

This preview shows document pages 1 - 8. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online