CSS – Presentation of Information

Types of Style Sheets External Embedded h1{color:red; font-family: Arial;} Inline Text is here.

Example of CSS Separate language with its own syntax 1.Selectors: Selects the element to be affected 2.Declaration: “declares” a style for a selected element Declaration block: property & value

Types of Selectors Element Type Selectors Used to redefine a specific HTML tag p {color: blue;} Grouped - h1, h2, p, em, img { border: 1px solid blue; } Descendant Selectors - Ex: li em { color: silver; } targets emphasized text only when in a list item (li) ID Selectors Gives an element a unique identifying name #content { margin-left: 10px; } Class Selectors Used to “classify” elements into a conceptual group.special { color: orange; } Pseudo-Class Selectors

Organizing Page Content Page layout

HTML Common Elements Block & Inline Elements Block Elements Ex: … Each block element begins a new line Have space above and below the element by default This is the most important heading This is a paragraph Inline Elements Ex: … Flow within other elements (do not start new line) This is a paragraph with emphasized text within (inline) the paragraph element

The Box Model Block and inline elements are seen as being contained in rectangular boxes

CSS Padding, Borders, Margins Width & height of element Padding Border Margin

Generic Elements … Generic block-level element … Generic block-level element Name them using id or class Used to create a logical grouping of content or elements on the page Can be customized to describe content Have no inherent presentation qualities of their own, but can use style sheets to format them -allows you to accurately describe content -creates a “hook” for adding style rules

CSS for layout Examples

Generic Elements … Generic block-level elements Used like a container to group content Gives context to the elements in the grouping Use a unique id or class to give it a descriptive name The Complete Manual of Type, John Doe A combination of type history and examples of good and bad type design. This Week We’ve been working on… And last but not least… Used to create a logical grouping of content or elements on the page Can be customized to describe content

Generic Elements … Generic inline element Can only contain text and other inline elements Gives context to the elements in the grouping Use a unique id or class to give it a descriptive name Andy: Joe: Mary:

HTML 5 Elements … May be used to divide pages into major sections | major thematic sections Typography Books … … May be used for self-contained works that could stand alone or be reused in a different context Get To Know Helvetica History of Helvetica … Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)

HTML 5 Elements … Related to the surrounding content … Primary navigation links … Introductory material for page, section, or article … Footer for page, section, or article … Contact information Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier)

CSS for layout