CSS – Presentation of Information

Types of Style Sheets

External<link rel = “stylesheet” href=“mystyles.css” type=“text/css”/>

Embedded<style type = “text/css”>

h1{color:red; font-family: Arial;}

</style>

Inline

<h1 style=“color:red; font-family:arial”> Text is here.

</h1>

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 SelectorsElement 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 ContentPage layout

HTML Common Elements

Block & Inline Elements

Block Elements Ex: <p /> <h1>…</h1>Each block element begins a new lineHave space above and below the element by default

<h1> This is the most important heading </h1>

<p> This is a paragraph </p>

Inline Elements Ex: <em>…</em>Flow within other elements (do not start new line)

<p> This is a paragraph with <em> emphasized text </em> within (inline) the paragraph element </p>

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

<div>…</div>Generic block-level element

<span>…</span>Generic block-level element

Name them using id or class

Used to create a logical grouping of content or elements on the pageCan 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

Exampleshttp://www.shinybytes.com/newcss.html

Generic Elements

<div>…</div>•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

<div class =“listing”><img src=“type-book-cover.gif” alt=“description”><p><cite>The Complete Manual of Type</cite>, John

Doe</p><p>A combination of type history and examples of

good and bad type design.</p></div>

<div id =“news”><h1>This Week</h1><p>We’ve been working on…</p><p>And last but not least…</p>

</div>

Used to create a logical grouping of content or elements on the pageCan be customized to describe content

Generic Elements<span>…</span>

•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

<ul> <li> Andy: <span

class=“tel”>414-123-4567</span></li> <li> Joe: <span

class=“tel”>414-101-0101</span></li> <li> Mary: <span class=“tel”>414-255-1212</span></li> </ul>

HTML 5 Elements

<section>…</section>

•May be used to divide pages into major sections | major thematic sections<section>

<h2>Typography Books</h2><ul> <li>…</li></ul>

</section><article>…</article>

•May be used for self-contained works that could stand alone or be reused in a different context

<article><h1>Get To Know Helvetica</h1><section> <h2>History of Helvetica</h2> <p>…</p></section>

</article>

Well supported by current desktop and mobile browsers(known issues with IE 8 and earlier)

HTML 5 Elements

<aside>…</aside>

•Related to the surrounding content

<nav>…</nav>

•Primary navigation links

<header>…</header>

•Introductory material for page, section, or article

<footer>…</footer>

•Footer for page, section, or article

<address>…</address>

•Contact information

Well supported by current desktop and mobile browsers(known issues with IE 8 and earlier)

CSS for layout