{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

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

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

View Full Document Right Arrow Icon
CSS Basics 1 CSS Basics CS5281 Internet Application Development
Background image of page 1

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

View Full Document Right Arrow Icon
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
Background image of page 2
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
Background image of page 3

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

View Full Document Right Arrow Icon
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
Background image of page 4
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
Background image of page 5

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

View Full Document Right Arrow Icon
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
Background image of page 6
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. It is used to define the same declarations to a list of selectors.
Background image of page 7

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

View Full Document Right Arrow Icon
Image of page 8
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}