1. Today’s objectives  Complete web page  Using xhtml & CSS  Adding CSS to documents Embed Link @import url(File);  CSS

2. XHTML ELEMENTS

3. Presentational versus semantic mark up http://www.w3schools.com/tags/ref_html_dtd.asp  | text-decoration : underline;  | | font-weight : bold;  | | font-style : italic;  | text-decoration : line-through;  | font-family : Arial;  | text-align : center; Presentational Elements

4. Presentational elements alternatives  Presentational elements alternatives –  semantic elements | Phase elements : Computer Phrase elements:  Style sheet properties | font-family : Arial;

5. Source: Learning Web Design : J. Robbins, 2009, p. 85

6. XHML | Element Prohibitions  Distinction between block-level (starts new line in the flow of HTML) and inline elements (don't break the flow. ) is important.  Block : …  Inline : …  Whether an element is block-level or inline restricts what other elements it may contain. Block | inline elements: http://htmlhelp.com/reference/html40/inline.html

7. XHML | Element Prohibitions  There are certain tags that are not allowed to be in other tags.  Block elements cannot be inside inline elements. Bold paragraph  a link ( Link ) cannot contain another a link. LinkA and Nested Link  Form element cannot contain another form inside of it.  Inline elements (e.g., ) cannot be directly in the main of a page.

8. XHML | Element Prohibitions  cannot be inside another

9. XHML | Element Prohibitions W3C - Nesting restrictions:  a must not contain other a elements.  pre must not contain the img, object, big, small, sub, or sup elements.  button must not contain the input, select, textarea, label, button, form, fieldset, or iframe.  label must not contain other label elements.  form must not contain other form elements. Source: http://www.w3.org/TR/2002/REC-xhtml1-20020801/#prohibitions

10. CASCADING STYLE SHEETS CSS

11. CSS Level 1 – CSS1  First version of CSS (CSS Level 1 - CSS1) in 1996.  Included properties for font, color, and spacing instructions to page elements.  Lack of browser support prevented widespread use of CSS.

12. CSS2  CSS Level 2 (CSS2) released in 1998.  Added positioning properties allowed CSS to be used for page layout.  Introduced styles for other media types (such as print).

13. CSS2  CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a working draft or a Candidate Recommendation (W3C).

14. CSS2.1 and CSS3  CSS 2.1 builds on CSS2 which builds on CSS1.  Supports media-specific style sheets - authors may tailor presentation of documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.  CSS 2.1 is derived from and will replace CSS2.  CSS3 specification – Working draft

15. CSS  Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.  Some browsers already support features from CSS Level 3 (CSS3) - still in development. Source : www.w3.org/Style/CSS.

16. CSS  CSS3 adds support for:  vertical text  improved handling of tables  improved integration with XML technologies  multiple background images  Etc. Source : www.w3.org/Style/CSS.

17. The Benefits of Using CSS  Better type and layout controls.  Less work. Change appearance of site by editing one style sheet.  Potentially smaller file sizes and faster download.

18. The Benefits of Using CSS  More accessible sites. Meaningfully marking up content makes it more accessible for nonvisual or mobile devices.  Reliable browser support. Almost all browsers support all of CSS1 and most of CSS2.

19. RULES, SELECTORS, DECLARATIONS CSS

20. Style sheet  Made up of one or more style instructions (called rules).  Rules describe how elements get displayed. h1 { color: green; } p { font-size: small; font-family: sans-serif; }

21. Cascading Style Sheets  Style is set of one or more rules that attached to elements in document (, …) h1 { color: #000000; }

22. The Rule h1 {color : #c0c0c0;} Rule

23. The Rule h1 {color : #c0c0c0;} SelectorDeclaration Rule

24. The Declaration Has two parts separated by a colon:  Property - that part before the colon  Value - that part after the colon h1 {color : #c0c0c0;}

25. The Declaration  Property is a quality or characteristic that something possesses (e.g., color, size, style).

26. The Declaration  Curly brackets {} help distinguish between selector, property, and value  Colon separates property and values  Semicolon separates declarations h1 {color : #c0c0c0; font-size : 2em;} p {font-family : Arial;}

27. Types of selectors  Tag Selectors: Page-Wide Styling  Class Selectors: Pinpoint Control  ID Selectors: Specific Page Elements  The Universal Selector (Asterisk) * { font-weight: bold; }

28. Tag selectors  h1 {color : #c0c0c0;}  body { background-color : #FFFFFF;}  p {padding : 10px;}  Styling Groups of Tags h1, h2, h3, h4, h5, h6 { color : #F1CD33; }

29. Types of selectors | Descendent  Descendent Selectors  h1 strong { color: red; } Any tag inside an h1 is red, but other instances of the tag on the page aren’t affected.  li a { font-family: Arial; }

30. Types of selectors | Class selectors  Classes (applies to more than one type of element – several different styles for the same element..mytext {font-family: Verdana; font-size: 10px;} Hello World

31. 31 Types of selectors | ID  id Selector  Use to apply a CSS rule to ONE element on a Web page.  Configure with #idname  The sample creates an id called “new” with red, large, italic text.  To use the id, code the following XHTML: This is text is red, large, and in italics #new { color: #FF0000; font-size:2em; font-style: italic; }