1. XHTML & CSS 2 By Trevor Adams

2. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags) Attributes Document Types Document level elements – structure of an HTML document CSS Cascading Style Sheets Purpose of styles Defining styles Understanding selectors

3. Topics Covered XHTML Parent / Child Elements Hierarchical structure that facilitates styles that ‘cascade’ Block-level and inline elements CSS Inheritance The box model Major CSS Concept

4. XHTML Standards compliant mark-up should be well formed and valid Hopefully you have become familiar with the validation tool @ http://validator.w3.org/http://validator.w3.org/ Part of being well formed and valid is to have properly nested and appropriate elements The concept of parent / child elements has been used already Might not have noticed, elements of the bullet list are a good example

5. XHTML – Parent / Child The ‘eldest’ element in an XHTML document is An element is said to be a parent when it encompasses other elements An element is said to be a child when it is contained within another element is a child of is child to, making a parent is child to, which makes a parent also It is possible for an element to be both a child and parent

6. XHTML – Parent / Child Certain elements have to be children Particularly where the structure of an element demands this And must be a child of a element, logically and semantically Table cells could not exist validly outside of a table element

7. XHTML – Block / Inline Elements All elements in XHTML are rendered as either block-level or inline It is important to understand what these descriptions mean Assists with understanding XHTML validity Affords an understanding of CSS rules applied to each type

8. XHTML – Block-level Elements A block-level element is always as wide as its container It always forces new content onto a new line Examples of block elements, -,, They can contain other block level elements and / or inline elements

9. XHTML – Inline Elements Inline elements are contained within a block- level element and flow as part of the content Inline mark-up does not break on to a new line automatically (except the ) Examples of inline elements,,,,

10. Question? Is an element inline or block-level?

11. CSS - Inheritance A major advantage of CSS – Inheritance Setting properties for parent elements Automatically passing them down to children E.g. setting font-family to Arial Has a knock on effect of setting child elements to the same No need to specify a rule for each child element also Can change the setting with one line in the CSS The more specific rules override the more general ones Nice and easy to see what is going on

12. CSS – The Box Model Everything in XHTML / CSS is treated as a box Both inline and block level elements The box is made up of Border Margin Padding

13. Box Model Margin – space between border and other boxes Border – line that marks the box boundary Padding – space between border and contained content

14. Summary XHTML concepts are important They define how you describe your information Remember, information is paramount, presentation is secondary Aim to achieve both, but presentation with information is generally useless CSS – Cascading Style Sheets Become familiar with the Box model and property inheritance Corner stone concepts of CSS

15. Where is it going? These topics are of little use to you when just listening about them Need to practice skill, learn the behaviour and develop using the parent/child and box model concepts mindset Engage with the tutorial material and learn to use these concepts in real examples and exercises Do not do, then forget. This is a skill which needs visiting many times over to see how it applies to different projects Examine any previous work and see how the techniques discussed here could be applied Think about the steps involved in turning an older standard / non-standard site into a professional job

16. Questions? Thank you for taking part!